Jump to content

How to display categories and tags inside a blogpost?

Recommended Posts

Site URL: https://www.qnb-tuebingen.de/energieberaterinnen

I would like to display the tags of a blogpost within the blogpost. I want them to be "listed" in the middle of the text. As I see it, I need a code block and custom css for this. I don't really know how to do it, though.

This is how a blogpost should look like:

Quote

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

[Code Block start]

  • Tag 1 (Link)
  • Tag 2 (Link)
  • Tag 3 (Link)

[Code Block end]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Background: I use Squarespace to create a search system for our partner network (energy and building related). For this I use the blog system, because it allows practical features like categories/tags, excerpts and easy listing. I use the categories as exact job titles (energy consultant, carpenter, heating construction, electrical engineering etc.) and the tags for concrete services (construction planning, energy consulting, termography etc.). Our customers can now search for specific services or professions and get a list of all the craftsmen for that category/tag in our network. So for my purposes, the blogposts are profiles where the services offered should be listed.

You can look up the site and the profils aka blogposts, but it is in German. Here is a list of energy conultant profiles (using summary blogs).

https://www.qnb-tuebingen.de/energieberaterinnen

I am grateful for any help!

Link to comment

Thanks for the answer.
I actually only need the tags as a link within the blog text. In my optimal idea, I have a code block that can be copied (we have 300 profiles) and automatically lists the tags of the blog post one below the other.
So if I change the tags, the list inside the text must also change.

The layout should look something like this in the end:

wr456rs6srthfjd86r5e4wsa.jpg

Link to comment
  • 3 weeks later...

I wanted to kindly ask here again if anyone can think of a solution to my problem. Maybe someone just has an idea about a useful starting point or even workaround to place the tags of a blogpost in the blogpost itself.

Or maybe someone has a completely different idea to create profiles in Squarespace where features like tags can be used in the profile.

I am grateful for any help!

Edited by AFKSTue
Link to comment

The first step is to ensure that the metadata you require (tags, categories or both) is enabled in the Blog Post Site Styles. I wasn't sure which you required because the title of this thread mentioned both but the mockup image only showed tags 🙂

image.png.527f63f906282a467743684574c70c11.png

Once you have enabled the required metadata, it will be available on the page and can be manipulated with code. 

CSS or JavaScript

If you only need to format the tags or the categories in their current positions then you'll be able to do this with a few simple lines of Custom CSS. However, if you want to place the tags or categories somewhere specific on the page, you'll need to use JavaScript (JS).

Using JavaScript

If you want to use JS to place the metadata into the body of the post, you'll first need to insert a 'placeholder' to tell the code where you want the metadata to appear. You'll need to do this manually in each blog post so it will be a good idea to add it to a blank post that has been laid out as a 'template' and then duplicate this template for each new post.

To create a placeholder, add a Code Block, set to HTML with Display Source toggled off.

In the Code Block add something like this:

<div class="myMetadata"></div>

After adding the placeholder element, code can be written to query the tag (or category) metadata in the post and then, if metadata is found and the placeholder exists, insert the metadata into the placeholder.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

If you add the code block and placeholder to one of the posts, and confirm what you require (in terms of tags and/or categories) we may be able to get you started.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Okay, I'll try to be as precise as possible.

It's about the tags. I have now added the code block you suggested (With your code) to a "sample profile" (Which is actually a blog post). In the place of the placeholder, I would now like to have the tags of the blogpost listed instead.

Link to comment

Can you point me at the sample profile? 🙂

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Does this meet your needs?

image.thumb.png.256f8deda1335344b951415a0e6d867a.png

 

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
4 hours ago, AFKSTue said:

The only addition I would have would be...

We call that project scope creep 🙂

I've sent you some JavaScript for you to try. Let me know how you get on.

image.thumb.png.0005ded2d1b38e89228088b37e072b2a.png

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

I got your code and pasted it. It works perfectly! This is just amazing Paul. Thank you very much!

Your code looks scary and I don't know how someone could come up with something like that, but it does exactly what it is supposed to do 😃

Should I add the code here in case others have the same problem?

Edited by AFKSTue
Link to comment
1 hour ago, AFKSTue said:

I got your code and pasted it. It works perfectly! This is just amazing Paul. Thank you very much!

You are very welcome.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.