Adding a "news item" style thumbnail image to a Dexterity content type

Question

I'm working on a listing page for a custom Dexterity content type, and I'd like to pull one of the images to display in the listing, kind of how a listing page for a folder full of news items shows the thumbnails alongside the title and description (i.e. folder_summary_view).

What's the best way to go about this? I tried customizing the folder_summary_view template to change the thumbnail code to look instead for 'item_object/thumbnail' however it returns an error because it's a blob image or something:

<a href="#" tal:condition="exists:item_object/thumbnail" tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
<img src="" alt="" tal:replace="structure python: path('nocall:item_object/thumbnail')(scale='original', css_class='tileImage')" />
</a>

Returns:

    Module Products.PageTemplates.ZRPythonExpr, line 48, in __call__
    __traceback_info__: path('nocall:item_object/thumbnail')(scale='original', css_class='tileImage')
    Module PythonExpr, line 1, in <expression>

TypeError: 'NamedBlobImage' object is not callable

I guess I'd also be interested in finding out how to call any of the other fields. It pulls the title and description automatically. Is there an easy way to call moar fields? i.e. if there's a text field called: developer_name — how would I display that after Title in the folder summary view?

I saw this question in case that helps, but it seemed to be more related to migration and not displaying content.

Thanks also for pointing to the refering quest with Martijn P's answer, which is as usual comprehensive, complete and explaining it down to the ground. — Ida, Mar 29 '14 at 07:02
Great answers to this question! I wanted to add that plone.app.contenttypes, which provides the base content types for Plone 5, has a "LeadImage" behavior that allows any Dexterity content type to have a lead image like news items. Implementation details at https://github.com/plone/plone.app.contenttypes/blob/master/plone/app/contenttypes/behaviors/leadimage.py — SteveM, Mar 29 '14 at 15:14

Ida · Accepted Answer · 2014-03-29T06:56:43.133

The folder_summary_view still needs to be updated for Plone's default news item, like this (works with both; Plone's default Archetype- and Dexterity-newsitem):

            <a href="#"
               tal:condition="exists:item_object/@@images/image"
               tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
                <img src="" alt=""
                     tal:replace="structure item_object/@@images/image/mini" />
            </a>

Where 'image' is the fieldname, in case yours differs.

See plone.app.imaging's README for complete reference.

I hope to find some time soon, to commit this, unless someone else is heading to do it ;)

Note: I think I remember it's not recommended to use python:test() though, maybe that part should be adjusted, too.

For generally rendering your field, you can use good ol':

    <div tal:content="structure context/developer_name" />

Tested with a TTW-created Dexterity-CT and a text-field.

See also (with a grokked example): http://developer.plone.org/reference_manuals/external/plone.app.dexterity/custom-views.html#simple-views

You are very welcome, thanks to you for putting video-impressions of the Emerald-sprint online, so people can see how cool it is to be part of the Plone-world :) I hope you can get arbitrary fieldnames, too, now. BTW, Hector's answer is basically a long-form-notation (in case you tested: did it work with Dex?), see also doc of p.a.imaging. — Ida, Mar 29 '14 at 06:54

score 1 · Answer 2 · answered Mar 28 '14 at 22:22

if you look closely to the folder_summary_view template you will find that all you need to do is adding some helper methods to you class:

<a href="#"
   tal:condition="exists:item_object/image_thumb"
   tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
    <img src="" alt=""
         tal:replace="structure python: path('nocall:item_object/tag')(scale='thumb', css_class='tileImage')" />
</a>

we did something similar in collective.nitf by creating a getImage, imageCaption, tag and image_thumb functions (you probably won't need them all).

also, note the image attribute that will map the getImage function.

class NITF(Container):
    implements(INITF)
    ...    
    # The purpose of these methods is to emulate those on News Item
    def getImage(self):
        """Return the first Image inside the News Article."""
        content_filter = {'portal_type': 'Image'}
        images = self.listFolderContents(content_filter)
        return images[0] if len(images) > 0 else None

    image = getImage # XXX: a hack to support summary_view

    def imageCaption(self):
        image = self.getImage()
        if image is not None:
            return image.Description()

    def tag(self, **kwargs):
        # tag original implementation returns object title in both, alt and
        # title attributes
        image = self.getImage()
        if image is not None:
            scales = image.restrictedTraverse('@@images')
            if 'scale' in kwargs:
                scale_id = kwargs.get('scale')
                del kwargs['scale']
            else:
                scale_id = 'thumb'
            kwargs['alt'] = image.Description()
            kwargs['title'] = image.Title()
            scale = scales.scale(fieldname='image', scale=scale_id)
            return scale.tag(**kwargs)

    def image_thumb(self):
        """Return a thumbnail."""
        image = self.getImage()
        if image is not None:
            view = image.unrestrictedTraverse('@@images')
            # Return the data
            return view.scale(fieldname='image', scale='thumb').data

take a look at that code.

Adding a "news item" style thumbnail image to a Dexterity content type

2 Answers2