Change the src of an image using an asset image programmatically for each section | Community
Skip to main content

Change the src of an image using an asset image programmatically for each section

  • November 8, 2021
  • 2 replies
  • 0 views
P

Hello,

I am trying to change programmatically the image displayed in the section page depending of the section name.
I would like to use image in assets.

I tried to rebuild the helper but I doesn't seem to work:

 let imgSrc = "{{asset 'img-section-" + section.name.replace(/ /g,"-").toLowerCase() + ".png'}}"
imgWide.src = imgSrc

 

I tried to put the asset as background in css but it seems like the helper is not compile:

let imgName = "$asset-img-section-" + section.name.replace(/ /g,"-").toLowerCase() + "-jpg"
imgWide.style.background = "no-repeat center/100% url(" + imgName + ")"

 

Do you have any idea to do this? Do I miss something?

Thanks for your help

Paul

      2 replies

      Tipene
      • Tipene
      • November 29, 2021
      Hi Paul,
       
      Thanks for reaching out and sorry for the delay in getting back to you!
       
      One way you can achieve the outcome you're looking for is by using the #is helper:
       
      https://developer.zendesk.com/documentation/help_center/help-center-templates/helpers/#is-helper
       
      You can add multiple #is helpers to your section_page.hbs file to conditionally render the desired image depending on the section name. Here's an example of how you could implement that:
       
      {{#is section.name 'example one'}}
    <img src={{asset 'example1.png'}}>
{{/is}}

{{#is section.name 'example two'}}
    <img src={{asset 'example2.png'}}>
{{/is}}
       
      I hope this helps! Feel free to reach out with any questions.
       
      Tipene
      Tipene
      • Tipene
      • November 30, 2021
      Another alternative method could be using the prefix and suffix attributes built in to the asset helper. That way, you can add the additional data without introducing custom Javascript in to the mix. Then, it'd simply be a matter of using the section.name or section.id properties which will be dynamic based on the section page being viewed. I'd recommend using the section.id and mirroring that on the asset file names so as to avoid having to remove hyphens etc.
       
      Again, feel free to reach out with any questions!
       
      Tipene
      Terms & ConditionsCookie settingsAccessibility statement