Adapt Learning Community: add image to the text component

Hi, I want to add an image alongside my text within a text component.

I have located the text.hbs file and have added the following code (shown in bold):

<div class="text-inner component-inner">
{{#if title}}
<div class="text-title component-title">
<h4 class="text-title-inner component-title-inner">
{{{title}}}
</h4>
</div>
{{/if}}
{{#if body}}
<div class="text-body component-body">
<div class="text-body-inner component-body-inner">
{{{body}}}
</div>
</div>
{{/if}}
{{/if}}
{{#if graphic}}
<div class="text-graphic component-graphic-inner">
<img src="{{graphic.src}}" alt="{{graphic.alt}}" title="{{{graphic.title}}}"/>
</div>
{{/if}}
</div>

I have inserted a graphic name/value pair within my components.json file and re-built but I am getting the following error:

Warning: Handlebars failed to compile src/components/adapt-contrib-text/templates/text.hbs. Use --force to continue. Aborted due to warnings.

I am very new to Adapt and wonder if someone could please tell me where I am going wrong.

Thanks in advance for any help

Julie

I have just found the graphic component (told you I was new to Adapt!) and have placed one next to my text component to get the desired effect :)

However, for future reference I would still like to know:

1. Is it OK to modify the .hbs files to suit individual needs?

2. If yes, what is the correct procedure to avoid any build errors?

Thanks again!

Loving Adapt btw!

Julie

Show parent | Reply

Hi Julie,

Great to hear that you're loving adapt and I'm glad you got this sorted.

To answer your questions, it's technically possible for you to make minor tweaks to the .hbs files, you may run into problems (as you have), for example, if you drastically change the template to add properties that the model doesn't support. If you wish to alter the appearance of any components, the best place to do that is to tweak the style in the theme.

Of course, you're free to have a look at existing components, use these a base, fork them and create your own version if you so want. Alternatively, if you feel that there's something missing from a component you could raise an issue for it on its GitHub repository.

Regards,

Brian

Show parent | Reply

Thanks Brian, your advise is much appreciated

Show parent | Reply

Hey Julie,

Looks like your problem is with an extra {{/if}} - as shown below in bold.

However I would have suggested you used the graphic component as it comes with a really nice image loading ability for larger devices.

If you did want to modify a template for a component and there isn't a component like it - copy the folder over and build a new one. You can then register your component into the registry by following the documentation online and other people can use it. This way you're giving something back to the community.

<div class="text-inner component-inner">
{{#if title}}
<div class="text-title component-title">
<h4 class="text-title-inner component-title-inner">
{{{title}}}
</h4>
</div>
{{/if}}
{{#if body}}
<div class="text-body component-body">
<div class="text-body-inner component-body-inner">
{{{body}}}
</div>
</div>
{{/if}}
{{/if}}
{{#if graphic}}
<div class="text-graphic component-graphic-inner">
<img src="{{graphic.src}}" alt="{{graphic.alt}}" title="{{{graphic.title}}}"/>
</div>
{{/if}}
</div>

Hope this helps. Thanks,

Daryl

Show parent | Reply

Thanks Daryl, I missed that! :) and thanks for your advise about creating a new one and sharing - will do! ;)

Show parent | Reply