<!-- 
Blog featured images plugin v1.0 by opsquare.co 
-->
<script>
 document.addEventListener("DOMContentLoaded", () => {

   /*** Plugin options ***/
   const position = 'after'; // before or after the title
   /*** Stop editing ***/

   const title = document.querySelector(".blog-item-top-wrapper");
   if (!title || document.querySelector('.op-single-blog-image')) return;

   title.classList.add(`op-blog-image-${position}`);

   // Prefer meta[name="thumbnailUrl"], fallback to og:image
   const metaThumb = document.querySelector('meta[name="thumbnailUrl"]') 
                  || document.querySelector('meta[property="og:image"]');
   const imageURL = metaThumb?.getAttribute("content");
   if (!imageURL) return;

   const imageHTML = `<img src="${imageURL}" alt="" class="op-single-blog-image">`;
   title.insertAdjacentHTML(position === 'before' ? 'beforeend' : 'afterbegin', imageHTML);
 });
</script>

<style>
  :root {
    --op-featured-image-spacing: 3rem; /* Image margin */
    --op-featured-image-aspect-ratio: initial; /* Image aspect ratio: 16/9, 4/3, etc. */
  }

  .op-single-blog-image {
    aspect-ratio: var(--op-featured-image-aspect-ratio); 
    object-fit: cover;
    max-width: 100%;
  }

  .op-blog-image-before .op-single-blog-image {
    border: 1px solid red;
    margin-bottom: var(--op-featured-image-spacing) !important;
  }

  .op-blog-image-after .op-single-blog-image {
    order: 3;
    margin-top: var(--op-featured-image-spacing);
  }

  .blog-item-title .entry-title {
    line-height: 1 !important;
  }
</style>

<!-- Blog featured images plugin end -->

`