Images embedded in Coreblog entries using entry editing form

Images in Coreblog entries using entry editing form: Original recipe by Brady Davis and Jeffrey Hicks (from Blogplot ), now reused by CodeSyntax for its new modified Coreblog version, and republished here for documentation purposes.

See how it this feature works in our demo, or in sites related to the Blogplot crew, the inventors of it: at Blogplot.com or at JRHicks.net. This was documented last year as well at the old Coreblog-en list, but indentation was not preserved in the archive's code, so we republish it now.

Begin Recipe

Tested with:

    COREBlog 0.53b    Photo 1.2.3 http://www.zope.org/Members/rbickers/Photo/    ImageMagick 5.5.7.11    Zope 2.6.2   * Python Version 2.1.3 

by CodeSyntax: We have tested it with COREBlog 1.1 and Zope 2.6.1b1

Recipe

1. Backup your stuff

2. In COREBLog product folder on fileystem in import modules sections of Entry.py add:

  from OFS.ObjectManager import ObjectManager 

3. Scroll down and change the class Entry definition to extend ObjectManager as follows:

  class Entry(ObjectBase, ObjectManager, Management.Tabs,Undo.UndoSupport): 

4. Scroll down and add this list item to the manage_options list:

  {'label':Images,'icon':'', 'action':manage_images, 'target': 'manage_main'}, 

5. Scroll down and add these statements near the other similar HTMLFile statements:

     security.declareProtected(ManageCOREBlog, manage_other)     manage_images = HTMLFile(dtml/manage_addImage,globals()) 

6. Scroll down and add the following methods and security statements inside the class body by CodeSyntax: BE CAREFUL WITH INDENTATION !! :

     security.declareProtected(AddCOREBlogEntries, manage_addImageScript)     def manage_addImageScript(self):         context = self         if context.REQUEST.has_key(pic1):             file = context.REQUEST['pic1']             name = context.ZopeTime().strftime(img_%b_%d_%Y_%M_%S)             context.manage_addProduct['Photo'].manage_addPhoto(name,name,file)             photo = getattr(context,name)
            for property in [placement,border,display_size,zoom,'caption']:                 photo.manage_addProperty(property, context.REQUEST[property], string)
 
        if context.REQUEST.has_key(deletebox):             ids = context.REQUEST['deletebox']             context.manage_delObjects(ids)         return ''
 
    security.declareProtected(View, images_top)     def images_top(self):         """ images_top method """         photos = self.objectValues(Photo)         results = ''         for p in photos:             placement = p.getProperty(placement)             if placement.find(top)>=0:                 if placement.find(left)>=0:                     float = float: left; margin-right: 1em; margin-bottom: .5em;                 else:                     float = float: right; margin-left: 1em; margin-bottom: .5em;                 tag1 = p.tag(display=p.getProperty(display_size),                 alt=p.getProperty(caption), css_class=None, style=border: %s; %s)                 tag2 = tag1%(p.getProperty(border), float)                 zoom = p.getProperty(zoom)                 if zoom.find(no zoom) >= 0:                     tag3 = tag2                 else:                     tag3 = '<a href="%s?display=%s">%s</a>'%(p.absolute_url(),zoom,tag2)
                results = '%s%s'%(results, tag3)         return results 
 
    security.declareProtected(View, images_bottom)     def images_bottom(self):         """ images bottom method """         photos = self.objectValues(Photo)         results = ''         for p in photos:             placement = p.getProperty(placement)             if placement.find(bottom)>=0:                 tag1 = p.tag(display=p.getProperty(display_size),                 alt=p.getProperty(caption), css_class=None, style=border: %s;)                 tag2 = tag1%(p.getProperty(border),)                 zoom = p.getProperty(zoom)                 if zoom.find(no zoom) >= 0:                     tag3 = tag2                 else:                     tag3 = '<a href="%s?display=%s">%s</a>'%(p.absolute_url(),zoom,tag2)
                results = '<div style="margin-top: 1em;">%s%s</div>'%(results, tag3)         return results
 
    security.declarePrivate(getId)     def getId(self):         return self.id
    

7. Save.

8. Create new file in Filesystem Products/COREBLog/dtml. Save the file as manageAddImage.dtml Copy and paste the source code found in the APPENDIX after step 11.

9. Restart Zope or Refresh the COREBlog product from the Zope Management Interface (ZMI)

10. From ZMI customize "entry_body" COREBlog skin. Insert dtml statements <dtml-var images_top> and <dtml-var images_bottom> around your body. Below I show a clip of code to show where I inserted my statements.

by CodeSyntax: this change is already made in the entry_body DTML Method in the ZEXP:

  <p>  <dtml-var images_top>  <dtml-if "format == 0">  <dtml-var body newline_to_br>  <dtml-elif "format == 1">
 <dtml-var body fmt=structured-text>  <dtml-elif "format == 2">  <dtml-var body>  </dtml-if>  <dtml-var images_bottom>  </p>
  

11. You should be done. Enjoy.

APPENDIX

# manageAddImage.dtml :

   <dtml-var manage_page_header>   <dtml-var manage_tabs>
  <dtml-var manage_addImageScript>   <p>Add and manage images</p>   <form action="manage_images" method="POST" enctype="multipart/form-data">   <table cellspacing="1" cellpadding="0" border="0">   <tr>
 
  <td class="list-header" valign="top" align="left">   <div class="form-label">
 
  Image   </div>   </td>   <td valign="top" align="left">
 
  <input type="file" name="pic1">   </td>   </tr>   <tr>     <td class="list-header" valign="top" align="left">      <div class="form-label" style="white-space: nowrap;">
      Placement in entry      </div>    </td>    <td valign="top" align="left">     <select name="placement">      <option SELECTED value="top right"> top right      <option value="top left"> top left      <option value="bottom"> bottom     </select>
 
   </td>    </tr>
  
  <tr>     <td class="list-header" valign="top" align="left">      <div class="form-label" style="white-space: nowrap;">     Display Size     </div>
   </td>    <td valign="top" align="left">     <select name="display_size">      <option value="tiny"> tiny (65x65)      <option value="thumbnail"> thumbnail (100x100)      <option SELECTED value="xsmall"> xsmall (200x200)      <option value="small"> small (300x300)     </select>
 
   </td>    </tr>
  
  <tr>     <td class="list-header" valign="top" align="left">      <div class="form-label" style="white-space: nowrap;">     Zoom Size      </div>
   </td>    <td valign="top" align="left">     <select name="zoom">      <option value="no zoom"> no zoom      <option SELECTED value="small"> small (300x300)      <option SELECTED value="medium"> medium (500x500)      <option value="large"> large (800x800)      <option value="original"> original     </select>
 
   </td>   </tr>
  
  <tr>     <td class="list-header" valign="top" align="left">      <div class="form-label" style="white-space: nowrap;">     Border     </div>
   </td>    <td valign="top" align="left">     <select name="border">      <option value="0px"> 0px (No Border)      <option SELECTED value="1px solid black"> 1px solid black      <option value="1px solid black"> 2px solid black     </select>
 
   </td>   </tr>
  
  <tr>     <td class="list-header" valign="top" align="left">      <div class="form-label" style="white-space: nowrap;">     Caption      </div>
   </td>    <td valign="top" align="left">      <input type="text" name="caption" size="40">    </td>   </tr>
  
  <tr>
 
   <td>   &nbsp;    </td>    <td>      <input type="submit" name="AddImage" value="Add Image">    </td>   </tr>
 
  </table>   </form>   <dtml-let entry_id=id>   <dtml-in "objectValues(Photo)">   <dtml-let photo=sequence-item>   <dtml-if sequence-start>
 
  <form action="manage_images" method="POST">   <table cellpadding="0" cellspacing="0" width="100%">   <tr class="list-header">   <td align="left">Del</td>   <td class="list-item" align="left"><div class="list-item">Image</div></td>
 
  <td class="list-item" align="left"><div class="list-item">Position</div></td>   <td class="list-item" align="left"><div class="list-item">Display size</div></td>   <td class="list-item" align="left"><div class="list-item">Zoom</div></td>
 
  <td class="list-item" align="left"><div class="list-item">Border</div></td>   <td class="list-item" align="left"><div class="list-item">Caption</div></td>   </tr>
 
  </dtml-if>
 
  <tr class="<dtml-if sequence-even>row-hilite<dtml-else>row-normal</dtml-if>">   <td>   <input type="checkbox" name="deletebox" value="<dtml-var title_or_id>">
 
  </td>   <td valign="top" align="left">   <a href="<dtml-var "photo.absolute_url()">"><dtml-var "photo.tag(display= tiny, alt=photo.getProperty(caption), css_class=None, style=margin: 2px;)"></a>   </td>   <td align="left"><dtml-var "photo.getProperty(placement)"></td>
 
  <td align="left"><dtml-var "photo.getProperty(display_size)"></td>   <td align="left"><dtml-var "photo.getProperty(zoom)"></td>   <td align="left"><dtml-var "photo.getProperty(border)"></td>   <td align="left"><dtml-var "photo.getProperty(caption)"></td>
 
  </tr>
 
  <dtml-if sequence-end>    </form>    </table>    &nbsp;&nbsp;&nbsp;<input type="submit" name="Delete" value="Delete">
   </form>   </dtml-if>   </dtml-let>   </dtml-in>   </dtml-let>   <dtml-var manage_page_footer>