# Need help with image caption

**URL:** <https://talk.jekyllrb.com/t/need-help-with-image-caption/6715>\
**Category:** Help\
**Created:** [November 20, 2021, 12:18am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715 "2021-11-20T00:18:38Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 20, 2021, 12:18am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/1 "2021-11-20T00:18:38Z")

</div>

I have some Kramdown [image code](https://pippim.github.io/#hdr7) that works well:

```auto
![github pages themes.png](/assets/img/github pages themes.png){: style="float: right; 
height: 65%; width: 65%; margin-left: 1em; margin-top: 2em;"}{:class="img-responsive"}

```

For a couple of days now I’ve been trying to figure out how to expand it with an italicized image caption centered under the image (which would include a hyper-link to credit image creator). I found this [SO code](https://stackoverflow.com/a/63100357/6929343) which I “think” I need to insert:

```auto
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="The beautiful MDN logo.">
  <figcaption>MDN Logo</figcaption>
</figure>

```

BTW: I believe `class="img-responsive"` is a bootstrap command issued by Cayman Theme.

For my existing code I’d like to make `float` default to `none` when not passed as a parameter. Also `width` and `height` should default to `100%` if not passed. Similarly `margin` should be `0px` if not passed as a parameter. I’d like the caption to use a smaller font and as a hack I’m currently using `<sup>caption text</sup>`:

 ![Jekyll Image Caption](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/fced82dd4fa7a68a506449aad817e42ce6403599.png)

* * *

My website does have an `/assets/css/style.scss` with a few functions for buttons and whatnot so I’m not adverse to adding Sass code. I just don’t know what code to add where so… any help would be appreciated!

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 20, 2021, 8:22am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/2 "2021-11-20T08:22:38Z")

</div>

## IMG RESPONSIVE

> [@pippim](#):
>
> BTW: I believe `class="img-responsive"` is a bootstrap command issued by Cayman Theme.

I don’t understand what you mean here and I can’t find any use of that class on the theme’s code or site. Also on your site, that class is not doing anything that I can see on your img when I inspect it.

So I’d say track down what that class does and if you even need it. And if you need it on your site you can add it to your styles.css file.

## DEFAULTS

Regarding defaults, you should use CSS’s specificity rules.

So set up for example:

```auto
.img-responsive {
  float: none;
  width: 100%;
  height: 100%;
  margin: 0px;
}

```

Then to _override_ those defaults, just set a value using the style.

In plain CSS, setting style like this will override the class rules.

```auto
<!-- Default settings -->
<img class="img-responsive"/>

<!-- Defaults with overrides on two fields -->
<img class="img-responsive" style="{float: left; margin: 10px}" />

```

* * *

## MD vs HTML

This snippet you gave is specifically for Markdown.

> [@pippim](#):
>
> ```auto
> ![github pages themes.png](/assets/img/github pages themes.png){: style="float: right; 
> height: 65%; width: 65%; margin-left: 1em; margin-top: 2em;"}{:class="img-responsive"}
> 
> ```

Given you want to use `figure` and `figcaption`, you’ll want to move that to be in all _HTML_.

And therefore you can ditch the kramdown and go with this:

```auto
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="The beautiful MDN logo."
     class="img-responsive"
     style="float: right; 
height: 65%; width: 65%; margin-left: 1em; margin-top: 2em;"
    >
  <figcaption>MDN Logo</figcaption>
</figure>

```

## Parameters

If you want to keep that lighter, you can make an includes file.

`_includes/image.html`

```auto
<figure>
  <img
    src="{{ include.src }}"
     alt="{{ include.alt }}"
     class="img-responsive"
     style="{{ include.style }}"
    >
  <figcaption>{{ include.caption }}</figcaption>
</figure>

```

Then all you need to do use is one line:

```auto
{% include image.html src="abc.png" alt="Logo" caption="My caption here" %}

```

And if you want to set style overrides:

```auto
{% include image.html src="abc.png" alt="Logo"
   caption="My caption here"
   style="float: right; height: 65%; width: 65%"
%}

```

I use a caption in an includes file [here](https://github.com/MichaelCurrin/the-buckfever-underground/blob/c717bbfb765834b535e35fa6d0a17a0d878345f7/_includes/image.html)

## Caption

`sub` is fine to use.

If it is too small, you can always set a rule

```auto
sub {
  font-size: 10px;
  // OR
  font-size: small;
}

```

You could also set that rule on `figcaption` instead without using `sub`, so you can make the text inside figcaption small.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 20, 2021, 8:29am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/3 "2021-11-20T08:29:12Z")

</div>

You can also pass variables

```auto
{% assign img_src="abc.png" %}
{% assign caption="My caption here" %}

{% include image.html src=img_src alt="Logo" caption=caption %}

```

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 20, 2021, 1:54pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/4 "2021-11-20T13:54:02Z")

</div>

> [@pippim](#):
>
> `class="img-responsive"`

This class may have come from the Merlot theme which I used between October 20 and 27 before switching back to Cayman theme. I’ll remove it from the page and see what if anything happens.

Thank you for the great lengths explaining **MD vs HTML** and the CSS examples. I’ll hop over to the website and try these out now.

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 20, 2021, 4:49pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/5 "2021-11-20T16:49:55Z")

</div>

Almost [there](https://pippim.github.io/#hdr7):

 ![Jekyll Image Caption 2](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/faaed50fbf6c67bb5a85f99943e87c8226d1621e.png)

* * *

## Need to center caption under image

The caption _github pages themes.png_ doesn’t appear centered under the image but rather to the left above the image.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 20, 2021, 6:17pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/6 "2021-11-20T18:17:00Z")

</div>

I’ve been experimenting on your page by editing the DOM and by changing CSS - using dev tools.

I took everything off the page except the figure and got this

 ![Screen Shot 2021-11-20 at 8.11.45 pm](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/a/a188d73cb0a570dfcdd49de7613a336a6b9fd216.jpeg)

* * *

I turned `float: right` off of the image and then they were together.

 ![Screen Shot 2021-11-20 at 8.11.53 pm](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/4/4d9ef68bf7b68c230498cc2e1f0319994337b712.jpeg)

* * *

Then I did `float: right` on the figure rather then the img and figcaption. This seemed like a good idea.

 ![Screen Shot 2021-11-20 at 8.12.48 pm](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/b/b85e80dea153eaec737410e18cdc0fb82b13723a.jpeg)

* * *

I tried it on the full page and then it broke ☹

 ![Screen Shot 2021-11-20 at 8.13.48 pm](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/6/6eb41845ce6d6afae655fa5e328780db2cab6aeb.jpeg)

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 20, 2021, 6:20pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/7 "2021-11-20T18:20:17Z")

</div>

Oh I got it!

I turned off all the custom styling on img and figcaption. Not floating and position there.

Then I made sure the `figure` had a `width` added to `float: right`.

 ![Screen Shot 2021-11-20 at 8.19.07 pm](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/9/99b6e078f10cd86c9f2982bb7b7300fa2d6784fe.jpeg)

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 20, 2021, 6:42pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/8 "2021-11-20T18:42:33Z")

</div>

I was experimenting with solutions in [Stack Overflow Q&A](https://stackoverflow.com/questions/17078759/align-figcaption-to-bottom-of-image-in-figure) while you were experimenting with DOM and CSS.

I’m afraid I’m **NOT** using any dev tools so I don’t know how you did what you did. Plus I can’t enlarge the screenshots of your dev-tools to see what’s going on.

Could you please copy and paste the `float: right;` and `width:` code you are referring to?

Thanks!

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 21, 2021, 7:52am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/9 "2021-11-21T07:52:41Z")

</div>

Dev tools are built into the browser.

Right click and Inspect and element on the page.

Or in Firefox: Settings \> More Tools \> Web Developers tools

Chrome:

[![](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/d/d3ea61be1daa798612e9bd1650b026bb27f8e54a.jpeg "Intro To Google Chrome Dev Tools") ](https://www.youtube.com/watch?v=Aa0r8WKLoVo)

* * *

Jekyll forums let’s you expand images.

Mouse over.

Click the expand button in the bottom right.

 ![Screen Shot 2021-11-21 at 9.50.52 am](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/a/adabd342008a444c2e969c680501c71a3e49d892.png)

Click on the image to make it big.

* * *

The code is like this - either in CSS file or `style` property on figure element.

```auto
figure {
  float: right;
  width: 60%;
}

```

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 21, 2021, 4:01pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/10 "2021-11-21T16:01:57Z")

</div>

It’s been solved 24 hours later **and** 150 commits _(or so it seems)_ later:

 ![Jekyll Image Caption 4](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/2/2b01599b4007f7c57dd7bc0c9b3d4a03356b02c5.png)

* * *

_ **THANK YOU for all your help!** _

I’m using Firefox on Ubuntu not Chrome. I’m using Chrome on Android but cell phone screen is too small for anything but simple website updates.

I was zooming in the picture previously but I couldn’t read the text in the image.

I need to redesign because all figures float right at 60% now, including the top of page image designed to be left at 50%. However I’m mentally drained by learning: _“Whatever floats your **H.M.S.CSS** boat”_ so I won’t enhance that for a week.

Time to go back to my comfort zone for awhile and do some python programming and converting Stack Exchange Answers to Jekyll Blog Posts. 🙂

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 22, 2021, 6:46am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/11 "2021-11-22T06:46:48Z")

</div>

The dev tools are similar across browsers.

On mobile I don’t think there is a dev tools.

Glad you got it solved.

If a rule is too aggressive on all figures then you can be more selective with a class.

E.g.

```auto
.right {
  float: right;
  width: ...
}

```

```auto
<figure class="right">...

```

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 24, 2021, 12:28am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/12 "2021-11-24T00:28:07Z")

</div>

I “figured” out what was causing the problems for me. The `figure` section is divided into two subsections: `img` and `figcaption`. The `style` was being applied to the `img` section only leaving the `figcaption` appearing way out in left field.

> [@MichaelCurrin](#):
>
> ```html
> <figure>
> <img
> src="{{ include.src }}"
> alt="{{ include.alt }}"
> class="img-responsive"
> style="{{ include.style }}"
> >
> <figcaption>{{ include.caption }}</figcaption>
> </figure>
> 
> ```

The secret is to style the `figure` section which will encompass both the `img` and `figcaption` subsections at the same time:

```html
<figure
    style="{{ include.style }}"
  >
  <img
    src="{{ include.src }}"
    alt="{{ include.alt }}"
    >
  <figcaption>{{ include.caption }}</figcaption>
</figure>

```

Then to call it from Markdown I actually created three separate includes for now: `image.html`, `image-left.html` and `image-right.html`.

The top of the page image call looks like this:

```html
{% include image-left.html src="/assets/img/pngwing.com.png"
   alt="Github Octacat Mascot by pngwing.com"
   style="float: left; width: 50%; margin: 2em 1em 0px 0px; text-align: center;"
   caption="Github's Octocat Mascot image credit: 
      <a href='https://www.pngwing.com/en/free-png-medya'>PNGWING</a>"
%}

```

The middle of the page image call looks like this:

```html
{% include image-right.html src="/assets/img/github pages themes.png"
   alt="github pages themes.png"
   style="float: right; width: 60%; margin: 2em 0px 0px 1em; text-align: center;"
   caption="Image credit:
            <a href='https://docs.ycrc.yale.edu/clusters-at-yale/guides/github_pages/'
               >Yale University</a>"
%}

```

The **universal** image border script in CSS looks like this:

```scss

figure {
  padding: 10px;
  border-top: 1px solid #999;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  border-left: 1px solid #999;
}
figure figcaption {
  text-align: center;
}

```

I can still make some improvements by tightening the code, but I’m happy now 🙂

Once again, I want to thank you for introducing me to this area. Next I think I might tackle Image Carousels 😉

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 26, 2021, 7:24am UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/13 "2021-11-26T07:24:20Z")

</div>

Thansk for sharing. That looks like a good fix and a good approach for choosing layout.

You could also make it a single image.html which accepts a value as “left” “right” or “” for center and then produces one of 3 style values.

Or you can keep them as separate files and move any common code to a 4th file which gets called by inside the other 3, again reducing duplication. So if you add a class to img, do you it in one file and not 3.

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [November 27, 2021, 4:42pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/14 "2021-11-27T16:42:33Z")

</div>

Thank you for the suggestions. I had already known I need to shorten the current approach but had postponed that task for a while. Your suggestions will help when I get back to the task.

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [December 11, 2021, 4:08pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/15 "2021-12-11T16:08:11Z")

</div>

## Removed

I finally got around to implementing your suggestions from a fortnight ago. I’ve commented out the `scss` previously used for styling:

```scss
/* Now in _includes/image.html
figure {
  padding: 10px;
  border-top: 1px solid #999;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  border-left: 1px solid #999;
}
figure figcaption {
  text-align: center;
}
*/

```

Then I removed `image-left.html` and `image-right.html` in `_includes/` directory.

## Changed

The code removed from `assets/css/style.scss` now sits in a single file `_includes/image.html`:

```scss
<figure
    style="{{ include.style }}
            padding: 10px;
            border-top: 1px solid #999;
            border-right: 2px solid #555;
            border-bottom: 2px solid #555;
            border-left: 1px solid #999;
          "
  >
  <img
    src="{{ include.src }}"
    alt="{{ include.alt }}"
    class="img-class"
  />
  <figcaption
    style="text-align: center;"
    >
    <sup><em> {{ include.caption }} </em></sup>
  </figcaption>
</figure>

```

* * *

## Usage

Now to call the image function and pass image left or image right parameters the following two methods can be used.

### Float Right:

```liquid
{% include image.html src="/assets/img/github pages themes.png"
   alt="github pages themes.png"
   style="float: right; width: 60%; margin: 2em 0px 0px 1em;"
   caption="Image credit:
            <a href='https://docs.ycrc.yale.edu/clusters-at-yale/guides/github_pages/'
               >Yale University</a>"
%}

```

### Float Left:

```liquid

{% include image.html src="/assets/img/pngwing.com.png"
   alt="GitHub Octacat Mascot by pngwing.com"
   style="float: left; width: 45%; margin: 2em 1em 0px 0px;"
   caption="GitHub's Octocat Mascot image credit: 
      <a href='https://www.pngwing.com/en/free-png-medya'>PNGWING</a>"
%}

```

* * *

## Summary

The code is easier to understand and maintain having everything in one file rather than four different files. Additionally the global `figure {}` and `figure figcaption {}` functions aren’t applying to everything on the website.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [December 11, 2021, 6:13pm UTC](https://talk.jekyllrb.com/t/need-help-with-image-caption/6715/16 "2021-12-11T18:13:30Z")

</div>

Thanks for sharing. That’s a neat way of doing it.

By the way, if you wanted to say center all figure elements on certain pages and not others, you could make a class.

```auto
.center {
  text-align: center;
}

```

Then apply as needed.

Standard

```auto
<figure></figure>

```

Centered

```auto
<figure class="center"></figure>

```

```auto
<div class="center"></div>

```