All Collections
Tweak a stock theme or page template
How to move the Publish theme blog post image
How to move the Publish theme blog post image

By default on the Publish theme, photos will appear next to the blog post in a column, you can change this to a more traditional layout.

Updated over a week ago

By default, blog posts on websites using the Publish theme display the photo you’ve uploaded as meta image in a column that sits alongside the blog post content. If you’d prefer a more traditional layout (which will also eliminate the chance of the image distorting), you’ll need to alter three files:

  • _pages_show_blog.html

  • _pages_show_blog_wide.html

  • theme.scss



We'll start by changing _pages_show_blog.html and _pages_show_blog_wide.html. Both can be found at Website > Theme > Files.

At line 47 in _pages_show_blog.html and 49 in _pages_show_blog_wide.html for a standard Publish theme, you'll see the liquid tag:

{% if post.has_meta_image? %} 

Under this tag, we'll start by removing the following html:

1 <div class="span5" style="background: url({{ post.meta_image_url }}) center no-repeat">

2 </div>

3 <div class="span7 content-wrap">

We'll replace this code with following:

1 <div class="span12 content-wrap">

2 <img class="blog-meta-img" src="{{ post.meta_image_url }}"></img>

The final result should look like:

01 {% if post.has_meta_image? %}


03 <div class="span12 content-wrap">

04  <h3><a href="{{ post.url }}">{{ post.headline }}</a></h3>

05  <img class="blog-meta-img" src="{{ post.meta_image_url }}"></img>

06  <div class="excerpt">

07    {{ post.blog_post.content }}

08    {% if post.blog_post.is_extended? %}

09    <span class="read-more"><a href="{{ post.url }}">Read more</a></span>

10    {% endif %}

11  </div>            

Finally, to Theme.scss we'll add at what was originally line 1100:

1 .blog-meta-img {

2  float: left;

3  max-width: 250px;

4  margin-right: 20px;

5  margin-top: 10px;

6  border: 1px solid #CCCCCC;


And at what was originally line 2720:

1 @media (max-width: 400px) {

2  .blog-meta-img {

3  max-width: 100%;

4  margin-bottom: 20px;

5 }

Did this answer your question?