Wrap featured image in appropriate figure and figcaption markup #31

New issue

Open

opened 2025-06-28 18:28:02 +02:00 by kjz · 0 comments

kjz commented

2025-06-28 18:28:02 +02:00

At the moment, this front matter:

image: /path/to/image.jpg
image_caption: Optional caption for the image

generates this markup:

<div class="featured-image">
    <img src="/path/to/image.jpg" alt="Optional caption for the image">
    <div class="image-caption">Optional caption for the image</div>
</div>

by using figure and figcaption you’ll create a relationship between the two elements:

<figure class="featured-image">
    <img src="/path/to/image.jpg" alt="Optional caption for the image">
    <figcaption class="image-caption">Optional caption for the image</figcaption>
</figure>

At the moment, this front matter: ``` image: /path/to/image.jpg image_caption: Optional caption for the image ``` generates this markup: ``` <div class="featured-image"> <img src="/path/to/image.jpg" alt="Optional caption for the image"> <div class="image-caption">Optional caption for the image</div> </div> ``` by using `figure` and `figcaption` you’ll create a relationship between the two elements: ``` <figure class="featured-image"> <img src="/path/to/image.jpg" alt="Optional caption for the image"> <figcaption class="image-caption">Optional caption for the image</figcaption> </figure> ```

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: stefano/BSSG#31

No description provided.

Rows
Columns