Headline on a blog

Highlighted
Tourist
4 0 2

Is it possible to have a headline/ banner photo at the very top of my blog? If so, how do I go about achieving it?

 

Thank you,

 

Fay

1 Like

Hi,

 

Okay, to show the headline, you need to add the below code in the Blog section

{{ article.title}}

 

and to display banner photo, you need to embed following code in a similar fashion. 

 

{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with image: article.image, small_style: true, width: 345, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}
<div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
<div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;">
<img id="{{ img_id }}"
class="article__grid-image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="">
</div>
</div>
<noscript>
<div class="article__grid-image-wrapper">
{{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
</div>
</noscript>
{% endif %}

 

Hope it helps! Please let me know if you have any questions.

 

Thanks,

Perennial Solution

Thanks & Regards
Perennial Solution

Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
https://www.perennialsolution.com/
0 Likes