cs-flickrgallery 1.5

A new addon for Plone

cs_flickrgallery

An addon for Plone to show photos from Flickr

Installation

Install cs_flickrgallery adding it to your project's dependencies.

Then go to the Plone's add-on controlpanel and install it from there.

Configuration

A new control panel will be added in the Plone's Site Setup, where you should configure the Flickr API Key and the username from which your images will be fetched.

This add-on createse a new behavior that you should apply to your content-types of choice (for example to pages).

When doing so, a new fieldset will be added to that content-type's edit page where you can set the Flickr set or collection that will be imported into Plone.

After setting all, a viewlet will show the status of the import process with the number of imported photos, and will allow refreshing the values.

This package provides a simple view called flickr_gallery_view that can be applied to all content-types implementing the behavior so the images are shown in the Plone template.

If you are applying the behavior in your project add-on, you can also apply the view using generic setup profile, as follows, in a {file}Document.xml (for example):

...
<property name="behaviors"
            purge="false"
  >
    ...
    <element value="cs_flickrgallery.flickr_gallery" />
  </property>
...
  <property name="view_methods" purge="false">
    ...
    <element value="flickr_gallery_view" />
    <element value="view" />
  </property>
...

Usage (Volto)

The behavior provides a read-only field called flickr_images with the list of all images.

This field can be retrieved using the @inherit endpoint of plone.restapi as follows:

GET /plone/document/@inherit?expand.inherit.behaviors=cs.flickrgallery.flickr_gallery HTTP/1.1
Accept: application/json

The response will include the image information and also the flickr set identification:

HTTP/1.1 200 OK
Content-Type: application/json

{
    "@id": "http://localhost:55001/plone/document/@inherit?expand.inherit.behaviors=plone.navigationroot",
    "cs.fklickrgallery.flickr_gallery": {
        "data": {
          "flickr_collection": null,
          "flickr_images": [
            {...},
            {...},
            {
              "srcset": "https://  75w, https:// 100w, https:// 200w", # perfect to render a img tag with srcset
              "sizes": [{'label': 'Square', 'width': 75}, ...],        # all image sizes with their attributes, sorted from smallest to largest
              "sizes_dict": {'Large': {'width': 75, ...}, ...},        # dict with all sizes, using size label as key
              "image_url": "",                                         # large photo url
              "thumb_url: "",                                          # mini photo url
              "link": "https://",                                      # photo's url in flickr
              "title": "Some Title",
              "description": "",
              "original_image_url": "https://",                        # original photo url
              "download_url": "https://",                              # download url
              "copyright": "",
              "portal_type": "_flickr",
              "keywords": "",
              "bodytext": ""
            },
          ],
          "flickr_set": 21564654151
        },
        "from": {
            "@id": "http://localhost:55001/plone",
            "title": "Plone site"
        }
    }
}

Usage (Classic)

It will be common that you want to show the images using a gallery script of your choice, to do so, you can call the utility method cs_flickrgallery.utils.get_images passing the context object where you have saved the collection id, and it will return a list with items representing the image.

Each of the images has the following structure:

    {
        'srcset': "https://  75w, https:// 100w, https:// 200w", # perfect to render a img tag with srcset
        'sizes': [{'label': 'Square', 'width': 75}, ...],        # all image sizes with their attributes, sorted from smallest to largest
        'sizes_dict': {'Large': {'width': 75, ...}, ...}         # dict with all sizes, using size label as key
        'image_url': "https://",                                 # large photo url
        'thumb_url': "https://",                                 # mini photo url
        'link': "https://",                                      # photo's url in flickr
        'title': "Some Title",
        'description': "",
        'original_image_url': "https://",                        # original photo url
        'download_url': "https://",                              # download url
        'copyright': '',
        'portal_type': '_flickr',
        'keywords': '',
        'bodytext': ''
    }

Contribute

• Issue tracker
• Source code
• Documentation

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• uv
• Make
• Git
• Docker (optional)

Installation 🔧

1. Clone this repository, then change your working directory.

   git clone [e-mail]:codesyntax/cs_flickrgallery.git
   cd cs_flickrgallery
   

2. Install this code base.

   make install
   

License

The project is licensed under GPLv2.

Parts of this project have been adapted from collective.ptg.flickr

Credits and acknowledgements 🙏

Generated using Cookieplone (0.9.7) and cookieplone-templates (ed4fa08) on 2025-06-04 13:23:09.646096. A special thanks to all contributors and supporters!