How to move Publish theme blog post image

Before

After


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), please we’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.


We'll replace this code with following:


The final result should look like:


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


And at what was originally line 2720:


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.