How to display categories and tags inside a blogpost?

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!

Can you describe desired layout of tags list? We can help easier.

Or something like this?

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:

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!

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 🙂

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.

I was already afraid that it would come down to javascript. Unfortunately I'm not advanced enough for that. I'll have to come up with something else.
But thanks in any case for your detailed and precise answer!

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.

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.

Can you point me at the sample profile? 🙂

Sure. But keep in mind, that this is a German site 😀

https://www.qnb-tuebingen.de/partnersuche/mmustermann

The code block with the placeholder is right under "Leistungsportfolio" in the middle section.

Does this meet your needs?

This looks very good. The only addition I would have would be a listing via bulleted list.

Like so

• Tag1
• Tag2
• Tag3

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.

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?

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.

Hi @paul2009 and @AFKSTue,

Apologies for digging this topic up, but could you please share the code you mentioned? I'm trying to do the exact same thing.

Thanks in advance, Eduardo

Hello @paul2009 and @AFKSTue,
This solution would be helpful for me as well. Would it be possible to see the code solution? Thank you!