How to add pop tags to blog post thumbnail images

Site URL: https://www.sharedgooods.com

I want to add little colorful circular pop tags to the corner of thumbnail images for my recipes. I've attached an image for reference and here's a link to it: https://www.shopyowie.com/collections/all?view=shop

Can I even code this? I can probably just start creating thumbnail images with the tag on the image itself, but that'll be more work and probably won't look as good!

1 hour ago, jaredvoorhees said:

Site URL: https://www.sharedgooods.com

I want to add little colorful circular pop tags to the corner of thumbnail images for my recipes. I've attached an image for reference and here's a link to it: https://www.shopyowie.com/collections/all?view=shop

Can I even code this? I can probably just start creating thumbnail images with the tag on the image itself, but that'll be more work and probably won't look as good!

You can have a reference with the following link:

31 minutes ago, bangank36 said:

You can have a reference with the following link:

Thank you for the quick reply!
I need to do this on a summary block of blog post entries, though. I don't have products. It's a recipe blog, so I'd like category badges that will host symbols like "V" for vegan or "GF" for gluten free.

1 hour ago, jaredvoorhees said:

Thank you for the quick reply!
I need to do this on a summary block of blog post entries, though. I don't have products. It's a recipe blog, so I'd like category badges that will host symbols like "V" for vegan or "GF" for gluten free.

I 'll check your issue tomorrow 

On 9/29/2021 at 12:15 PM, bangank36 said:

I 'll check your issue tomorrow 

Thank you! Appreciate it.

On 10/1/2021 at 12:16 AM, jaredvoorhees said:

Thank you! Appreciate it.

Sorry for my late. Some steps should be followed:

1. Home > Pages > Access your Blog Page > Settings for your blog item > define the value you want to show in Content > Categories

2. Add to Home > Settings > Advanced > Code Injection > Footer

const summaryId = 'section[data-section-id="6149d5cb660b1e207c5b124b"] .summary-item';
const summaryItems = document.querySelectorAll(summaryId);
summaryItems.forEach(summaryItem => {
	const tag = summaryItem.querySelector('.summary-content .summary-metadata-container .summary-metadata-item a');
	if (tag) {
		const tagSpan = document.createElement('span');
      tagSpan.textContent = tag.innerHTML.split(" ").map(word => {
			return word[0].toUpperCase();
		}).join(" ");
		tagSpan.setAttribute('data-metadata', 'Categories');
		summaryItem.insertAdjacentElement('afterbegin', tagSpan);
	}
})

Note: Remember wrapping the above code with <script></script> tag 

3. Add to Home > Design > Custom Css

.summary-item span[data-metadata="Categories"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #0E9BD8;
  color: #fff;
  position: absolute;
  top: 0;
  right:0;
  z-index:999;
  border-radius: 50%;
    animation: bounce .5s infinite;
}

.summary-content .summary-metadata-container {
  display:none !important;
}

@keyframes bounce {
  0%, 100% {
    transform: scale(.8) rotate(
-10deg) translate(50%,-50%);
    animation-timing-function: ease-out;
}

50% {
    transform: translateY(-5px) scale(.8) rotate(
-10deg) translate(50%,-50%);
    animation-timing-function: ease-in;
}

Support me by pressing 👍 if this useful for you

This is my result after applying the above steps