58bits - How to Add Captions to Images in Drupal (2024)

Here's a recipe for adding (andformatting) captions to images in Drupalusing Entity View Modes, File Entity, and Media 2.0

Design Goals

The objective is to allow a user to upload or select an image using the Media module, as well as choose a layout for the image. The media embed tags (non-HTML) placed into the body of the node/post will then be filtered by the media module, resulting in markup containing an image,surroundedby div elements with appropriate classattributesfor position and styling. jQuery, or client-side JavaScript will not be required, and there will be a dedicated caption field. No other specialised'captioning' or image modules will be required.

Requirements

You'll need all three of the above modules at their latest releases: Entity View Modes, File Entity, and Media 2.0

Setup

First we'll configure Entity View Modes - enter the configuration UI from either the Modules administration page, or from Configuration -> System -> Entity View Modes. We're going to create two new File View modes, so under the File View Mode section - click 'Add new view mode' and create a view namedStory Image Left andStory Image Right. Enable both view modes for just the 'Image' file type. The file section of Entity View modes should now look like this...

58bits - How to Add Captions to Images in Drupal (1)

Now we'll configure a story image style. The assumption we're making here is that these images (one or more) are going to appear in a story, or article, and that they will follow a house style for the publication. In this case we're going to say that all of our embedded story images will have a maximum width of 400px. Let's go to the Image Style configuration UI, Configuration -> Media -> Image Styles and create a 'story' image style, with a Scale effect - which will look like this...

58bits - How to Add Captions to Images in Drupal (2)

Okay - we've laid the ground work. Now we'll switch over to the File Entity admin UI and add our Caption field to the Image file type. Let's go to Structure -> File Types, and edit the Image file type. Add the caption field and choose Text and Text field for the field and widget types. Your image type field display should look like this...

58bits - How to Add Captions to Images in Drupal (3)

Now let's configure the display settings for our Image file type. On the 'Manage Display' tab, you'll see your two new custom file entity views - Story Image Left and Story Image Right. Configure them both as follows:

58bits - How to Add Captions to Images in Drupal (4)

Now let's move over to the Manage file display tab and again, configure both Story Image Left and Story Image Right as follows (be sure to select just the Image type, as well as choose the 'story' image style we created earlier):

58bits - How to Add Captions to Images in Drupal (5)

For the image 'embedding' part of this recipe - we should be just about ready to go - with one caveat. You'll need to be sure that the Media browser icon is available to the WYSIWYG editor in use. I'm using the WYSIWYGDrupal module, and I've added the Media browser icon to my Filtered HTML content profile - which is currently set to use CKEditor 3.6.5.7647 (I'm not sure that the WYSIWYG module supports v4 of the CKEditor yet - hence 3.6.5.7647). We're ready to create our story.

Make It So...

Create a new content item (Basic Page or whatever), place some text in the body of your post - enough text so that we can see how we can force the image to align either right, or left along with a caption below the image. Then click on the Media browser icon and upload (or choose) an image. If you're uploading an image for the first time - you'll have a chance to fill in the Caption field. Otherwise you can add the caption before you embed the image using the Content -> File UI. Assuming you've got an image, with a populated caption field, go ahead and click on the Media browser icon, choose your image, and most importantly - just before you embed it - set the current format of the embedded image to either the Story Image Left, or Story Image Right view mode. The screen below will appear as the second step in the embedprocess.

58bits - How to Add Captions to Images in Drupal (6)

And we're done - we'll, almost. What we need now is a little CSS magic to align the image and format the caption. In the editor window, the Media browser will have placed a media embed tag into the body of your content that will look something like this

1[{"fid":"15","view_mode":"story_image_left","type":"media","attributes":{"height":"267","width":"400","alt":"Cooking","title":"More Cooking","class":"media-element file-story-image-left"}}]

When the post or page is viewed from a client browser - the tags above will be replaced with something like this:

1<div class="media media-element-container media-story_image_left"><img alt="Cooking" class="media-element file-story-image-left" height="267" src="/sites/default/files/styles/story/public/DSC00266.jpg?itok=675XxS2z" style="line-height: 1.5;" title="More Cooking" typeof="foaf:Image" width="400" />

2<div class="field field-name-field-caption field-type-text field-label-hidden">

3<div class="field-items">

4<div class="field-item even">An example of how a caption can be added using the new File Entity type.</div>

The important thing to note here, is that as of the latest release of the Media module, a CSS class attribute will be placed in the surrounding div, indicating which view mode we have chosen. This gives us the ability to style both the image and caption to our liking. For example, for the Story Image Left (which - if you'll remember, is following a house style of 400px width) I've used the following CSS:

1.media-story_image_left, .media-story_image_right {

2 width: 410px;

3 margin-bottom: 2px;

4}

5.media-story_image_left { float: left; }

6.media-story_image_right { float: right; }

7.media-story_image_left .field-name-field-caption, .media-story_image_right .field-name-field-caption {

8 font-size: 12px;

9}

10.media-story_image_right .field-name-field-caption {

11 margin-left: 10px;

12}

13.file-story-image-left {

14 float: left;

15 margin-top: 5px;

16 margin-right: 10px;

17}

18.file-story-image-right {

19 float: right;

20 margin-top: 5px;

21 margin-left: 10px;

22}

The Big Reveal

The result of all of the above? Well it should look something like this...

58bits - How to Add Captions to Images in Drupal (7)

For module developers, there is also a hook in the Media module that will let you decide which elements you'd like to use tosurroundthe image and caption hook_media_token_to_markup_alter. And of course there are other strategies and modules for captioning images in Drupal - although few that let site builders decide for themselves how captioned images should be implemented. There is also a philosophical choice about where you think the caption data (and other data for your files) belongs, and whether you want to hand this over to Drupal fields, or keep the caption in the content of your post using some other WYSIWYG plugin, or insertion module, but I think the method above is okay. Would be interested to know what other Drupalers out there think, and hope that some of what's here is helpful in general.

58bits - How to Add Captions to Images in Drupal (2024)

FAQs

How do you add captions to photos easily? ›

Use Insert > Text Box to draw a box near the picture. (See add a text box for additional details.) Click inside the text box and type the text you want to use for a caption. Select the text.

How do you caption an image format? ›

A caption appears next to the image and identifies or describes the image, and credits the source. There is no standard format for captions. Point out any aspects of the image that you think are noteworthy or relevant.

Why add captions to images? ›

A caption allows you to add additional information to an image or better describe what is happening in the photo. For instance, if the picture is a screen capture from a movie that circled an easter egg in the background the caption can say the scene number or what the easter egg actually is.

How to create a page in Drupal? ›

To add a new Page or article, click on Add content. Next, select the Basic page type of content. The default Drupal content editor will appear. Add a Title for your page and of course – its content.

How can I caption my picture? ›

Cute Selfie Captions
  1. “If you were looking for a sign, here it is.”
  2. “Remember that happiness is a way of travel – not a destination.”
  3. “Just because you're awake doesn't mean you should stop dreaming.”
  4. “Be yourself, there's no one better.”
  5. “Stress less and enjoy the best.”
  6. “Look for the magic in every moment.”
Sep 21, 2023

What is a caption for an image? ›

A photo caption or image caption is a written description that sits directly underneath an image. This image can be a photo, drawing, diagram, piece of art, or anything else rendered in an image file format. In a blog, many of your images will have photo captions.

What is a caption example? ›

A caption is a brief description accompanying an illustration. You know the online photo of your baby cousin face-planting into a cake? The description underneath it that says "Hugh's First Birthday" — that's the caption.

What is the best format for captions? ›

The two most common caption file formats are SRT and VTT.

Do I need to caption a picture? ›

Even if a picture is worth a thousand words, it still needs a caption to draw readers, provide context and tell the story. Here are some tips for writing effective captions. Check the facts. Be accurate with credit lines, details and anything else that might catch a reader's eye.

What is the purpose of a caption add a ____________ to an image? ›

Context: Captions provide context for the image and can help the viewer understand what the image is depicting or conveying. Captions can help provide additional information or details that are not immediately apparent from the image itself.

What is the difference between image title and image caption? ›

Captions describe images to help users relate them to surrounding text. Titles identify images and number them in long-form content.

Can you copy a page in Drupal? ›

You can duplicate a page in Drupal by selecting the "Clone" tab that appears on top of the page after you've logged in to Drupal as an editor. This is particularly useful for units that have recurring events they need to create pages for or a series of pages that use the same layout.

How do I add captions to iPhone photos? ›

Step 1: Open the Photos app on your iPhone or iPad. Step 2: Find the image you want to caption. Step 3: Open the image and swipe upward until you see the caption field. Step 4: Tap on Add a Caption and enter a description or keywords that describe the photo.

Is there an app where you can add captions to photos? ›

The best app for putting text on photos is YouCam Perfect, followed by Phonto - Text on Photos and Add Text: Write On Photos. If you want the app that packs the most photo editing features into one easy-to-use app, opt for YouCam Perfect.

Top Articles
Latest Posts
Article information

Author: Rev. Leonie Wyman

Last Updated:

Views: 5714

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Rev. Leonie Wyman

Birthday: 1993-07-01

Address: Suite 763 6272 Lang Bypass, New Xochitlport, VT 72704-3308

Phone: +22014484519944

Job: Banking Officer

Hobby: Sailing, Gaming, Basketball, Calligraphy, Mycology, Astronomy, Juggling

Introduction: My name is Rev. Leonie Wyman, I am a colorful, tasty, splendid, fair, witty, gorgeous, splendid person who loves writing and wants to share my knowledge and understanding with you.