How to Display Flickr Images on Your Drupal 8 Site

The Drupal 8 “Flickr” module allows you to insert Flickr images or photosets (albums) on your site, without the need of keeping the images on your server. This has a couple of advantages (we won’t discuss the disadvantages in this tutorial):

• Less use of resources on your own server
• Improvements on the performance of the site
• You avoid copyright issues in your site, Flickr takes care of that
• Make use of thousands of Flickr images available under CC License.

The user (editor) types a shortcode in the text editor of the node and the Flickr module connects to the Flickr API, which retrieves the images from Flickr and sends them to your site.

This tutorial will explain how to install the Drupal 8 Flickr module and to configure Flickr API, to retrieve the images of one of your Flickr albums.

---

Step #1 – Install the module

If your site installation is not based on composer:

• download the module from its project page
• place it in the modules folder of your Drupal installation
• enable it in your Drupal backend

If your site installation is based on composer, type:

composer require drupal/flickr

• Click Extend
• Scroll down to the FLICKR section
• Check Flickr, Flickr API Integration
• Flickr Filter
• Click Install.

---

Step #2 – Configure the module

After enabling the modules,

• Open the Flickr API integration description
• Click The Configure link.

You will be prompted to get an API key, so click this link, in order to be redirected to Flickr.

• Read both info cards carefully.
• Request a non-commercial key (your screen should be in English).

• Give your application a proper name and description
• Check both checkboxes
• Click Submit.

Flickr creates a Secret and another key in order to integrate your site with the Flickr platform.

• Copy both keys and paste them on the Flickr configuration screen of your Drupal site under Configuration > Media > Flickr API Settings
• Click Save configuration.

---

Step #3 – Create a Media Editor Role

This person (or these persons) will have the special permission to embed Flickr images with a shortcode in the Drupal site.

• Click People > Roles > Add role.

• Add a proper role name
• Click Save.

---

Step #4 – Configure the Text Format for the Media Editor

• Click Configuration > Text formats and editors.

• Give the text format a proper name according to the role you created in Step #3
• Select the Media attendant role
• Select CKEditor from the dropdown list.

• Enable and rearrange the filters shown on the image
• Choose to display captions
• Leave the default image size (single image) by 75px
• Click Save configuration.

Your Text formats configuration screen looks like this:

---

Step #5 – Create a New User

• Click People > Add user
• Assign a user name and password
• Assign this user the Media attendant role
• Click Create new account.

---

Step #6 – Set permissions

• Click People > Roles
• Click the dropdown arrow beside Media attendant
• Select Edit permissions
• Check the following permissions:
  • Filter
    • Use the media attendant text format
  • Node
    • Article: Create new content
    • Article: Delete own content
    • Article: Edit own content
    • View published content
    • View own unpublished content
  • System
    • View the administration theme
    • Toolbar
    • Use the administration toolbar
• Click Save permissions
• Click Configuration > Performance > Cache rebuild.

---

Step # 7 – Create an Article with a Flickr Shortcode

Open a different browser and log in as the user you created in step # 5.

• Click Shortcuts on the administration toolbar
• Click Add content
• Give the node a proper title
• Select the Text format you created in Step # 4
• Write this shortcode into the editor:

[flickr-photo:id=9315513698]

• Make sure that the photo is open to the public and doesn’t have any view restrictions. You get the photo ID from its URL at Flickr.

• Finish the node and click Save.

Notice that you did not specify a size for the image, so it takes the default configuration of 75px. In order to set a specific size for the image, click the edit tab and change the shortcode like this:

[flickr-photo:id=9315513698, size=q]

The image will double its size to a 150px square.

• Click the Edit tab once again.

Instead of one photo, you’re going to display a whole album, so you need the album ID.

You get the ID of the album from its URL at Flickr.

• Edit the shortcode

[flickr-photoset:id=72157634694871388, size=n]

You can read more about image sizes in Flickr here. Notice that the sizes Slideshow and Basic Slideshow are not available for Drupal 8.

The Drupal 8 Flickr module allows you to embed single images and albums from Flickr in a Drupal 8 site.

Thanks for reading!