Pro Blogger: Author Features [Video – Part 1]

Transcription

Hi. This is Russel here from Low Fruit Solutions and today, I’m going to be demonstrating the Author Features portion of the Pro Blogger application. Firstly, what is Author Features? Well, author features is a way for you to essentially enhance the way that the author portion of your blog is displayed to your readers. It also offers another option, which is to do author replacement or substitution as we call it and the purpose for that is really if you have, say for instance, multiple guest authors and you don’t want to increase your Shopify plan just so you can create more Shopify accounts to then have them as guest authors. This way, you’d be able to maintain your existing Shopify plan and to have as many authors as you want displayed across your blog and your store.

Because they’re two kind of distinctively different pieces, we’re going to split this, the author features presentation into two parts. The first part I’m going to be covering is what I’m going to be calling the author box and that is the display of the author on your blog. Here, we have a demonstration store. For those of you who’ve watched any of the existing videos, it’s going to start looking very familiar and we’re going to have a look at what an existing blog looks like. We’re going to just choose the old … Let’s choose actually a different one for a change. What we’re going to see here in this particular blog is that this theme demonstrates the author right at the top here, that little section there by Low Fruit Solutions, which is the standard, in this case, admin store account. There’s no bottom section. Some themes will show the author details at the bottom here based on who the article author is in the Shopify site.

Let’s go to the dashboard and we’re going to go to apps. What we’re going to see here obviously is Pro Blogger. It says UAT but that’s because we’re on a demonstration store. For the production side, there would just be Pro Blogger itself. Then, we’re going to go to the app and we’re going to enable the author features section. There’s obviously quite a few little settings in there which we’ll come to in a very short while, so just enable and hit save. That will now copy down all the necessary components required for that particular feature. What we’re going to do now is we’re going to go to the installation instructions.

Now, for all features within Pro Blogger, there is this general install component. If you’ve already done the general install component for another feature, then you don’t need to do it again. It’s a one off installation but if not, we’re going to go through it now anyway. Just scroll down. There’s a piece of code here. This include Pro Blogger Section wrapper. We’re just going to select and copy that. What I like to do is I like to just create a new tab. This allow me to swap between the panes so I can see the instructions on one side and the code changes on the other. I’m just going to click on Online Store and you can see I’m on the day view theme here but this portion applies to pretty much all themes.

I’ve hit Actions and then Edit Code. I’m going to click on the theme.liquid in the left hand side here and the app will be displayed in the right. Actually, before we go any further, we do recommend you back up your theme before doing any changes because it would allow you to revert back to your previous states in case you make any mistakes or you just don’t like how things look. To do that, you’d simply just … I’m just going to quickly demonstrate here. You would just go to the Actions menu and hit Duplicate and that will give you a copy of your theme that you can then publish later after the code changes if you want.

All right. Let’s just go back here. Edit code, back to the theme.liquid. You’ll see this head section here at the top, right? It may not be online for your theme but this is what you’re looking for. Just going to do a carriage return afterwards and paste that piece of code in the installation instructions. If you did type it in, do make sure this portion shows green because there are a number of different codes and if you put the wrong code in like I did here now, and you’ll see that that section goes black. We need it to be green, which is this single quote. I’m just going to hit Save, Now, that is the general installation portion done.

It’s going to go back to the app and we’ll just collapse the General Install accordion and we’re going to expand Author Features. Now, there’s quite a lot of stuff in here, right now. Because we’re going to split it up into two parts, the first part just focusing on displaying the author feature box and then in the second part, we’ll do author substitution. I’m going to then pick out pieces from here specifically. What we’re going to do is we’re going to copy this piece of code here which is include Pro Blogger shortcut wrapper.

Got to go back to our code and we’re going to find … First, we click on Article. Now, your themes depending on the age, then will vary, right? This particular version debut new themes in use sections. If your theme includes something like this, which is section article template in the article.liquid file, then you should go to that file to make this change because that’s where the real work is being done, if you will. Let’s scroll down to the Sections because that’s where section files live. I want to click on article-template. What we’re going to do is right at the top, we’re just going to include the Pro Blogger shortcut wrapper, okay?

The next step is we get to change the article.contents here. If you search, you can do a control F and you can put article.content in it and it will show you now the instances. Obviously, it should only be one in this case but you can always click around to find. I’m going to change article.content to article_contents, right? Now, what that will do is it’s actually going to take the existing blog content and pull it through this particular include and it’ll replace that content piece here, right?

The next step is we’re going to add the piece of code that’s going to now display or display the author box. Now, what I like to do, which it doesn’t really matter to this theme, is if we go back to the install instructions, you’ll see this clearly here. Now, we’re not going to replace article.author at this time. We’ll do that in the next step because that’s not the point of this particular exercise. We’re just going to basically display the author box. All right. You can see there’s a bit of instruction in this image which is if author update which basically say is if author update is true, right … Close off the curly bracket. We’re just going to put an end if here because we don’t have to display anything alternatively because there is no existing text in here.

Now, if you had in your theme, you had something like article dot … It would say like article.author, you’d want to make sure … or any other code for that matter, you would want to make sure it’s on the other side of an else, so I’m just going to put that in there as an example. All right. In here, we don’t need to worry because the only place it’s showing author is at the top. We can choose to take that out if we want, so we’re just going to go back here. It goes if author update include Pro-Blogger.snippet.authorbox.

All right. I’m just going to cheat a little bit here. Copy this code because it’s pretty similar in syntax. Problogger.snippet. This is re-confirm.authorbox. Okay, all right. I’m just going to take that piece out which is necessary. All right, let’s hit Save. Now, what that’s done is if we go back to the blog, we’re going to hit refresh. You’ll see now, it’s added a section for the author at the bottom. Now, this is completely styleable so I’m just going to demonstrate a little bit of that as well so we’re going to go back to the application because this is where we’ll manage the settings for that. Back to step one, author features and you can see we’re currently using a horizontal line. Now, what we can change to is a horizontal box. All right, at the moment, we’re including an author image. We can take that out if we wish.

There’s a couple options here. Let me demonstrate the vertical setup. It will include the author image. We’ll leave it as H4. I mean we can change the heading, make it smaller which is the author name. Now, we’ve got these icons in here and I’ll … To understand what that is, I’m going to have to make some changes within the blog content which we’ll do shortly. The color and styling here, what do these settings mean? Inherit from theme means disregard all these settings below, so it’ll get a default color that’ll match your existing theme where here, you get an opportunity to change the styling accordingly. In fact, let’s do that but using a horizontal box because the boxes are the ones where you can really change the interior colors, the lines. You’re actually only just changing the divider line.

Box background color is currently set as white. That’s fine. Let’s add like kind of author text. Why don’t we change this to a little bit more of a sort of more ivory color, if you will? You can choose multiple different options here on how to put in colors depending on what you like, so you can match your theme. We’ll do that, a little bit ivory. Outline color gray, author text, gray, bio text … Now, bio is essentially the label you can apply to your author. Let’s change that a little bit, make it a little more interesting. Because my theme’s a little bit green, we’re going to change that to green. Okay. That’s not going to look particularly fancy but I’m just going to do some demonstration here of what the various styles look like.

Let’s just go there. We just changed this from a line right to a box, so there we go. That’s changed in a box, that ivory with the outline. Now, you could change that obviously however you want to style things. Let’s just quickly demonstrate what a vertical box looks like, which really just changes the alignment of where the author image and this textile to be central aligned and to put the image in the middle. My personal favorite is actually the vertical line. We’re just going to save that as well. Now, it’s kind of very clean.

Now, how do you get the more interesting pieces in here like the social media connections for that particular author? Well, what we’re going to do for that is we’re going into the blocks so we’re just going to go to my other tab here. We’re looking at this particular blog right now. This season’s fruit, pears and mangoes. I’m going to scroll down to the bottom and I’m going to add the following short code. Short codes are presented by an open square bracket. We’re just going to type author. Now, we can’t specify a name but we’re going to go delve into that in part two and name would actually replace the name of the author but right now, we’re just going to do bio equals and we’re going to give a bio for Low Fruit Solutions, the number one Shopify … Terrible. Shopify app developer. Why not big nod ourselves a little bit?

Then, probably what’s more of interest to anyone is adding social media links. We’re just going to put that in there. They have to be the full paths, facebook.com. Let’s just put that as fruits just to speed things up here, Pinterest. We can do that as well and this was going to throw a few examples in here. You can also do the more traditional stuff, e-mail equals fruit at … com. Websites, if they’ve got … your guest author has their own websites. That’s a classic example and there are a number of social media icons here so what we currently support are obviously the existing ones in here which is Facebook, Pinterest, Instagram, Twitter, Snapchat, e-mail, website.

I might have forgotten one or two more in there but you can see those in the reference guide for the app like if I go to here, if we go to manage, if you really want to see all the current ones we have available, so there we go. Image, Facebook, Instagram, LinkedIn, Pinterest, Snapchat, Twitter, website, YouTube. All these can be added so I’m just going to close that off that square bracket and I’m going to save. Now, let’s quickly refresh this. There you go, so there’s the bio in that awful color we specified and these are the icons underneath that we’ve also specified in the app.

Now, there is styling options for that particular portion. We go to author features again. I’m going to just change a few things around. I’m going to choose a round icon shape. I want them small and I’m going to change them to color, so we have three options color, dark and light, three sizes, small, medium and large and shapes, round and square. I’m actually going to change that. I can’t take that current bio text color. Now, the outline color is what sets the … Four vertical alignments will be what sets that dividing line so I’m just going to change that to a dark green and I’m going to thicken it up a little bit just for interest’s sake and save.

There we go and that is implementing the author box feature portion of author features. Join us in the secondary part and what we’ll do is go into all the substitution and how that works. It’s basically a continuation of the code changes we’ve already been doing and thank you very much for your time today.

Check out more videos below or on our Youtube channel

Was this article helpful?

Related Articles