Images on this site

For this site every blog post has an image field. The image uploaded is reused for the thumbnail, hero and social sharing. In this blog post I will go through all the steps for you to achieve the same.

Install and enable these module

• Media
• Media library
• Crop API
• Image Widget Crop
• Metatag
• Metatag: Open Graph

Creating an image field

First we need to create a field that contains the image we want to use. For this example I will use the Blog content type I’ve already created.

• Navigate to Structure > Content Types > Blog > Manage fields
• Click +Add field
• Below Add a new field select Reference > Media
• Fill in a label such as Image
• Click Save and continue
• Leave the field settings as is and click on Save field settings
• Below Reference type select Image
• Click Save settings
• We only want to show this image with a view so click on the Manage display tab
• Drag the newly created Image field below Disabled
• Click Save

Creating different image styles

These image styles can be used to display the same image in different dimensions.

• Navigate to Configuration > Media > Image styles
• Next to Thumbnail (100x100) click on Edit
• Next to Scale 100×100 click on Edit
• Fill in the Width and Height you want to use for your thumbnails. I will use 450 for the width and 300 for the height giving it a 3:2 aspect ratio
• Click Update effect
• Remove the (100x100) notation from the image style name for better clarity
• Click Save
• Next we’re going to create another image style for displaying the image in a (big) hero format. Navigate to Configuration > Media > Image styles
• Click + Add image style
• Fill in a Image style name like Hero
• Below Effect select Scale and Crop
• Fill in the Width and Height you want the hero image to be displayed in. I will use 1920 for the width and 720 for the height giving the image a 16:9 aspect ratio
• Click Add effect
• Click Save
• Next we’re going to create another image style for displaying the image on social sharing sites. Navigate to Configuration > Media > Image styles
• Click + Add image style
• Fill in a Image style name like Social
• Below Effect select Scale and Crop
• The ideal dimensions for a social sharing image are 1200 pixels for the width and 628 pixels for the height
• Click Add effect
• Click Save

Creating cropping styles

To make sure the image is displayed correctly for every image style we need to create different cropping styles. With the cropping tool you can determine what part of the image will be shown. This is necessary because we have image styles with different aspect ratios.

• First we will create a crop type for the thumbnails. Navigate to Configuration > Media > Crop types
• Click + Add crop type
• Fill in the name for your crop type. I like to name them after their aspect ratio so I will use 3:2
• Set the aspect ratio to 3:2 
• Use the same dimensions for your thumbnail image style for the Hard limit. In this example the width will be 450 pixels and the height will be 300 pixels. This prevents selecting an area smaller than the image style dimensions.
• Click Save crop type
• Next we will create a crop type for our hero images. 
• Click + Add crop type
• Fill in the name for your crop type. As my Hero image style has an aspect ratio of 16:9 so I will use this as the name for this crop type.
• Set the aspect ratio to 16:9 
• Use the same dimensions for your hero image style for the Hard limit. In this example the width will be 1920 pixels and the height will be 720 pixels.
• Click Save crop type
• Next we will create a crop type for our image that we want to share on social media. 
• Click + Add crop type
• Fill in the name for your crop type. As my Social image style has an aspect ratio of 300:157 so I will use this as the name for this crop type.
• Set the aspect ratio to 300:157 
• Use the same dimensions for your hero image style for the Hard limit. In this example the width will be 1200 pixels and the height will be 628 pixels
• Click Save crop type

Adding crop styles to the image styles

To ensure the crop style is enforced with the correct image style we need to add them as an effect.

• Navigate to Configuration > Media > Image styles
• Click Edit next to Thumbnail
• Click on Select new effect and select Manual crop
• Click Add
• Select 3:2
• Click Add effect
• Click Save
• Navigate to Configuration > Media > Image styles
• Click Edit next to Hero
• Click on Select new effect and select Manual crop
• Click Add
• Select 16:9
• Click Add effect
• Click Save
• Navigate to Configuration > Media > Image styles
• Click Edit next to Social
• Click on Select new effect and select Manual crop
• Click Add
• Select 300:157
• Click Add effect
• Click Save

Enabling crop styles on the Image media type

When we upload an image we want to be able to crop them for the different image styles.

• Navigate to Structure > Media types > Image > Manage form display
• Under Widget next to Image select ImageWidget crop
• Click on the gear on the right side to open the settings
• Under Crop type select all thee crop types (Hero, Thumbnail, Social)
• Click Update
• Click Save

When you want to upload an image to a blogpost and correctly crop them you have two ways of accomplishing this:

1. Upload the image under Content > Media > + Add media. Select image and upload a file in the image field. As the upload is completed an extra set of Crop tabs will appear. You can now crop the image for the three different image styles and save the image. Next you can create or edit a blog post and click Add media in the image field we’ve created above. Select the image you’ve uploaded and cropped in the previous step. 
2. You can also follow through this process the other way around. Meaning you will first create or edit a blog post and add media to the image field and upload an image directly while editing the blog. After saving the blog post you can still adjust the crop styles by navigating to Content > Media and edit (crop) the uploaded image.

Creating a blog overview with Thumbnail

Next we will create a blog overview with thumbnails showing the five most recent blogs. 

• Navigate to Structure > Views
• Click + Add view
• Enter a View name such as Blogs
• Under View settings set of type to Blogs
• Check Create a block
• Fill in a Block title such as Latest blogs
• Click on Save and edit
• Next to Fields click on add
• Under Search fill in image
• Select the Image field
• Click on Add and configure fields
• Under Formatter select Thumbnail
• Under Image style select Thumbnail
• Under Link image to select Content
• Click Apply
• Click Save

As you can already see in the preview you now have a view which shows the titles and images of the blogs. You can now place this block wherever you like navigating to Structure > Block layout

Creating a hero image for the blog nodes

We also want to show the same image as a big hero image above each blog.

• Navigate to Structure > Views
• Click + Add view
• Enter a View name such as Hero
• Check Create a block
• Leave the Block title blank
• Set Items per block to 1
• Click Save and edit
• Click on Content: Title below Fields
• Click on Remove
• Next to Fields click on Add
• Under Search fill in image
• Select the Image field
• Click on Add and configure fields
• Under Formatter select Thumbnail (this can be a bit confusing)
• Under Image style select Hero
• Click Apply
• We only want to show the Hero image of the node that is being viewed. So click open the Advanced tab on the right hand side
• Next to Contextual filter click on Add
• Search for id
• Select ID in the Content category
• Click on Add and configure contextual filters
• Below When the filter is not available select Provide a default value
• Below Type select Content ID from URL
• Click Apply
• Click Save

Next we want to show this block on every node of the type Blog.

• Navigate to Structure > Block layout
• Next to Content click on Place block
• Filter on hero
• Next to the Hero block click on Place block
• Uncheck Display title
• Click on the Content types tab
• Check Blog
• Click on Save block
• Drag the hero block above the Main page content block
• Click on Save blocks

Configure how this image is used for social sharing

Social media sites such as Twitter, Linkedin and Facebook use a metatag to determine what image will be shown when a page of your Drupal website is shared. With the help of the Metatag module we can point social sharing sites in the right direction.

• First we need to create a display setting that renders the image with the correct Social image style. Navigate to Structure > Display modes > View modes > Manage display
• Below Media click on Add new Media view mode
• Fill in a name for this View mode. I will use Social to keep things clear.
• Navigate to Structure > Media Types
• Click on Edit next to Image
• Click on the Manage display tab
• Open the Custom display settings field set
• Check Social
• Click on Save
• Click on Social
• Click on the gear icon on the right side next to the image field
• Select Social under Image style
• Click on Update
• Click Save
• Navigate to Configuration > Metatag
• Click on Edit next to Content
• Click open the Open Graph field set
• Below Image fill in the following token: [node:field_image:entity:field_media_image:social:url] (shoutout to Mark for figuring out the token)
• Click Save

Creating a blog post

When you create a blog post, and upload an image to the image field, this image will be used in the blog overview, as a hero image and correctly shown on social media sites.

Do you have any questions about this tutorial? Please let me know by leaving a comment. Also don't forget to subscribe to my Drupal newsletter!