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

Answered
image avatar

Paul Guillermier

Posted Nov 08, 2021

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

1

2

2 comments

Date
    Newest
      image avatar

      Tipene Hughes

      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

      0

      image avatar

      Tipene Hughes

      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

      0

      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post