Dexterity Images in listing view

I have a Plone 5 Dexterity content type (called a "suite") and I am trying to create a listing view that includes a image that is part of the "suite". If I do the following, I get the expected thumbnail of the image:

<tal:block repeat="suite view/suites">
    <img src="" 
         tal:attributes="src string:${suite/getURL}/@@images/imageDetail/thumb;" />
</tal:block>

Of course this doesn't include the image's dimensions, so I try to replace it with the full image tag HTML via:

<img tal:replace="structure suite/@@images/imageDetail/thumb" />

which leads to an error. How should I be doing this?

Traceback (innermost last):
Module ZPublisher.Publish, line 138, in publish
Module ZPublisher.mapply, line 77, in mapply
Module ZPublisher.Publish, line 48, in call_object
Module Products.Five.browser.metaconfigure, line 485, in __call__
Module Products.Five.browser.pagetemplatefile, line 125, in __call__
Module Products.Five.browser.pagetemplatefile, line 59, in __call__
Module zope.pagetemplate.pagetemplate, line 132, in pt_render
Module five.pt.engine, line 93, in __call__
Module z3c.pt.pagetemplate, line 163, in render
Module chameleon.zpt.template, line 258, in render
Module chameleon.template, line 191, in render
Module chameleon.template, line 171, in render
Module 1d108f7b82d1106b4e48969ae07cda33.py, line 559, in render
Module 0e95e50ff9444dfc8478ce0644037824.py, line 1223, in render_master
Module 0e95e50ff9444dfc8478ce0644037824.py, line 458, in render_content
Module 1d108f7b82d1106b4e48969ae07cda33.py, line 547, in __fill_main
Module 1d108f7b82d1106b4e48969ae07cda33.py, line 406, in render_main
Module five.pt.expressions, line 154, in __call__
Module five.pt.expressions, line 126, in traverse
Module zope.traversing.adapters, line 126, in traversePathElement
__traceback_info__: (<Products.ZCatalog.Catalog.mybrains object at 0x7fdc7759b460>, '@@images')
Module zope.traversing.namespace, line 112, in namespaceLookup
Module Products.CMFPlone.patches.security, line 12, in traverse
Module zope.traversing.namespace, line 329, in traverse
LocationError: (<Products.ZCatalog.Catalog.mybrains object at 0x7fdc7759b460>, 'images')
 - Expression: "suite/@@images/imageDetail/thumb"
 - Filename:   ... esigner/src/handcraft/designer/templates/designerview.pt
 - Location:   (line 37: col 45)
 - Source:     ... ce="structure suite/@@images/imageDetail/thumb" />
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 - Arguments:  repeat: {...} (0)
           template: <ViewPageTemplateFile - at 0x7fdc74d94d10>
           views: <ViewMapper - at 0x7fdc6ae62e90>
           modules: <instance - at 0x7fdc82a89710>
           args: <tuple - at 0x7fdc8986b050>
           here: <ImplicitAcquisitionWrapper tintin at 0x7fdc75e62aa0>
           user: <ImplicitAcquisitionWrapper - at 0x7fdc75e5b690>
           nothing: <NoneType - at 0x91a870>
           container: <ImplicitAcquisitionWrapper tintin at 0x7fdc75e62aa0>
           request: <instance - at 0x7fdc7615c4d0>
           wrapped_repeat: <SafeMapping - at 0x7fdc6af91d60>
           traverse_subpath: <list - at 0x7fdc6aeb3200>
           default: <object - at 0x7fdc89788500>
           loop: {...} (1)
           context: <ImplicitAcquisitionWrapper tintin at 0x7fdc75e62aa0>
           view: <SimpleViewClass from /home/leejoramo/Plone/zeocluster/src/handcraft.designer/src/handcraft/designer/templates/designerview.pt view at 0x7fdc6ae622d0>
           translate: <function translate at 0x7fdc6b567668>
           root: <ImplicitAcquisitionWrapper Zope at 0x7fdc75ce7500>
           options: {...} (0)
           target_language: <NoneType - at 0x91a870>

It seems that one of your suite items has imageDetail field empty. In this case, "empty imageDetail" is NoneType, that brings up the error. You might try this:

<img src="" alt=""
 tal:condition="suite/imageDetail|nothing"
 tal:define="scales suite/@@images;
             scale python:scales.scale('imageDetail', 'thumb')"
 tal:replace="structure python:scale and scale.tag(css_class='myImage') or None" />

Hope this helpful.

1 Like

In your case suite is a catalog brain which can not be traversed. You need to fetch the object itself first:

<img 
  tal:define="suite_obj suite/getObject" 
  tal:replace="structure suite_obj/@@images/imageDetail/thumb" 
/>

Further reading: https://pypi.python.org/pypi/plone.app.imaging

In any case: you need the content object itself as context, a catalog brain does not work.

1 Like

Thank you @jensens and @marr, I did need to fetch the object via suite/getObject. Also thanks for the link to the plone.app.imaging documentation. I had been searching for this, but I think I was too focused on including 'dexterity' in my searches to find the docs I needed.