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

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

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

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}}

Hi @lynn16

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