Skip to main content
Image
osl-banner%20%288%29.jpg

How to use Media Entity Image in Drupal 8

article publisher

Hashik

Drupal

While writing my articles I want to concentrate on my content rather than wasting time on figuring out ways to insert interactive media. If you are a content editor or content manager you want to manage content with ease, because why do it the hard way? If you are using Drupal site, then you know that the Media module just fits. 

In Drupal 8 media handling is split into three parts.

  • Media Entity
  • Entity Embed
  • Entity Browser 

In my previous article 'What is Media Entity and why is it important in Drupal?', I talked about why they are split into 3 and how media handling was done with Drupal 7. And of course a gist of every module. 

Imagine media entity module as the wall power socket providing power to the 3 adapter modules. Use different adapters to charge different appliances.

Media Entity module just provides a base entity, if you want to embed a specific type of entity or media you have to install the parent modules. Having a hard time understanding this?

Imagine Media Entity as a wall power socket in your house and the provided modules as different adapters. You use one adapter to charge your laptop and a different one to charge your phone.

There are different provider modules each for image, audio, slideshow, document etc., given below is a list. 

In this article, we are going to install the Media Entity Image which is one of the provider modules for inserting images.

list of media providing modules
List of media providing modules

Installing and using Media Entity Image

  • Install Media Entity, and use Media Entity Image to add an image.
     
  • Install and enable Media Entity and Media Entity Image, use the following drush command in the terminal/ command prompt:

    drush en media_entity, media_entity_image -y
     
  • Create a functionality to store assets, 

    Go to Structure > Select Media Bundles.
     
  • If you are experiencing any issues with loading the page, rebuild cache using the following command if everything's fine ignore this.:

    drush cache-rebuild-y

Adding the asset

Adding the asset involves two things,

  1. Creating a bundle
     
  2. Creating a field for the bundle

Those steps may sound intimidating, quite easy to implement, just follow along.

Creating a bundle

Media bundles are essentially just content types, creating them is similar to creating content types.

Add media bundle option; installing media entity image module
Adding media bundle

Give the Label for the media bundle and description.

Select the Media Provider Module (as said above Media Entity uses these modules). Since we installed the image module we’ll see only the Image in the drop down.

Creating the field for the bundle

selecting the provider module
Selecting the provider module

The media bundle doesn’t store the Image file. We have to create an image field that stores the file. Fill the source information with the image field that holds the image file. Confusing?

It’s is just mapping, you are essentially informing the bundle that the image is located at a particular location that we are referring to using the image field. We will be creating the field.  But before that click on Save Media Bundle.

Create the field by clicking on Manage Fields > Click on Add field

clicking on manage fields in the operations
Selecting manage fields in the operations

Select type of the field, in our case it is an image. Now set the label to the image or whatever you want it to be and click Save and continue.

save and continue the label
Adding label as image

Select the file on your machine by clicking Choose File to select the image you want.

selecting and saving the field settings
Saving the field settings

Check required field in the next window, select other option you desire. They are self-explanatory with hints below them and click Save Settings.

Now that we created our field which holds our image it’s time to set it in the bundle.

Go to Structure > Media bundle > Edit > Set Field source information

set the information to the image if it isn't already then click on Save Media Bundle.

Go to Content > Media > Click Add media > Select Image.

selecting the media
Selecting the media in the content

Select the image by clicking on Browse and click Save and Publish.

add alt text and save and publish
Adding the fields and saving the settings

And…. It is published, yay!

final outcome; drupal logo on display
The final outcome on the display

Now you can add media in Drupal with ease, select from the myriad of media provider modules to insert the asset you wish to.
Man! Modules. Not sure what we all be doing without them, a big shout out to those all developers at Drupal.org.

Subscribe

Ready to start your digital transformation journey with us?

Related Blogs

SDC: Integrating Storybook & Single Directory Component

Integrating SDC With Storybook OpenSense Labs

Today, we will talk about about Drupal Single Directory Components or SDC and Storybook. Single Directory Components in Drupal allows you…

RFP: How To Create An RFP For Open Source Solutions?

RFP OpenSense Labs

A good Request for Proposals (RFP) or Call for Proposals (CFP) clearly states the goals and expectations of your project and sets the…

Drupal 7 End Of Life: Top Reasons You Should Migrate To Drupal 10

Drupal 7 End Of Life Cover Image OpenSense Labs

Drupal 10 was released in December 2022 and ever since, the community has been pushing its users to do Drupal 7 to 10 migration. As per…