How to move Publish theme blog post image

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

Before

After

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? %}
02  
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;
7 }

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  }
6 }

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.