Captioned Image

A need sometimes arises to provide a bit more descriptive text to display with an image. This could include a brief summary explaining what an image is about or attribution to the original photographer. HTML figure tags are the best way to accomplish this task; in that they allow us to semantically group an image and caption content together as one unit. This caption content can be styled in many different ways, such as a semi-transparent 'strap line' overlaying a corner of the image. Nowadays it's not a good idea to have captions that only popup to display on mouseover; for the simple reason that many website users are likely to be using touch screens, without a mouse. This snippet uses image and short text elements. Optionally the image can be set as a link.

Example

HTML & PHP

<figure class="captioned_image">
  <?php webyep_image("Image", false, 'class="myclass"', 'some_other_page.php', '_self', 700, 900, true, 70, 90, 600, 270); // WebYepV2 ?>
  <figcaption>
    <?php webyep_shortText("Caption Content", false, 550, 240); // WebYepV2 ?>
  </figcaption>
</figure>

CSS

figure.captioned_image {
    margin: 1rem 0;
    position: relative;
    font-size: 0px;
}

figure.captioned_image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.75rem 1rem;
    font-size: 14px;
    color: white;
    background-color: rgba(0, 0, 0, 0.70);
    text-transform: capitalize;
}

Javascript