Creating beautiful photo galleries in Drupal 8 with Views

If beauty is able to save the world, just imagine what it can do to your website! Beautiful photo galleries could be part of your plan for saving the world — but let’s start with conquering your website users’ hearts. And it is especially easy to do with the amazing, feature-rich, editor-friendly Drupal 8, which facilitates content presentation. It offers many ways to create a photo gallery, and we will today describe the basic one: via Views. 

The Views module, Drupal’s fabulous invention for arranging collections of content, is finally part of Drupal in its eighth version, though it has always been its heart and soul. Today, we will unveil a tiny part of Views capabilities and use it for creating a simple photo gallery from scratch. Our example will feature a gallery of beautiful cities, which we will put on the front page.

Drupal 8 photo gallery with Views: a step-by-step guide

1. Creating a content type for cities

First of all, in Structure — Content types — Add content type (admin/structure/types/add), we will create a content type and call it “City”. We uncheck the “Promoted to front page” in the “Publishing options” tab, as well as the “Display author and date information” in the “Display settings” tab.

After clicking “Save and manage fields”, we need to add the most important field for our content type — an image field. Click “Add field” and select “Image” from the selection of fields and name it “Image for city”.

The next two steps will offer you to make more settings related to your image format (minimum and maximum image height and width, etc.). You could choose to skip them and click “Save and continue” for both.

To trim the display, it is also necessary to set the field’s label to “hidden” in admin/structure/types/manage/city/display, so that users can never see the phrase “Image for city” (if you do not wish them to).

2. Adding city photos

We are now going to Content — Add content — City (node/add/city) and adding cities one by one. Enter their title, add photo by clicking “choose file”, and provide an alternate text for the image so screen readers and search engines know what it is about. Let’s add 9 items for the future grid of 3x3 photos.

3. Creating image styles

We will take care that our photos are sized in the same way and this size meets your ideas. For this purpose, Drupal 8 lets you create specific image styles. 

We will create two styles: 

• one, larger, for each particular photo when a user clicks on it;
• the other, smaller, for photo teasers in the gallery.

To do this, we go to Configuration — Media — Image styles (admin/config/media/image-styles), create our image styles in turn and give them names. In our case, the styles can be named “Image style for city” and “Image style for city gallery”. When creating each style, we click “Create a new effect”, choose “Scale and crop”, and click “Add”. After setting the desired height and width for photos, we save the effect by clicking “Update effect” and then “Update style”.

You will be able to come back here and change the style whenever you wish, and the gallery design will be updated. It’s just the power of Drupal 8!

The smaller image style for the gallery will be used very soon, in step 4. The larger can be applied right now. Go to Structure — Content types — City — Manage display (admin/structure/types/manage/city/display) and set the “Image style for city” for your “Image for city” field.

4. Creating the gallery view

The most important moment is coming closer. We will go to Structure — Views — Add new view (admin/structure/views/add) create a view. Let’s set “View name” as “Beautiful cities”. In “View settings”, we will choose “Show content” of “City” type. 

Then we see two options: “Create a page” and “Create a block”. We want to put our gallery as a block on the front page, so we choose “Create a block’. By choosing “Create a page”, we would have a separate page for it. Everything depends on your preferences!

Next, set the display format to “grid” of “fields”, and the number of items per block to 9. You could choose any other number, as well as check “use a pager”, if you have more items than one page will show.

Save the settings and you will see your view:

We have chosen the format as “grid of fields”, which means our views will show a set of fields. In the left column, we see that there is for now just the default field “Content: Title”. Let’s add our “Image for city” field by clicking “add” next to the “Fields”. You can find the desired field in the list that will pop out (use the search function for your convenience):

In the configuration window for this field, set its image style as “Image style for city gallery” (the one we have created previously). In addition, choosing to “link image to content” will make your photos (not only their titles) clickable.

Click on “Grid settings”, set the number of columns to 3, and you will have a nice structure of 3x3 photos in the gallery. You can experiment with this by changing the amount of columns.

The preview (right below on the view page) already shows us our gallery. However, the block is not yet displayed anywhere on the site. Let’s put it on the front page of the Drupal 8 site.

5. Placing the block on your Drupal 8 site’s front page

Go to Structure — Block layout (admin/structure/block), check the list of site’s regions, choose the “Content” block, and click “Place block” next to it. You will see a list of blocks, in which you need to find the newly created “Beautiful cities” block. Use the search function for more convenience. Found? Click “Place block”. You will see a configuration window for your block. On the “Pages” tab, type <front>, and the block will appear on the front page of your site. 

Congrats, you now have a beautiful photo gallery on the main page! 

The image layout on the front page will be a little different from the preview. This is how the particular Drupal 8 theme works to fit the block into the overall design perfectly. In our example, we are using a responsive Drupal 8 theme — Bootstrap.

You can experiment with the image style (remember, admin/config/media/image-styles) and see how the layout changes. Smaller resolution will create nice spaces between the photos. Let’s try this now, and also add another change — reverse the order of the photos. This can be done in the “Sorting criteria”, in left bottom corner of the view settings (change from the default “sort by descending” to “sort by ascending”). Do not forget to save the view after the changes:

These are just very basic settings to play with. Endless opportunities for formatting and styling are available in your photo gallery view. 

A couple of CSS tweaks will make it look exactly as you wish, including spaces, fonts, styles, frames, and more. 

In addition, you can create impressive slideshows, carousels, and overlays using additional Drupal 8 modules. Among the most trending ones are Colorbox and Slick Carousel. However, each of these topics deserves a special overview. 

Everything is possible with Drupal 8. Our team will prove it! Contact us to make your Drupal 8 site absolutely irresistible — with custom photo galleries and anything else you can think of!