Blog Post Author and Bio

Highlighted
New Member
2 0 0

Greetings:

I have just moved my blog from WordPress to Shopify. There are two people who blog and we can to automatically add the author name, bio and photo to the bottom of the blog. We are using the Minimal theme. I have turned on blog author ( which appears at the top) and added some code to add the bio but it appears at the top of the blog.

Can anyone provide code to put this info at the bottom of each post automatically?

Thanks in advance.

 

Donna

0 Likes
Shopify Staff
Shopify Staff
520 0 58

Hi Donna!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to set up your blog to leek exactly how you would like. I have gone ahead and moved the author name and date below the main article text. You can see the change I made with a note on line 25 of article.liquid. How does this look on your side?

Hope this helps Donna, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

0 Likes
New Member
2 0 0

Hi Liam:

 

Looks great! I do have one other question. How can I have the authors bio and photo appear near the name at the bottom of each article?

 

Thanks in advance!

 

Donna

0 Likes
New Member
1 0 0

Hello, I have a similar issue. Is it possible to have this adjusted on my website as well? OR, could you provide the specific liquid to accomplish this?

0 Likes
Shopify Expert
235 0 29

You can insert this block of code into your article.liquid template where you want the bio to appear:

<div id="author-bios"> 
  {% if article.author == 'Author One' %}
  <img src="{{ 'author-one.jpg' | asset_url }}">
  <h3>Author One</h3>
  <p>Author One's bio goes here</p>
  
  {% elsif article.author == 'Author Two' %}
  <img src="{{ 'author-two.jpg' | asset_url }}">
    <h3>Author Two</h3>
    <p>Author Two's bio goes here</p>
  {% endif %} 
</div>

Then for each author, upload an image into the assets folder with the same name ("author-one.jpg" in above example).

If you want to put a circle profile image on the left and the name/bio on the right, you could do something like this in your css:

#author-bios img {
  width: 150px;
  margin: 0 20px 20px 0;
  border: 1px solid #eee;
  border-radius: 50%;
  float: left;
}

 

? Enjoy the adventure! ?
0 Likes
New Member
1 0 0

Hi i am trying to do something similar or the exact same I want a profile picture to display and a bio i attached an example my theme is the free simple theme. I have also tried the code above, if anyone could help me achieve this that would be great thanks.

0 Likes
New Member
13 0 0

I wonder if this could work on our site

0 Likes
New Member
2 0 0

I took the information here, and created a dynamic version. I hope this helps.

In my theme.scss.liquid file:

#author-bios {
  margin-top: 40px;
  padding: 10px 0;
}
#author-bios img {
  border-radius: 100%;
  border: 2px solid #fff;
  float: left;
  margin: -2px 10px 0 10px;
}
#author-bios h3 {
  height: 41px;
  margin: 10px 0 2px 0;
  padding: 10px;
  background: #2A576E;
  color: #fff;
}
#author-bios p {
  height: 86px;
  padding: 6px 10px;
  margin: 0;
  background: #ccc;
}

 

In static-article.liquid (I'm using the Empire Theme):

{% include 'author-bio' %}

 

I then created a Snippet named author-bio.liquid:

<div id="author-bios">
  {% comment %}
  Dynamically generate the "About the Author" section.
  {% endcomment %}
  {% if article.user.image %}
  	<img src="{{ article.user.image | img_url: '150x150' }}" />
  {% else %}
  	<img src="//www.gravatar.com/avatar/{{ article.user.email | md5 }}?s=150" />
  {% endif %}
  <h3>{{ article.author }}</h3>
  <p>{{ article.user.bio }}</p>
</div>

 

0 Likes
New Member
1 0 0

Thanks, Robert - that works a treat. Brilliant! 

0 Likes