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}