Adding images/icons into the Copenhagen Theme

OMGGGGGG Mystery solved!

Here's what I had set:

{{#is name 'Help me save money'}} fas fa-dollar-sign{{/is}}
{{#is name 'Help me save time'}} far fa-clock {{/is}}
{{#is name 'Help me with EVERYTHING'}} fas fa-hand-holding-usd {{/is}}

Here's what I SHOULD have set:

{{#is name 'Help me save money '}} fas fa-dollar-sign{{/is}}
{{#is name 'Help me save time '}} far fa-clock {{/is}}
{{#is name 'Help me with EVERYTHING '}} fas fa-hand-holding-usd {{/is}}

Tiny little space at the end of the title, that doesn't catch on copy-paste from the title!!

WOOOOHOOOOO!!! 

I realized this when you asked for the full screenshot, and I noticed the extra dash at the end of the link:

So thank you so so much for this!!! I've been pushing this away for months and so happy it's resolved!

Hi Ruthy,

I'm glad that I helped you figure this out, because I was really perplexed by this. I'm still not sure that I fully understand what the problem was. Did the section title have a dash or space at the end?

Yes, sorry :)
There's apparently an extra space that doesn't show when you look at the title.
It's also not picking it up when I copy-pasted the title.


It's basically an invisible extra space, but it's visible on the long link from Zendesk:

Moral of the story: if anyone else encounters this odd issue, you should check in the source for the exact wording and spaces as it shows on the link. 

Thanks for sharing what you figured out, Ruthy!

Personally, nothing is working for me. All I try to do is to have these Sections look better (an image / an icon ) anything. I follow all the steps but it's not up to date right now - Nothing is working. If you can show me the steps I'd be happy. I added a random picture as an asset, then I went in the Section_page.hbs  tried to copy that code in there:

{{#is id 360003646880}}<img class="" src="{{asset 'pexels-ketut-subiyanto-4246118.jpg'}}" />{{/is}}

360003646880 being my Section ID and asset 'pexels-ketut-subiyanto-4246118.jpg being the random picture I wanted to try and I uploaded to the asset - ITS NOT WORKING!! DAMMNNIT!! 

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.

@Ifra Saqlain 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, @Anonymous 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..