Jump to content

How to add pop tags to blog post thumbnail images

Recommended Posts

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!

Screen Shot 2021-09-29 at 8.17.08 AM.png

Link to comment
  • Replies 6
  • Views 568
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Screen Shot 2021-09-29 at 8.17.08 AM.png

You can have a reference with the following link:

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

Link to comment
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 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

This is my result after applying the above steps

 

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.