Here is CSS + JavaScript to get an image on your course pages

I had posted over here in the community about wanting to have an image on single course pages which is actually the page that list the lessons for the course. I have been able to get this working really well if you would like the code to implement it. This code will enable the image you choose to show up just like in my uploaded image here. It will show up whether the community member is enrolled in the course or not and will stay after they enroll. This visual was so important to me for the user experience. Just so you know, the size of the images I am using is 1680x600. The JavaScript uses course slugs.
So when you see in the code sample:

"build-community": "/wp-content/uploads/2025/05/5-1.jpg"

build-community is the course slug from the url: community/course/build-community/lessons

The code pulls that slug and then links it to the url of the image I want for it. So for the sample above it is /wp-content/uploads/2025/05/5-1.jpg as my image is local.

It is working beautifully for me and when I add new courses, I would simply go in and add the new line of code for the new course. The code below has 4 courses listed in it. Be sure to change to your course slugs and image urls. Also to delete any extra courses.

I worked this through using ChatGPT as I am very insecure with Vue. It took hours to get it just right. If anyone, especially on the FC team see's any issues with this code, please let me know.
Shahjahan Jewel

Of course, use at your own risk and start on your dev/staging. I have done on both and have had no issues.

Have fun and I hope this inspires and helps you!
Noelle Mena

Here is the CSS (goes in your community customizations--> CSS

/* 1) Force some breathing room under the image itself */
.fhr_content_layout_body > img.fc-course-header-img {
  /* keep your full‐width fit */
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;

  /* instead of margin‐bottom, use padding‐bottom */
  padding-bottom: 1em !important;
}

/* 2) And push the content down in case that padding still collapses */
.fhr_content_layout_body > img.fc-course-header-img + .fcom_course_sections {
  margin-top: 1em !important;
}

/* 3) (Optional) constrain the absolute width if you want it narrower */
.fhr_content_layout_body > img.fc-course-header-img {
  /* uncomment & adjust to taste
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  */
}

Here is the JavaScript (goes in your community customizations--> JavaScript

<script type="text/javascript">
(function() {
  console.log("🔍 FC header unified injector v2");

  // 1) slug → root-relative image paths
  const courseImages = {
    "build-community": "/wp-content/uploads/2025/05/5-1.jpg",
    "gathering-info":  "/wp-content/uploads/2025/05/6.jpg",
    "monthly-muse":    "/wp-content/uploads/2025/05/4.jpg",
    "testing-this":    "/wp-content/uploads/2025/05/test-this.jpg"
  };

  // 2) extract the slug
  function getCourseSlug() {
    const m = location.pathname.match(/\/course\/([^\/]+)(?:\/|$)/);
    return m ? m[1] : null;
  }

  // 3) try injecting when the real intro appears
  function tryInject() {
    const slug = getCourseSlug();
    const url  = slug && courseImages[slug];
    if (!url) return;

    // a) find the body wrapper
    const body = document.querySelector('.fhr_content_layout_body');
    if (!body) return;

    // b) wait for the real course intro (not skeletons)
    const intro = body.querySelector('.fcom_course_sections .fcom_course_intro');
    if (!intro) return;

    // c) guard against double-inject
    if (body.querySelector(':scope > img.fc-course-header-img')) return;

    // d) build & prepend your <img>
    const img = document.createElement('img');
    img.src       = url;
    img.alt       = "";
    img.className = "fc-course-header-img";
    body.prepend(img);

    console.log("✅ Header injected for", slug);
  }

  // 4) poll every 300ms
  setInterval(tryInject, 300);
})();
</script>