Add a background image on the category blocks

2 댓글

  • Pulkit Pandey
    Community Moderator

    Hi Ronit

    Please replace the below code with your code and follow steps to add a background image on the category blocks 

    {{#if ../has_multiple_categories}}
    <li class="blocks-item" id="{{id}}">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>

    Step: 1 - Now, at the bottom of this homepage paste the below code -

    Note: if you are using the v2 version of the theme please add the following line of code at the top of you document_head template

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $('.blocks-item').each(function (idx, itm){
    var categoryID = $(this).attr('id');

    if ( categoryIcons[categoryID] !== undefined ) {
    $(itm).toggleClass('changeUI');
    $(itm).css('background-image', 'url(' + categoryIcons[categoryID] + ')');
    }
    });
    </script>

    Step: 2 - Go to document_head.hbs and paste the below code at the bottom. Replace ID with your category ID or section ID. Also, replace assets with your assets.

    <script> 
    var categoryIcons = {
    "360003749913" : "{{asset 'London_2012_Olympic_Games_Wallpapers_03.jpg'}}", // Image for first category
    "ID" : "{{asset 'bg-2.png'}}" // Image for second category
    }
    </script>

    Note: ID replace it with your category ID or section ID to set an image, In my case i have
    Replace the ID with my category ID i.e 360003749913

    Step: 3 - Paste the below CSS at the bottom of your style.css

    li.blocks-item.changeUI {
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    color: #000;
    height: 180px;
    justify-content: flex-end;
    position: relative;
    }

    .changeUI .blocks-item-link {
    height: 100%;
    padding: 0;
    }

    Let me know if this solves your issue.

    Thanks 

    Pulkit

    0
  • Ronit

    Thanks @pulkit, it works like the way I want
    Thanks once again

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공