Adding Image on the home page

Husseina3 · February 10, 2020, 3:58pm

Hi,

So I was trying to add an image on the homepage by using HTML sytanx on the text box and have also tried using iframe to test if videos can be added in the description container of the homepage. However, the image doesn’t show up on the website. I was wondering if someone can give me tips on that.

Thank you

ebell · February 10, 2020, 6:53pm

Hi @Husseina3,

I’ve just now updated the theme to allow for images and video. You can download here .

You may still need to update your HTML Filtering settings under Admin > Settings > Security. The screenshot below shows how to enable the <img> element tag and its src attribute.

Note that you cannot have any spaces between values – just a single comma.

UPDATE/EDIT:
For YouTube embeds you’d need to add iframe to “Allowed HTML Elements” and the following in “Allowed HTML Attributes” : iframe.src,iframe.width,iframe.height,iframe.allow,iframe.allowfullscreen,iframe.frameborder

Husseina3 · February 10, 2020, 7:18pm

Hi @ebell

Thank you very much for getting back to me in such a short notice. Allow me to check it out and i will get back to you

Husseina3 · February 10, 2020, 7:46pm

@ebell

So I edited the security setting as you showed me and here is the screenshot.

Husseina3 · February 10, 2020, 7:49pm

After I edited the setting, I went back to the description box and added and img tag and iframe. both the video and the image showed up on the backend while i was saving it. However, when i reload the website, both the image and the video are not showing up. I tried to see the HTML that was generated on the web browser by using the inspect feature and the HTML didn’t include both the Img and the Iframe tags.

ebell · February 10, 2020, 8:07pm

Hard to say from the screenshot but you might have a trailing space in there somewhere. Also, you have some invalid tags in the “Allowed Elements” field (e.g. height, cellpadding, bgcolor, etc). You might want to click the “Restore Defaults” button(s) and try adding again.

Husseina3 · February 10, 2020, 8:17pm

I restored the defaults and added the img and iframe like you showed me. but on the browser side the HTML doesn’t show the added img and iframe tags inspect

Allowed HTML Elements
p,br,strong,em,span,div,ul,ol,li,a,h1,h2,h3,h4,h5,h6,address,pre,table,tr,td,blockquote,thead,tfoot,tbody,th,dl,dt,dd,q,small,strike,sup,sub,b,i,big,small,tt,img,iframe

Allowed HTML Attributes
*.style,*.class,a.href,a.title,a.target,img.src,iframe.src,iframe.width,iframe.height,iframe.allow,iframe.allowfullscreen,iframe.frameborder

ebell · February 10, 2020, 8:25pm

Looks like you’re using version 3.1.1 of the theme. You’ll need to upgrade to 3.3.5 (added today; see download link above).

Husseina3 · February 17, 2020, 5:08pm

@ebell I upgraded my theme to the new 3.3.5 version and the img and Iframe tags work flawlessly. Thank you very much for your help with that.

The one thing that happened after I made the upgrade was that all the CSS changes that I have made on the previous versions didn’t transfer to the new one and I was wondering what would be the best way to go about bringing the changes that I have made on the old version to the new version. Do I copy the CSS from the old version and paste it to the new one or do I make the CSS changes on the Custom CSS box?

ebell · February 18, 2020, 2:44pm

Yes, you can put your custom CSS changes in theme settings going forward, and they will not be lost when upgrading the theme, etc. Make sure to only copy over your customizations and not the entire stylesheet from the previous version.