Hi, this is Russel from Low Fruit Solutions and we’re here today for part two of Author Features for Pro Blogger. If you’ll recall, in part one we did the demonstration of how to include a author box, which is the more elaborate display mechanism including social media links and HTML, and email, and website address for the particular author of your blog. As a quick reminder, let’s see what that looks like.
The one we edited was this one, so we’ll just scroll down, you’ll see here this little section that we added and styled. One thing we didn’t cover, which we will cover shortly was how to change the image available to you here. We’re just going to go over to the dashboard. We’re going to click on online store, and for the purpose of this demonstration I’m going to make couple of duplications of the tabs, because we’re going to need a little bit of workspace.
The first portion I’m going to click on is blog posts. All right, just going to the blog, because we’re going to need that for our later demonstration anyway. Let’s go to the second tab and in this one we’re going to edit code. Here we’ve got the theme section, we’re editing the debut theme ourselves, I click on actions and then edit code.
To demonstrate the image portion I’m just going to scroll down on this side here and go to assets. I’m going to add a new asset. Now this asset is going to be an image file, which I recommend you name the same as the author. Just keep it lowercase, keep it really simple, in this case I’m just going to use this file here, fruit.jpeg. Select that. I’m going to replace the existing one because I’ve already done this as an example. That is now uploaded into the asset file, or folder.
What we’re going to do now. is I’m just going to go back to the blog and I’m going to add the following little piece of text in here. Image=fruit.jpeg. All right, I’m just going to hit save. Go back to the blog and refresh. There you go. Now you see that image has been pulled, and sized, and nicely rounded. That will now be persistent across anywhere you’ve used that image and name short tag.
If you wanted to use a URL, in other words use a web address, you would just put that in here as well. It would be www … Just as an example, Fruit.com, and /fruit.jpeg, that would also pull that image in as an image source, and display it. If you have an existing image somewhere on the web that you use, Gravitar, an image you can use it that way. For Gravitar you can actually also even just have your email in here and it will do the look-up for you.
But anyway, that was Part One and we’re here to talk about Part Two.
Now Part Two is about Author Substitution. What does that mean? Well, that means I have, as a working example, I have a blog and I have a guest author who submits an article and I don’t want to have to create or pay for additional accounts on my Shopify system for every time I have guest author. I simply want to change the text of who it was done by and change these details below. That’s what author substitution does within author features and that’s what we’re going to be implementing today.
So, let’s go over to the app. Here’s one, so I want to be able to refer to the instructions. Just going to click on the Pro Blogger app, obviously as before, the UAT version here just ’cause it’s UAT on the demo store, yours will have just Pro Blogger. We don’t need to do anything in here, this has all been done. We need to go to install, we’ve already done the General Installs. Expand author features, and we’re going to start with the article page.
At the same token, we’re going to go back to the code and if you remember from part one most older themes you will do this in article.liquid but you’ll notice that most new themes use sections now. You can see this, this is the give away, it says section, which means you should really go to this file underneath the ‘sections’ area. We’re going to do that for article-template.liquid and according to the app what we’re looking for is … we’ve already included this portion and we’ve already done the article content replacement, just a quick reminder what that looks like. Here’s the first portion we’ve included the shortcut wrapper and we’ve already replaced article.content.
The next piece we’re going to be doing is we’re going to be replacing the author, article.author with newauthor. The reason for this is we want to replace the text, is the simplest answer. You can go into this window if you want to find out where you’re going to be doing the replacements, you go to look for article.author, see this one of one entry and it’s right here. Now, we would just replace this with newauthor. Hit save, make sure it’s done everything right. It’s still the same, that’s because we haven’t specified any replacement name.
This is when we want to go back to the article and the key we’re going to be putting in is name, in this case we’re going to call it ‘The Pear Man’, because it’s an article about pears, I assume that person would know a lot about pears. Hit save, and that’s all you need to do in the article. That’s done. There you go. We’ve just refreshed the blog and now we’ve got ‘by The Pear Man’. That’s fine, and you’ll notice it’s also reflected now in your author box. You’ve got this, these two pieces. if you didn’t like this portion here you could just delete it out of the code. In our case we’re just gonna do that, we don’t need this anymore.
In fact what we’ll do is we’ll be a little bit smarter, we’re just gonna change the logic so that it uses the same logic as when the author box is displayed. So if authorupdate is true, it means that if the app has the author features enabled, then display the author. We’re going to be sneaky here and just say when it’s displayed … when it’s enabled not to display anything, otherwise we go back to the original code which is this here. You can leave newauthor in there as well. Hit save, because this seems a little bit like we’re doubling up on what we’re doing. There we go. Now we’ve got the new name, removed that piece there, we could’ve left it but it looks a bit cleaner this way.
So that’s done for the articles page but obviously you see it in more that just articles. What you do, is you see … if you look at your blogs in a grid you’ll see here there’s the author name also specified. In which case we’ll see it mentioned in this right here, which is no good if it’s says Low Fruit Solutions here and then says The Pear Man within the actual article.
We’re going to go back to the instructions, we can skip this ’cause we’ve done this. You’re going to go to updating your blogs. Now what it says is, we’ve got to look for blog.liquid, which we’re going to do. In fact we can close the blog piece, we don’t need to make any more changes there.
We’re going to go here to blog.liquid, as a starting point because all the themes use blog.liquid. In this case we can see again this tell-tale sign, it’s section blog template. So we’re going to go down to sections, click on blog-template. Now what we need to do is we need to include this short code wrapper for every article. We basically need to do the same logic for every article that is displayed in the blog list. The give away for that, is you’re looking for something that says ‘for article in blog.articles’. That’s the key, that’s what you’re looking for. This is the entry. You want to do a carriage return after that, and place the include short code wrapper.
Remember what I said about it, this should be green not black. If it’s showing as black, then you’ve got the wrong quote. It needs to be the single quote. That means now for every article that displays it’s going to call this particular wrapper, which will do whats necessary to replace the author details.
If we scroll down, what we’re looking for now, is we’re going to look for our other friend, article.author. Here we have article.author. We’ve got a few here, we’ve got another ‘for article in blog.article’. So every time we see this particular reference, we need to include the short code wrapper. Then we’re going to replace article.author with newauthor. We’re just going to see if there’s any more references, here’s another one. I’ll just change that to newauthor. That’s it, that’s done. We’re just going to save that, just going to refresh. There we go, name’s been changed.
Now there’s one other little piece we want to do as well. Where article.content is specified, we really want to replace that with article_contents. Why? ‘Cause if you’ve got a very short blog and you’ve included this short code in there, it’s going to be displayed and we don’t really want that. We want to make sure it looks just like the article content. We’re going to change article.content to article_contents. Just check to see if there’s another one, just searching on article.content here. Article_contents. That’s done. Save, refresh, make sure that nothing’s changed … that’s all the same. Excellent.
Let’s go back to our home page, because there’s one other place we need to fix. Where you display blogs on your homepage is not the actual blog template. It’s actually another template, so we need to make sure we’ve also edited that. This is where I say the complexity in this particular implementation comes from, it’s just a lot of little places to edit. In this case, it’s going to be a bit of a give away. We look in sections, it’s called … scrolling down, featured-blog. That looks like it would be the right sort of place.
We’re going to do the same thing here, we’re going to look for the articles section. Actually let’s refer back to the instructions, that’s probably better. We actually do have instructions here for updating your featured blog section. Again as it mentions here, you want to look for that for ‘article in blog.articles’. We’re just going to search on that. Control F, finding it. Here we go, ‘for article in blog.articles’.
What we want to do is carriage return underneath there, and again copy and paste, include short code wrapper. You’re essentially looking for where it goes through articles. If it says for article, this little portion here, that’s what we’re searching for. Do for article again, that’s it. We’re going to include the short code wrapper. Remember what I said, we’re going to replace article.content if it exists. There we go.
We’re going to replace article.content with article_contents. Search again, see if there’s anymore. No, good. Now we’re going to be looking for article.author, and there is article.author here. We’re going to replace article.author with newauthor. Let’s search if there’s anymore, no so that’s done. Let’s just have a quick look, see if there’s anything more interesting in here, and no, so we’re going to save. Let’s have a look and see what that looks like.
Now that name will be reflected across not only across the homepage featured blog section, but also the blogs, the actual blog list and as well as in the blog itself. We can see here, there we go.
If you wanted to utilize this functionality in another blog, you obviously don’t need to make all the other changes again. You’d simply borrow the text from this existing article. Copy that. This is actually a very good example if you had the same, for instance, guest author doing numerous articles for you. You would just copy and paste the short code from the other article, or an article they’ve already done before, like I’ve just done there. Copied, pasted, and you’ll see we have exactly the same detail and information pertaining to this article as we did before. That is reflected across all the other sections.
I hope that wasn’t too heavy for you. Obviously if you have any questions et cetera, please reach out to us. We’ll help out wherever we can with installs, because themes do vary. I hope you found that beneficial.
Check out more videos below or on our Youtube channel