fbpx

The CourseUp Blog

Master Your Online Course Tech

How to Add an Image to Teachable’s Lecture Sidebars

Heads up! This post may contain affiliate links. That means if you click on a link and then make a purchase, we might make a small commission. But rest assured, we ONLY recommend tools that we know, love and use in our own business.

The sidebars your students see when viewing a Teachable lecture don’t (by default) contain an image. The image is there when viewing the curriculum page, but not when they click through to a lecture.

But there are a couple of ways to add an image to the lecture sidebar.

Option 1: Add the same image to every sidebar

This option will allow you to add one image to every sidebar across your school, i.e. one image across multiple courses.

Step 1: Installing the custom code

Highlight and copy the following code to your clipboard, ready to paste into Teachable:

.lecture-page.course-sidebar h2:before {
    background: url(https://taskerly.co/wp-content/uploads/2020/02/Asset-1-500.png);
    height: 110px;
    content: '';
    width: calc(100% + 50px);
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    margin: -25px 0 10px -25px;
}
  1. Open up your Teachable dashboard.
  2. Head to Site > Code Snippets.
  3. Paste your code into the CSS section.
  4. Click Save.

Step 2: Adding your image to the code

In order to add your own image to the code, you’ll need to have an image URL for it, just like when you add an image to your footer. There are a few ways to turn an image saved on your computer into one with a URL.

Option 1: Upload the image to Teachable.
Open up any page editor in Teachable (a sales page builder or home page editor, for example). Add your image as an image block, then save and view the page. Right click on the image on the page and then click Copy Image Address. Your image’s URL is now on your clipboard ready to be pasted.

Option 2: Upload the image to an image hosting site.
Personally, I like to use ImgBB. Just upload your image and then use the Embed codes dropdown to display the HTML Full Linked code. Your image URL is the one right after the bit that says <img src” and it likely ends in either .jpg or .png.

Now you have your image URL, simply replace the URL in the code snippet with your own. Place the URL right between the brackets, like this:

background: url(paste-your-url-here.jpg);

Step 3: Adjusting the height

Preview a lecture in your curriculum to check how the image looks. The final step is to adjust the height (see the second line of the code snippet) so that the image isn’t cropped (not enough height) or with a big gap underneath (too much height).

Play around with the height until it looks right on the front end.

Option 2: Add the thumbnail for each course

Note: This requires a plan with the Power Editor.

  1. Open up your Teachable dashboard.
  2. Go to Site > Power Editor.
  3. In the templates search bar, type sidebar.
  4. Open the lecture_sidebar partial.
  5. Insert the following line of code so it sits on its own line on Row 2, then click Publish.
<img class='course-image' src='{{course.safe_image_url}}'>

Here’s how it should look:

Check it’s working correctly by previewing your curriculum and opening up a lecture.

That’s it!

Your students will now see your image in the Teachable sidebar.

Our Favourite Tools
Heads up! Some of these are affiliate links so we may earn a commission if you sign up.

FREE

The Ultimate Teachable Set-Up Checklist

This checklist will give you a comprehensive rundown of every essential setting in Teachable, including best practices for sales pages, affiliate programs, curriculum structure and much more. Don’t launch without this list!

FREE

The Anatomy of a Killer Course Sales Page

Unsure what to put on your sales page? Find out the exact sections you need to convert visitors into students.

FREE

SERVICES

Work With Us

Ready to work with a Teachable Expert? Whether you’re struggling with your course tech or just don’t have the time to deal with it yourself, we’re here to help.

Ready To Work With A Teachable Expert?

Whether you’re struggling with your course tech or just don’t have the time to deal with it yourself, we’re here to help.

Social Proof