Drupal Upload Image as an Imge Clss

Content is significantly improved with embedded images. They can be used to explicate points or to liven up an otherwise boring-looking page that would take been a wall of text.

I previously talked specifically well-nigh SVG images and Drupal 9, but how about embedding other images?

Uploading images into content in previous versions of Drupal was a bit hitting and miss. It normally required the inclusion of a few modules to become things working and commonly meant having a very customised feel.

Since Drupal 8 and the inclusion of CKEditor into cadre it has been possible to embed images into content. When the Media module and subsequent Media Library modules became stable in Drupal 8.8 it was so possible to embed all types of media into content, not only images. Afterward the release of Drupal nine these modules take get a get-to solution for embedding images into content.

Since the image upload and media library approaches take slightly different pros and cons I thought I would await into each one.

Epitome Upload Button

If you have installed Drupal using the standard install contour (which is quite a common affair to do) then you volition already have the Image Upload feature installed. This is role of the CKEditor module in Drupal and the standard install contour will create a text format that volition permit you to utilize this directly away.

When you lot go to create some content on the site you lot will run across the CKEditor dialog with the Prototype button present in the tools at the top of the editor window.

Clicking on this image icon volition open up the CKEditor dialog for inserting images into the content.

When you have selected your epitome and clicked "Save" the dialog volition close and your prototype volition be visible in the content area.

Looking behind the scenes Drupal has actually washed a couple of things hither. It has uploaded your file to the web server and written a record to the database then that it can manage that file. It also keeps a record of where that file was uploaded to the arrangement, in this case an item of content, which allows for some simple content tracking.

Once the upload is complete Drupal will create some HTML that it will embed into your content expanse. This HTML will look a little similar the post-obit.

<p><img alt="The Drupal logo" data-entity-blazon="file" information-entity-uuid="bab46008-9adf-45fa-97a4-a555775ea1dc"  src="/sites/default/files/inline-images/drupal.png" width="256" meridian="256" loading="lazy" /></p>

There is also the selection to add a caption to the image, which adds a figcaption HTML element below the image. This is a good pick to have, but you need to make sure your theme supports information technology otherwise it volition not wait tidy with the image.

That'due south pretty much all there is to it for the image upload feature. Let'south look at the pros and cons of this approach.

Pros:

• Generates simple markup in your content pages.
• Drupal stores some usage information on where the image is embedded on the site
• Migration is simple equally the content directly references the images

Cons:

• Images tin can't easily be used across pages of content. In fact, the best solution to this is often to upload the image again when it is required on another item of content.
• No image styles are used to render the image and so you either need to ensure your site styles will cope with the image or but upload the epitome at the correct resolution.
• Drupal can report on usage information about the files, only since this is usually a one-to-one link between image and content item this isn't that useful.
• Image uploads aren't controlled by permissions. This means that if the page is unpublished then the image will however be available to view.

I should notation that some of these issues regarding permissions and file re-employ can be solved by using the Drupal IMCE module. This module has a driblet-in replacement for the file upload dialog in CKEditor that will let users to upload or select from the existing files on your site. IMCE does this by providing admission to the files directory from your web browser, only you can (and should!) add permissions and security to lock down how IMCE is configured.

Media Embed With The Media Library

The Media module comes bundled with Drupal and has been stable since version eight.6. Instead of managing files, you manage files stored in Drupal entities, which means that they tin be used and reused around the site as many times as yous like. Installing this module will let you to manage media, but it doesn't comprehend embedding media into content.

Since Drupal version 8.8 the Media Library module has been a stable part of core and this builds upon the Media module. This includes the ability to accept an authoritative interface for media and the use of an interface for selecting media for fields and text content. The media embed push is a combination of a flick and musical annotation, to signify that it provides more functionality.

Clicking on this button will present you with the media library user interface, which allows y'all to either upload or select existing images. The prototype below shows a dialog with the image upload field and an image that has already been uploaded.

Selecting the image you desire and clicking the "Insert selected" button volition embed your selected image into the content surface area.

At first glance, this appears to have done the aforementioned equally the prototype upload, but there is more going on backside the scenes. When you upload an image Drupal will create a Media entity, which is essentially a wrapper around the file yous uploaded. This wrapper tin can accept extra fields or other data associated with information technology, giving yous more flexibility than the standard file upload interface.

 Subsequently you click the insert button Drupal will create markup that looks like the following (although this will depend on the theme y'all are using).

<commodity class="align-middle media media--type-paradigm media--view-fashion-default">   <div information-quickedit-field-id="media/one/field_media_image/en/default"  class="field field--name-field-media-epitome field--type-image field--label-visually_hidden">     <div class="field__label visually-subconscious">Image</div>               <div grade="field__item">  <img src="https://world wide web.codeenigma.com/sites/default/files/styles/big/public/2021-09/drupal.png?itok=4E3362OO"  width="256" height="256" alt="The Drupal logo" loading="lazy" typeof="foaf:Image" class="image-mode-large" /> </div>           </div>   </article>          

This is not the whole picture though. If you lot wait at the raw source of the media item you volition see something that looks like this.

<drupal-media data-align="center" information-entity-type="media" data-entity-uuid="e5321fa9-8a61-49f2-b048-e7e2646f7a94"></drupal-media>

This is what Drupal stores in the content field in the database. When an particular of content is loaded Drupal will see this tag and swap it out for the media entity identified by the UUID. The media is then rendered using a view mode of the entity, which includes the epitome style that was selected for that view mode. Through the CKEditor admin interface, it is possible to ready a default view way for all embedded media or to permit the selection of the view mode as the media is embedded.

Your users will never encounter the drupal-media tag equally Drupal volition always replace them with the right markup.

The fact that a view fashion is used to control how the media is rendered means that it can be rendered in unlike means depending on the context it is being shown in. The markup surrounding the epitome can be changed past overriding the template used. The example markup above is from the Drupal default Bartik theme. The rendering process will as well pass through a preprocess claw and at that point, the view model can be changed for dissimilar contexts. Something not hands done with the image upload feature.

This approach does take some pros and cons, then let'south dig into those.

Pros:

• Images are centrally managed and tin be re-used on other items of content.
• An image can be changed through the media item, which will change that image in every place it was uploaded.
• Images are rendered using image styles to resize or otherwise tweak them.
• The surrounding markup that accompanies images is likewise themable via view modes and templates.
• Other types of media tin can be embedded using the same dialog, which allows for greater versatility in what content is embedded into the content.
• Media is governed past a separate set of permissions. This means that yous tin let certain user roles to upload images simply allow all users to embed images already existing on the site.
• Media can exist published and unpublished, so if their container page is unpublished they can also be unpublished to prevent access.

Cons

• For images that are only for a single page, the media item still ends up in the media library. This tin can create ataxia with single-utilise media items hanging around in the media library.
• Migration of images can be difficult due to the manner in which the images are embedded into the content. It'southward not impossible, information technology just requires some more in-depth agreement of how media is embedded into content areas.

Embedding images into content In Drupal nine - Determination

The power to embed images out of the box is a powerful feature for Drupal. If the default image upload doesn't fit your needs and so yous tin can go for the media library approach and expand how your site manages images. As Drupal media items are essentially fieldable entities they can accept information that tin alter how they are being used and embedded on your site. As their rendering is also controlled from their view manner it is also possible to create responsive images that adjust to the content they are present on.

It's a good thought to pick ane of these methods as having both upload options side past side volition likely crusade defoliation. Having upload features act in a consistent and predictable way makes for a better user experience.

Which type of embed you select depends on your needs. For a modest blogging site information technology'southward probably fine to go for the uncomplicated method as most of the images will probably be single utilize. For more complex publishing sites with lots of editors, you lot will probably want to go for the media embed every bit it will give you more than control over who embeds images and how they are rendered to the concluding page.

Using the media library also gives you the ability to embed other types of content in your pages. Y'all can therefore use that single dialog to allow users to embed images, documents or even references to external media like videos and sound content.

I should also mention hither that in that location are a couple of contributed modules that also allow images to be embedded in the content. Most notable is the Entity Embed module, although this module requires a lot more setup to get working. Whereas you lot can get going with the media library in a few clicks, I take spent hours working with entity embed to go the correct workflow I wanted.

Or

An alternative approach to uploading and embedding media into your site is to utilise a Digital Nugget Management (DAM) system. This involves uploading your images to a DAM site (sometimes separately from your content) and and so allowing your content creators to pull in the imagery they want. This can give you tighter control over the images that make their way to your site, but it depends on the product selected to human activity as the DAM. Several DAM products exist, just non all of them accept integrations with Drupal, so if you are looking to select a DAM you need to be sure that either Drupal is supported, or you are able to develop a custom integration module.

Allow'due south outset your Drupal project together

Contact united states

castlemanwittentiou.blogspot.com

Source: https://www.codeenigma.com/blog/embedding-images-into-content-in-drupal-9

Share this post