Flickr Element
The Flickr Element shows photos from Flickr as a grid on your page: either the latest photos of a Flickr account (its photostream) or the photos of one album. The images are loaded from Flickr, so new uploads appear on your site without any extra work.
You choose how many photos are shown, the number of columns and the spacing between them, crop them to one aspect ratio, add a hover effect, and link each photo to a lightbox or to its page on Flickr. It suits photographers, events and projects that already publish their pictures on Flickr.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Flickr Element
Add the Flickr Element to a column. Enter your own API Key from the Flickr App Garden or keep the default one, and enter your Flickr ID. Under Type choose Photostream for your latest photos, or Album and enter the Album ID, the numeric last part of the album address. Set the Number Of Images.
Use Images Aspect Ratio to crop all photos to the same shape; Custom Aspect Ratio appears when you choose Custom. Pick a Hover Type, then decide with Image Link whether a click opens the photo in a lightbox or on Flickr. Image Link Target only applies to links to the Flickr page. On the Design tab set the Number Of Columns, Column Spacing and Margin.
The photos are fetched from Flickr in the visitor’s browser when the page loads. Lazy loading follows the lazy load setting in Global Options.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| API Key | Use default API key or get your own from Flickr APP Garden. |
| Flickr ID | Enter your Flickr ID to display your own feed. Get your flickr ID. |
| Type | Select your flickr feed type. |
| Album ID | Enter your Flickr Album ID. The album ID is the last, numerical part of your album URL. |
| Number Of Images | Choose the number of images you want to display. |
| Images Aspect Ratio | Select the aspect ratio of the images. Images will be cropped. |
| Custom Aspect Ratio | Set a custom aspect ratio for the images. |
| Hover Type | Select the hover effect type. |
| Image Link | Choose where the image should link to. |
| Image Link Target | Controls how the link will open. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Number Of Columns | Select the number of columns to display. |
| Column Spacing | Choose the spacing between columns. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Always enter your own Flickr ID. The field comes with an example account filled in, so without your ID the element shows someone else’s photos.
- Your own API Key is more reliable than the default key, which is shared by many sites.
- Only public photos can be shown. Private photos and private albums stay hidden.
- Choose an Images Aspect Ratio such as 1:1 for an even grid when your photos have mixed orientations.
- Loading the photos connects the visitor’s browser to Flickr. Mention this in your privacy policy.