Customizing Presentation

Customizing Presentation#

The cs_flickrgallery package securely synchronizes photo data from the Flickr API directly into Plone annotations. By design, the add-on attempts to decouple the display from the data fetching logic.

Classic UI Integration#

Out-of-the-box, the package registers a default view called flickr_gallery_view for any content type that implements the IFlickrGalleryMarker behavior.

If the default template does not match your site's aesthetic, you can easily override it using z3c.jbot.

  1. Create a browser/overrides directory inside your policy or theme package.

  2. Create a file named cs_flickrgallery.views.flickr_gallery_view.pt.

  3. Add your custom HTML/TAL structure.

You can access the synchronized images directly using the flickr_images attribute of the behavior adapter:

<tal:block tal:define="gallery nocall:context/@@flickr_gallery_view">
    <div class="my-custom-gallery" tal:repeat="image gallery/flickr_images">
        <img tal:attributes="src image/image_url; alt image/title" />
    </div>
</tal:block>

Volto Integration#

For Volto, the presentation is entirely delegated to your frontend developers. The add-on deliberately avoids shipping a built-in Volto Block to give you total control over the design system (e.g., using masonry grids, lightboxes, carousels, etc.).

When you request a content object from the Plone REST API that has the IFlickrGallery behavior enabled, the API automatically serializes the flickr_images JSON field:

{
  "@id": "http://localhost:8080/Plone/my-gallery",
  "@type": "Document",
  "title": "My Gallery",
  "flickr_set": "123456789",
  "flickr_images": [
    {
      "title": "My Photo Title",
      "image_url": "https://farm1.static.flickr.com/456/123_abc_b.jpg",
      "thumb_url": "https://farm1.static.flickr.com/456/123_abc_s.jpg",
      "link": "https://www.flickr.com/photos/user/123/sizes/o/",
      "sizes": ["..."],
      "srcset": "..."
    }
  ]
}

In your custom Volto View or Block component, simply access content.flickr_images from the Redux state or props, and map over the array to render your preferred React image components.

Contents