Gecko theme blog template

Highlighted
New Member
2 0 2

Hi, I'm using the Gecko theme for my Shopify store, I want to start using the blog however it displays strangely in a single column with the images large and text area full width?  I would like it to be in two columns something similar to this in two columns: https://aeolidia.com/wp-content/uploads/2017/11/love-georgie-blog-615x1153@2x.jpg

 

 

Here is the code for the existing blog, is this how its delivered out the box with the theme?

 

{%- assign gl_portfolio = settings.blog_portfolio -%}
{%- if blog.handle != gl_portfolio -%}
{%- case section.settings.post_per_row -%}
   {%- when 1 -%}
     {%- assign class_colum = '12' -%}
   {%- when 2 -%}
     {%- assign class_colum = '6' -%}
  {%- when 3 -%}
    {%- assign class_colum = '4' -%}
  {%- when 4 -%}
    {%- assign class_colum = '3' -%}
{%- endcase -%}
{%- if settings.show_blog_slider -%}
   <div class="jas-blog-slider jas-carousel {{settings.image_size_blog}}{%- if settings.use_eq_height_blog %} jas_section_eqh{%- endif -%}" data-slick='{"slidesToShow": {{settings.sidetoshow_blog}},"slidesToScroll": 1,"rtl": {{ settings.use_rtl }}, "autoplay": {{ settings.use_autoplay_blog }}, "autoplaySpeed": {{ settings.slider_speed_blog }}000,"arrows": {{settings.use_arrows_blog}}, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2}},{"breakpoint": 480,"settings":{"slidesToShow": 1}}]}'>
     {%- assign blogtop = blogs[settings.blog_slider] -%}
     {%- unless blogtop.empty? -%}
        {%- for article in blogtop.articles limit:settings.how_many_articles_to_show -%}
        <div class="post-thumbnail jas-col- pr">
          {%- if settings.use_eq_height_blog and article.image -%}
               <div class="article__grid-image-wrapper jas-product-image-equal pr user_custom">
                  <a class="db pr lazyload jas-pr-image-link" href="{{ article.url }}" data-bgset="{%- include 'bgset', image: article.image -%}" data-sizes="auto" data-parent-fit="cover" style="background-image: url('{{ article.image | img_url: '50x50' }});">
                    <img class="op_0 article__grid-image w__100 lazyload" src="{{ article.image | img_url: '50x50' }}" 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="{{ article.image.alt | escape }}">
                  </a>
                   <div class="jas-wrap-lazy"></div>
               </div>
            {%- elsif article.image -%}
               {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
               <div class="article__grid-image-wrapper">
                  <a class="db pr" href="{{ article.url }}">
                    <img class="article__grid-image w__100 lazyload" src="{{ article.image | img_url: '50x50' }}" 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="{{ article.image.alt | escape }}">
                    <div class="jas-wrap-lazy"></div>
                  </a>
               </div>
            {%- endif -%}
          <div class="pa tc cg w__100 content_blog_slider">
            <div class="post-meta fs__12">
              <span class="author vcard pr">{{ 'blogs.article.by' | t }} <span class="url fn n cw">{{ article.author }}</span></span>
              {%- if article.tags.size > 0 -%}
              <span class="cat pr">{{ 'blogs.article.in' | t }} 
                {%- for tag in article.tags limit:5 -%}
                <a href="{{ blogtop.url }}/tagged/{{ tag | handle }}" rel="category {{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
                {%- endfor -%}
              </span>
              {%- endif -%}
              {% if blogtop.comments_enabled? %}<span class="comment-number pr"><a href="{{ article.url }}#comments">{{ 'blogs.comments.with_count' | t: count: article.comments_count }}</a></span>{% endif %}
            </div>
            <h2 class="post-title fs__14 ls__1 mt__10 mb__5 tu"><a class="chp" href="{{ article.url }}" rel="bookmark">{{ article.title }}</a></h2>
            <span class="posted-on fs__12"><a class="cg" href="{{ article.url }}">{{ article.published_at | time_tag: format: 'month_day_year' }}</a></span>     
         </div>
      </div>
        {%- endfor -%}
     {%- else -%}
     {% for i in (1..3) %}
     <div class="post-thumbnail pr">
       <a href="/admin/blogs">
         {% capture current %}{% cycle 1, 2 %}{% endcapture %}
         {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}   
       </a>
       <div class="pa tc cg w__100">
         <div class="post-meta fs__12"><span class="author vcard pr">{{ 'blogs.article.by' | t }} <a class="url fn n" href="/admin/blogs">admin</a></span><span class="cat pr">{{ 'blogs.article.in' | t }} <a href="/admin/blogs" rel="category tag">Beauty</a>, <a href="/admin/blogs" rel="category tag">Fashion</a>, <a href="/admin/blogs" rel="category tag">Life Style</a></span><span class="comment-number pr"><a href="/admin/blogs">0 Comment</a></span></div>
         <h2 class="post-title fs__14 ls__1 mt__10 mb__5 tu"><a class="chp" href="/admin/blogs" rel="bookmark">{{ 'homepage.onboarding.blog_title' | t }}</a></h2>
         <span class="posted-on fs__12">
           <a class="cg" href="/admin/blogs"><time class="entry-date published updated" datetime="{{ article.published_at }}">{{ 'now' | date: "%B" }} {{ 'now' | date: "%d" }}, {{ 'now' | date: "%Y" }}</time></a></span>      
       </div>
     </div>
     {% endfor %}
     {% endunless %}
   </div>
   <!-- .jas-blog-slider -->
{%- else -%}
   <div class="page-head pr tc">
      <div class="jas-container pr{%- if settings.blog_bg_image != blank %} lazyload{%- endif -%}"{%- if settings.blog_bg_image != blank %} data-bgset="{%- include 'bgset', image: settings.blog_bg_image -%}" data-sizes="auto" data-parent-fit="cover" style="background-image: url({{ settings.blog_bg_image | img_url: '50x50' }});"{%- endif -%}>
         <h1 class="tu mb__10 cw">{{ blog.title }}</h1>
         <ul class="jas-breadcrumb dib oh">
            <li class="fl home"><a href="/" title="{{ 'general.breadcrumbs.home' | t }}">{{ 'general.breadcrumbs.home' | t }}</a></li>
            <li class="fl separator"> <i class="fa fa-angle-right"></i> </li>
            <li class="fl current"> {{'blogs.blog.blog_title_html' | t:blog_title:blog.title }}</li>
         </ul>
      </div>
   </div>
{%- endif -%}
{%- case settings.show_blog_sidebar -%}
{% when true %}
{%- assign block_width = 'jas-col-md-9' -%}
{% when false %}
{%- assign block_width = 'jas-col-md-12' -%}
{%- endcase -%}
{%- case settings.layout_blog -%}
   {%- when 'grid' -%}
      {%- assign include_element = 'blog_item_grid' -%}
   {%- when 'masonry' -%}
      {%- assign include_element = 'blog_item_masonry' -%}
{%- endcase -%}
{%- case settings.post_per_row_blog_main -%}
   {%- when 1 -%}
     {%- assign class_colum = '12' -%}
   {%- when 2 -%}
     {%- assign class_colum = '6' -%}
  {%- when 3 -%}
    {%- assign class_colum = '4' -%}
  {%- when 4 -%}
    {%- assign class_colum = '3' -%}
{%- endcase -%}

{% paginate blog.articles by settings.articles_per_grid_page %}
<div class="jas-container">
  <div class="jas-row jas-blog">
    <div class="{{ block_width }} jas-col-xs-12">
      {% if settings.layout_blog == 'grid' %}
      <div class="jas-row posts mt__60 {{settings.image_size_blog_main}}{%- if settings.use_eq_height_blog_main %} jas_section_eqh{%- endif -%}">
        {% else %}
        <div class="jas-row posts mt__60 jas-masonry {{settings.image_size_blog_main}}{%- if settings.use_eq_height_blog_main %} jas_section_eqh{%- endif -%}" data-masonry='{"selector":".post_div", "columnWidth":".grid-sizer", "layoutMode":"masonry"}'> 
          {% endif %} 
          {%- if settings.layout_blog == 'masonry' -%}
          <div class="grid-sizer size-{{class_colum}}"></div>
          {%- endif -%}
          {%- for article in blog.articles -%}
            <div class="post_div jas-post-slide jas-col-md-{{class_colum}} jas-col-sm-{{class_colum}} jas-col-xs-12">
               {%- include  include_element -%}
            </div>
          {%- endfor -%}
        </div>
        <!-- .posts -->
        {% if paginate.pages > 1 %}
        {% include 'pagination' %}
        {% endif %}
        <!-- .page-nav -->
      </div><!-- .{{ block_width }} -->
      {% if settings.show_blog_sidebar %}
      <div class="jas-col-md-3 jas-col-xs-12{% if  settings.blog_sidebar_layout == 'left' %} first-md{% endif %}">
        {%- section 'section_sidebar_blog' -%}
      </div><!-- .jas-col-md-3 -->
      {% endif %}
    </div>
  </div><!-- .jas-container -->
  {% endpaginate %}
  {%- else -%}
   <div class="page-head pr portfolio_bg_image tc{%- if settings.portfolio_bg_image != blank %} lazyload{%- endif -%}"{%- if settings.portfolio_bg_image != blank %} data-bgset="{%- include 'bgset', image: settings.portfolio_bg_image -%}" data-sizes="auto" data-parent-fit="cover" style="background-image: url({{ settings.portfolio_bg_image | img_url: '50x50' }});"{%- endif -%}>
    <div class="jas-container pr">
      <h1 class="tu cw mb__10">{{ settings.title_portfolio | strip_html }}</h1>
      <p>{{ settings.description_portfolio | strip_html }}</p>
      <ul class="jas-breadcrumb dib oh">
         <li class="fl home"><a href="/" title="{{ 'general.breadcrumbs.home' | t }}">{{ 'general.breadcrumbs.home' | t }}</a></li>
         <li class="fl separator"> <i class="fa fa-angle-right"></i> </li>
         <li class="fl current"> {{ settings.title_portfolio | strip_html }}</li>
      </ul>
    </div>
   </div>
   {%- assign number_projects_per_grid_page = settings.projects_per_page | plus:0 -%}
   {%- paginate blog.articles by number_projects_per_grid_page -%}
      <div class="jas-container mt__60 mb__60">
         <div class="jas-row mt__90 mb__90">
            <div class="jas-col-xs-12">
               {%- if blog.all_tags.size > 0 and settings.portfolio_filters-%}
                  {%- assign tags = settings.portfolio_tags_filter  | replace: ' ,', ',' | replace: ', ', ',' | split: ',' -%}
                  <div class="portfolio-filter jas-filter fwb tc tu mb__25">
                    <a data-filter="*" class="selected dib cg chp" href="javascript&colon;void(0);">{{ 'blogs.portfolio.filter_all' | t }}</a>
                    {%- if settings.portfolio_tags_filter != blank -%}
                      {%- for tag in tags -%}
                      {%- assign tag = t | strip -%}
                      {%- assign tag_value = tag | handleize -%}  
                      <a data-filter=".{{ tag_value }}" class="dib cg chp" href="javascript&colon;void(0);">{{ tag_value | split: '|' | first | capitalize }}</a>
                      {%- endfor -%}
                    {%- else -%}
                      {%- for tag in blog.tags -%}
                      {%- assign tag = t | strip -%}
                      {%- assign tag_value = tag | handleize -%}  
                      <a data-filter=".{{ tag_value }}" class="dib cg chp" href="javascript&colon;void(0);">{{ tag_value | split: '|' | first | capitalize }}</a>
                      {%- endfor -%}
                    {%- endif -%}
                  </div>
               {%- endif -%}
               {%- case settings.projects_columns -%}
                   {%- when '2' -%}
                     {%- assign width_block = 'jas-col-md-6' -%}
                   {%- when '3' -%}
                     {%- assign width_block = 'jas-col-md-4' -%}
                   {%- else -%}
                     {%- assign width_block = 'jas-col-md-3' -%}
               {%- endcase -%}
               <div class="jas-row jas-masonry jas-row-spacing-{{settings.projects_spacing}} {{settings.image_size_portfolio}}{%- if settings.use_eq_height_portfolio %} jas_section_eqh{%- endif -%}" data-masonry='{"selector":".portfolio-item", "layoutMode":"masonry" ,"columnWidth":".grid-sizer"}'>
                  <div class="{{ width_block }} jas-col-sm-6 grid-sizer"></div>
                  {%- for article in blog.articles -%}
                     {%- include 'portfolio_item' -%}
                  {%- endfor -%}
               </div>
               {%- if paginate.pages > 1 -%}
                  {%- include 'pagination' -%}
               {%- endif -%}
            </div>
         </div>
      </div>
   {%- endpaginate -%}
{%- endif -%}
1 Like
Highlighted
Shopify Partner
3342 465 873

Hello, @88Zero 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
New Member
2 0 2
Hi
Many thanks for your reply, the blog URL is here: https://www.olivierlaudus.com/blogs/news

Thanks again 🙂
1 Like
Highlighted
Shopify Partner
3342 465 873

Thanks for URL.

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

also can you please check theme setting because of theme allow to this check below link

https://demo-gecko-plus.myshopify.com/blogs/news
https://demo-gecko-plus.myshopify.com/blogs/news 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like