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
  • 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:

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.