Shopify Tutorial: Easy Captions for Images in Blog Posts and Pages using Alt Text
Shopify Tutorial – learn how to automatically generate captions for your pages and blog articles using alt text.
In this tutorial, we’re going to write some script that will automatically generate captions for images on blog posts and pages in Shopify using the image’s alt tag.
I wrote this quick tutorial because I was seeing a lot of questions in the forums about how to captions to blog posts. Instead of having customers add captions manually (which would require knowledge of HTML/CSS), I think this method is a lot easier as you can just insert alt text to images through the RTE.
You can see a demo of this here.
How it works
The script works by checking the alt text of every image in a blog article of page. If that image has an alt tag, the script will wrap the it in an <figure> tag and append a <figcaption> tag containing the alt tag of the image.
We’re also going to be adding some nice theme settings to spice up the captions :)
Let’s get started!
Adding alt text to an image
If you’re unsure of how to add alt text via the RTE, here’s a quick refresher.
Go to a page or blog article, and in the RTE click Insert > Image. Browse your computer for an image of your choice and click the “Insert Image” button.
Once you’ve added the image, click on it and you’ll see a little “edit” link at the bottom. Click on “edit” to open up that image’s options. You can then enter some text to describe the image in the “Description” field. This becomes the alt text of the image.
1. Wrap the page and/or article content with a unique div
The first step is to wrap the RTE content with a div that has a unique class so that we can target it with jQuery. It’s up to you whether you want the captions to show in the blog articles *and* pages. Refer to the list below to see which Liquid variable you need to look for in which template.
- page.liquid – {{ page.content }}
- blog.liquid – {{ article.content }}
- article.liquid – {{ article.content }}
We’re going to be wrapping the page/article content with a special div class called “caption”. Below is an example of wrapping the page content in page.liquid of the Radiance theme.
Before:
{{ page.content }}
After:
{{ page.title }}
2. Add the jQuery and CSS Snippet
Create a new snippet called “captions”. Add the content of this gist.
At the bottom of theme.liquid, you should see a closing </body> tag. Right above it, place the following code in red:
{% include 'captions' %}
12 Comments
I notice this will only work when you do not wrap the text around the image. Otherwise it pushes you caption above the text. Any ideas on how to get around this. I really like the concept.
I’m not sure if I follow. Do you have an example you can show me?
If you could email me I can provide screen shots. But I can try to explain a little better. I followed the steps as you outlined and the captions appear. However, In your example the picture is centered and the caption appears below as it should. For me, I like to align my photos to the left and then wrap the text around the picture. When I do this, the caption to my picture appears above the above the page text instead of below the picture. The code for the incorrect page appears like this
Ok
ladies…so not everyone has the privilege of having King Dong in their bedroom
night after night. But that’s not
necessarily a bad thing. For every guy that
However if I do not wrap the text around the image the caption appears as it should. Also is there a way to decrease the space between the caption and the Picture?
Hi – I am wondering if you have any updates on the align left/right and the captions. Same thing – it works great if the images are centered on the page.
Thanks,
Allison
I am trying to make it so that when you click on an image within a table on a page the alt text shows up as a caption on the expanded image. I’ve followed these instructions but the captions are still not showing up. I can see the caption setting in the theme settings but nothing on the pages.
I am not a web developer and I am in a bit over my head.
Any help is much appreciated.
Thanks,
Casey
Hi if you don’t add a description you get undefined how to make it conditional?
I too have an image I need to put a caption under, but all of the paragraph text in the blog wraps around the image. Do you have a script for that?
best regards
Hello
I’m attempting to implement this tutorial using the Parallax theme to add captions to images added with the RTE.
I’ve managed to display the alt tags, however they don’t want to sit under the images, but rather align with the text that wraps around the image?
Is it possible to modify the snippet so that it creates a rather than the which I could then use to wrap the img and alt tag so they display correctly?
Cheers
Matt Thomson
Wow, Tetchi, this is exactly what I needed! Only issue is that I can’t get the last gist (to adjust the theme settings) to work. I get a huge error message when I try to save it. Granted they’ve updated Shopify a bit since this but do you have any suggestions? I’m using the Atlantic theme…at least I think I still am. Had some modifications made but I’m code-illiterate (hanging on by my fingernails!) so not totally sure.. thanks!
Hi, I’m having issues with the last step-I can’t find settings.html in the Template Editor. Would you be able to direct me to where I can find it?
Thank you!
Hi, I don’t have a settings.html file for my Shopify theme, but I do have a json file-one called settings_data.json and another called settings_schema.json.
Do I need to translate the GIST code from step 3 into JSON for this to work?
Thank you!
Hey there Emily, apologies for the late reply.
Quite a lot has changed with theme settings since I wrote this in 2012 – theme settings are now pulled from a JSON file called settings_schema.json and not settings.html. More info here: https://docs.shopify.com/themes/theme-development/storefront-editor/settings-schema