• Pulkit Pandey

  • 2020년 10월 20일 15:19

  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

• Ronit

  • 2020년 10월 26일 15:10

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

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