最近搜索

没有最近搜索

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

已回答
image avatar

Paul Guillermier

已于 2021年11月08日 发布

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 条评论

日期
    最新
      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

      登录以发表评论。

      找不到所需的内容？

      新建帖子