How do I add images to my lecture titles?

[JamesK]

I have tried some custom code to insert a road sign image into my lecture title, but it's not showing. Here's my snapshot screen I photoshopped (green highlight).

This code is not showing up in the title.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Liberian_Road_Signs_-_Regulatory_Sign_-_Stop.svg/120px-Liberian_Road_Signs_-_Regulatory_Sign_-_Stop.svg.png" style="width:10%;height:10%;">

Your assistance will be very much appreciated.

James

 

 

[Funce]

Do you want the code or the image, because I can see the image just fine in your screenshot.

[JamesK]

My apologies for not being clear here. I mocked up my online course and then photoshopped the lecture title with the road sign. Yes, I would need the code to appear the sign in the title.

[JamesK]

Here's the concept I wanted for my online course.

[Funce]

Sorry, that was my bad. I didn't read the whole thing.

That <img/> tag works fine in my test environment.

Could you paste in a section of code so that I can see what's up?

[JamesK]

 

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/MUTCD_R3-8b.svg/160px-MUTCD_R3-8b.svg.png" style="width:10%;height:10%;">

 

Below is a message I received from Teachable Customer Care the other day.

Hi James,

Thanks for reaching out to Teachable Customer Care! Great question about adding images in the lecture titles. I know how aesthetically pleasing this can be for students. I'd be happy to help.

At this time, there is no native way to add images to lecture titles. Sorry about that!

You could possibly use some custom code to insert an image into the lecture title.

While we understand the desire for the in-depth customization of your Teachable school, we must stress that we do not assist with custom coding or design.

Customer Care is here to help with all areas related to your school and its intended functionality. However, we cannot assist with issues related to custom code, whether these changes have been made within Code Snippets or the Power Editor. With the vast amount of schools powered by Teachable, it wouldn’t be possible to assist with individual issues caused by custom coding.

If you’re having trouble with any change you’ve made to Code Snippets, save the code into a text editor, and remove all code from Code Snippets. After troubleshooting the code, add it back to Code Snippets to verify that you've resolved the issue.

If you’re having issues with changes made within the Power Editor, follow the same process, then reset and revert to the default template to clear all issues.

For more information about using Code Snippets and the Power Editor, please refer to our Knowledge Base here:

Code Snippets and Custom CSS

Power Editor

Hope this helps! If you have any other questions, please feel free to reach out.

Best,

Tiffany
Teachable Knowledge Base

[dsonesuk]

There is an alternative  of adding it as a background. It depends if there is an element that has unique identifier (id) to target, such as label or span, then use css to apply stying using background  image.

[JamesK]

I'm still having this same problem here.

[dsonesuk]

Are you supposed to add html code there? Usually you add html into a textarea form element.

I think when you add a radio button its parent html container would be giving a unique id ref, with this you target the parent element and its children and style using css.

Try pressing F12 which will open developer tools and then inspect the element in question to see if it does indeed have a id ref.