Adding images/icons into the Copenhagen Theme

Edwin, could you post more of the code that isn't working, starting with the {{#each sections}}?

It's really great tip and adding icons in category blocks is working : 

Adding Images/Icons Into the Copenhagen Theme

@Edwin just follow these steps that's belongs to above tip:

Step 1 : Add this JQuery code on your homepage at the bottom.

<script>
  $(document).ready(function(){
  $('.icon').each(function (idx, itm){
    var categoryID = $(this).attr('data-title');
    $(itm).attr('src', categoryIcons[categoryID]);
  });
  });
</script>

Step 2 : Add JQuery Library on your document_head.hbs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 3 : Add this Category IDs on your document_head.hbs template.

<script>
  var categoryIcons = {
    "360004039672" : "{{asset 'download.jpg'}}",
    "360003781252" : "{{asset 'download-first.jpg'}}",
    "360003781212" : "{{asset 'download-second.jpg'}}"
  }
</script>

Update IDs as per your Guide ( category Ids )

Step 4 : Add this code on your home_page.hbs inside the blocks like:

<li class="blocks-item">

<a href="{{url}}" ...........>

 <img src="{{asset 'download.jpg'}}" class="icon " data-title="{{id}}">

Step 5 : All images should be added in your assets folder of your HC.

If any query let me know.

Thanks

Team

For those that are having trouble with the approaches described above, or would prefer one that's a little simpler and doesn't rely on JavaScript, check out my response to a similar question.

@... Thanks a lot for taking some time to explain to me (a non-coder) person. Unfortunately, I followed your steps and it didn't work out for me.

I was able to see Enormous pictures (the same one as I only used one picture link), it's not at all what I want.

I'm guessing what I want is too complicated to do, though it feels that it shouldn't be that hard. In the end I'm only trying to remove these Ugly buttons and customize them.

I followed your steps, but it doesn't work.

If you can let me know EXACTLY what code to put so I can get at least one section customised, I would follow the logic and do it for all other boxes. But yeah I'm doubting I will manage to fix this. Quite disappointed.

Feel free to get back to me.

Hello, @... and all!

Question, perhaps a rookie one, from CSS beginner: In the first method, where is the code for adjusting the image size supposed to go? Not sure if that's somewhere in the home_page.hbs file, or in the style.css file, or somewhere else.

I successfully added icons to my home page category buttons by following your guidance. Thank you!

I would like to make them smaller. You instructed that we should add the following:

.categories .blocks-item-link {
  display: flex;
  align-items: center;
}

.blocks-item img, .category-page-images, .section-page-images {
  margin-right: 20px;
  width: 32px;
  height: 32px;
}

I think I only need part of this, as I only want to change the image size, not the placement or alignment. But I am unclear as to where it is supposed to go. My first attempts have not gone well! I'd love any guidance you can give.

Hi Liz W

Happy to help you here, are you using font icons or image on your category block ??

or replace the below code with your existing one and let me know that it solves your issue

.blocks-item img, .category-page-images, .section-page-images {
  margin-right: 20px;
  width: 32px;
  height: 32px;
  max-width:70%;
}

Is it possible to share your HC URL where you are adding those images so that I can hop into it and provide you a solution.

Thanks 

Pulkit

Thanks Pulkit!

I am using images for my category icons.

I do not have the code I mentioned above in my Help Center yet, as I am unclear where it should go - or if it is already there I have not been able to find it.

Could you clarify for me which file I should be adding this to? That is probably a beginner question; I'm a beginner! :) 

I'll try adding the max-width percentage you suggested once I'm clear where I should try this sizing code.

We actually haven't launched the Help Center yet, and it's signed-in users only (since it's for customers with an existing subscription to my clients' software), so I can't provide a functioning link for you to look at, unfortunately! 

Liz

Hi @Liz,
You need to add these changes in style.css file which you can find once you edit the theme.

Let us know if this helps.

Thanks

Hey Trapta,

Thanks so much! That worked. I was thinking I had tried adding it to the style.css file previously without success, but one way or another it worked this time. Since I'm focused on the layout on the home page blocks and want the icon to be centered in the block, I removed the "margin-right" attribute.

The sizing is much nicer now :)

Is it possible to add gifs or loops to articles? 

I tried recreating this and it doesn't seem to be working for no reason.

home_page.hbs:

<li class="blocks-item">
  <a href='{{url}}' class="blocks-item-link">
    <img src="{{asset 'loading-gif.gif'}}" class="icon" data-title="{{id}}">
    <span class="blocks-item-title">{{name}}</span>
  </a>
</li>
....
<script>
  $(document).ready(function(){
    $('.icon').each(function (idx, itm){
      var categoryID = $(this).attr('data-title');
      $(itm).attr('src', categoryIcons[categoryID]);
    });
  });
</script>

document_head.hbs:

...
<script>
  var categoryIcons = {
      "8856217139996" : "{{asset 'Vendas-removebg-preview.png'}}"
      "8856216526876" : "{{asset 'pos-removebg-preview.png'}}",
      "8856200586012" : "{{asset 'inventario-removebg-preview.png'}}",
      "8856215484700" : "{{asset 'gestaocomercial-removebg-preview.png'}}",
      "8856216802972" : "{{asset 'legal-removebg-preview.png'}}",
      "8856216202268" : "{{asset 'CCO-removebg-preview.png'}}"
  }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

EDIT: Found the fix. The script was missing a comma lmao..