Transcription
Hi, this is Russell from Low Fruit Solutions. Today I'm going to be demonstrating the image captions feature for the Pro Blogger application.
The purpose of the image captions feature is really to add a descriptive text underneath the images in your blog so that your readers can identify with what the images are trying to show them. This isn't a native feature that's available within Shopify, and hence why we've added it into the Pro Blogger app.
Now, just to give a quick demonstration of what it looks like before and after, we're just going to scroll down on our demonstration store here and click into one of the blogs. Let's have a look at this one. You'll notice that we have a few images within the blog itself and there's no descriptive text. Look, you could add descriptive text. You'd have to manage some either in paragraphs or something like that and then it doesn't quite align properly to the image. For those of you who've used WordPress and other CMS type systems, you'll understand that this is kind of a key feature, and, as I said, it's not natively available within Shopify.
First things first, let's go into the store and enable it within the app. I'm just going to click on apps here. This is a demo store and hence the Pro Blogger version here is UAT. Naturally the production version doesn't include this UAT brackets, it'll just say Pro Blogger. If we just click on that, and we'll go in here and we'll see that all the features are currently disabled. As we'd see them if you'd just installed the app. We're going to go to image captions, we're going to click the enable button, we're just going to hit save and this will copy down the necessary code files to your theme.
Then we're going to go to the install tab, image captions only requires one little piece of install, which is this little portion underneath general install. We're just going to copy that. Now, what I like to do is, I like to actually duplicate the tabs so it gives you a bit of space to work on. All right, so we'll just wait for that to load, click on the online store which'll take us to the theme section.
We're currently demonstrating this on the debut theme, but this will be the same for any theme. We're going to click on the Actions button, click on edit code option. Now what you'll see here on the left is your files within your theme, and the right is the output. We're just going to click on a theme.liquid, go to line four here where we've found <head>, this little piece of text. Now, it may be on a different line in your theme but essentially this is what you're going to be looking for. The important portion of this is to basically do a carriage return and make sure it's after the <head> section, so I'm just going to paste that.
Now, you should always make sure that this shows up as green, just in case that you've hit a different type of quote in there. It'll show up as black. It should be green, which basically is the single ' quote. If you've already put this in here because you've installed it as part of some of the other features within Pro Blogger, you don't need to add it twice, you just simply have the single version of it. Let's just hit save. Right, so that's the liquid installation part done.
Now, for us to actually use image captions we actually need to edit some things in our blog, so I'm just going to click on blog posts here. Before we go into that, let's just have a quick reminder. In our blog currently, no image captions underneath any of the images. Go back to the blog, click on here. Pineapples for your health was the article we were looking at. You'll see within the content here we've got ... here's the first image. And as I said, you could add, if you wanted to, image caption like this, but it's just going to look like any other ordinary piece of text, rather than an identifier for that particular image.
So to add an image caption, select the image, go edit image and you'll see this actually has some text, but it doesn't display because this is just part of the HTML in the background and it's picked up by search engines, et cetera, but it doesn't actually display. For us to display this now using image captions, we just put an ic: before the text. You can have a space or not, it'll trim, but ic: will tell image caption that this is an image caption. Just click that, say edit, and that'll finish that.
Let's just do it for this other one here, these two pineapples. Select the image, click edit image. You'll see in the Image alt text there's already some text there, we're just going to add the ic:, edit image and then make sure you save the changes to your blog. Right, so that should be done. Now we just go back to the blog to see what changes have been made. We're just going to refresh that and there we go. You can see here is a very defined and obvious image caption underneath both images.
Now, if you don't like the particular styling of this text, you would basically go back into the app. So let's go back here, back to the setup tab, open up image captions and you have four options available to you here. If you would like a larger font size, for instance, you could choose up to 24 pixels. We're going to choose 18. Let's choose a new color for the font. Let's choose, just in keeping with the theme's overall greenness, we'll pick green.
There's a lot of different ways to pick color here. You can go into the spectrum. As I say, number of different options. If this doesn't show because your browser compatibility, there will be an input box here where you just put the hex code. If you need to find what the hex code is, you just click on this and it'll take you to the Google color picker which'll give you the code you need to put in that box. Moving on, I'm just going to make this bold, and also going to take away the italics as well ... Just going to hit save. Okay, let's go back to the blog, let's refresh and there you go. That is image captions. Very simple, yet very effective.
So, that is all. Thank you very much for your time