Any plugin/ theme that display tags in side the post content regardless the screen size ?

jsmith

For example, with the default tags display location is

would like to display as:

Understand this may not the best option for small screen size while the text of tags long
(we can display them in multiple lines?)

The idea result just edited through console. (note that when the screen size is a mobile phone the tag is not even displayed in the post/header.)

Any such plugin or theme automatically display such result?
Thank you.

brazzerstop

This is NodeBB, nothing is impossible here

You can edit the topic template in persona theme, for example in this code:

Move div class of tags to the post class, after </li> in this:

I am was't try to do it for the test, but you can try...

jsmith

@brazzerstop
is this the right file to be edited

/nodebb/build/public/templates/topic.tpl

?

brazzerstop

@jsmith
The changes need to be made to the files of a Persona theme, found the directory like this:

/path/to/your/nodebb-folder/node_modules/nodebb-theme-persona/templates/

I was try to do this on my forum and I did it, this is what you need to do:

You need edit 2 files - topic.tpl and post.tpl

/node_modules/nodebb-theme-persona/templates/topic.tpl
/node_modules/nodebb-theme-persona/templates/partials/topic/post.tpl

<div class="tags tag-list inline-block hidden-xs">
     <!-- IMPORT partials/topic/tags.tpl -->
</div>

<div class="content" component="post/content" itemprop="text">
{posts.content}

<div class="tags tag-list inline-block hidden-xs">
<!-- IMPORT partials/topic/tags.tpl -->
</div>

</div>

Now run the command to build Nodebb and that's it, ready.

UPD.

(note that when the screen size is a mobile phone the tag is not even displayed in the post/header.)

Yes, you right. To show tags on mobile you need remove hidden-xs in the div class.

<div class="tags tag-list inline-block">
<!-- IMPORT partials/topic/tags.tpl -->
</div>