How do I add a field in a section to add image programmatically?

Answered


Posted Oct 19, 2021

I am creating a section page and I would like to associate an image with each section. Is it possible to create a field in the Guide section menu to set the image name?
Is there any other way to do this kind of development? 

Any help would really be appreciated.

Paul


1

4

4 comments

      Hi Lynn Nordstrom

      Everything looks good with the code you sent as far as I can see. I'd probably start by checking the assets folder to make sure that the file names and suffix are correct i.e not .jpg instead of png.

      Let me know how that goes and feel free to reach out with any questions!

      Tipene

      0


      Hi Tipene,

      This worked great for the 3 items in my article list but the rest show up with the missing image icon. What am I doing wrong?

      Thanks!!

      Lynn

      {{#is id 4408162276503}}<img src=“{{asset ‘antarctica_21-22_tn.png’}}” alt=“Antarctica” />{{/is}}
      {{#is id 4408119307415}}<img src=“{{asset ‘australia_21-22_tn.png’}}” alt=“Australia” />{{/is}}
      {{#is id 4408171838487}}<img src=“{{asset ‘philippines_21-22_tn.png’}}” alt=“Philippines” />{{/is}}
      {{#is id 4408171905303}}<img src=“{{asset ‘hk_21-22_tn.png’}}” alt=“Hong Kong SAR” />{{/is}}
      {{#is id 4407444923671}}<img src=“{{asset ‘russia_21-22_tn.png’}}” alt=“Russia” />{{/is}}
      {{#is id 4406272531351}}<img src=“{{asset ‘uk_21-22_tn.png’}}” alt=“United Kingdom” />{{/is}}

       

      0


      Hi Tipene,

      Thank you for your answer.

      Is there a method to let the user select an image on his laptop while creating a new section? (with a new custom field in the "new section" menu)
      This image would be displayed only in this new section.

      Thank you

      Paul

      0


      Hi Paul,

      Thanks for reaching out!

      You can absolutely add images to sections within your help center. If you’re wanting to add an image to each section within a section, you can do that by adding the below code to your section_page.hbs:

      {{#if section.sections}}
      <ul class="section-list">
      {{#each section.sections}}
      <li class="section-list-item">
      <a href="{{url}}">

      // code to add
      {{#is id your_ID}}<img src="{{"your_image"}}" alt="alternative text here" />{{/is}}
      //

      <span>{{name}}</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
      </svg>
      </a>
      </li>
      {{/each}}
      </ul>
      {{/if}}

      With this example you’ll need to add the ID of the section you want to add the image to, and also the image you’d like to add. You can add {{#is}} statements as needed for additional sections.

      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