Photo Captions

To insert a photo caption under a photo that is in the primary or secondary body:

  1. This code can be used in either the Primary Body or Secondary Body field. Go to the desired field.
  2. Click the Source button in the Editor Toolbar (#29).
  3. Paste the code below into the photo's desired location in the primary or secondary body.

    <div class="caption block-half left">
    <img src="[SRC]" alt="[Text]" />
    <p>Caption in paragraph text.</p>
    </div>

  4. Replace the underlined potions with the desired content. In order of appearance in the code, options for the underlined portions are:
    • Image and caption size. If you would like the photo and caption to take up half of the content area, choose block-half; if you would like it to take up a quarter of the content area, choose block-quarter; and so on.
      • block-quarter
      • block-third
      • block-half
      • block-two-thirds
    • Image and caption placement, specifying on which side of the page the image and caption should appear. The caption block can float
      • left, or
      • right
  5. The second line of code is where the image source (img src) goes. This is the code generated after you upload the photo to Drupal and place it in the primary or secondary body. More details on how to upload photos can be found here.
    • Note: In order for an image to be responsive, it should not have an explicit height or width set to it. To make sure your image will be responsive, double-click on the image once it's uploaded. If there are any values listed in the height and width fields, delete the values to make the image responsive.
  6. Alternative text (alt text) briefly describes the image. The text will appear on a live page if the photo cannot be loaded — a blank box with the alt text will appear instead of the image.
  7. The image caption goes in the third line of code, between the <p> and </p>. 
  8. Publish and save the page.