Adding CSS-classes to HTML-tags After Retrieving Them From Database

Question

For my blog, I want to be able to add css-classes to html-tags when I retrieve them from the DB.

For example, I have in the following in my DB, in a column called body:

<p>
    SO is great
</p>

Then I output it in the View, with sth like this:

{{ blogpost.body }}

But what I actually want to have is this:

<p class="class1 class2 class3">
    SO is great
</p>

How can I do this?

I can only think of using JS and adding the classes but I don't like this idea.

Is there maybe a way to pre-format it and save it ready in the DB? Or is this a bad practice?

Any suggestions are welcome.

it seems to me that you are already using html in your database so using classes in your DB is not going to harm anything. In fact thats how a lot of custom Wordpress, and php plugins work. — Eli Baird
– Eli Baird, Commented Dec 15, 2016 at 14:42
@fuzzybaird OK. How should I go about it? Would you like to create an answer about this? — padawanTony
– padawanTony, Commented Dec 15, 2016 at 14:46
@JuanCarlosOropeza It would slow down the loading a bit. Also I would like to find a cleaner solution (at least cleaner in my opinion) but if you think this is the correct way to go, please feel free to create an answer explaining this and I would be happy to test it out. — padawanTony
– padawanTony, Commented Dec 15, 2016 at 14:47

Juan Carlos Oropeza · Accepted Answer · 2016-12-15 15:24:33Z

1

So instead of

 SELECT body

can you try:

SELECT REPLACE (body, '<p>', '<p class="class1 class2 class3">') as body

OR UPDATE in your db

UPDATE yourTable
SET body = REPLACE (body, '<p>', '<p class="class1 class2 class3">')
WHERE body LIKE '<p>%'

edited Dec 15, 2016 at 15:24

answered Dec 15, 2016 at 15:09

Juan Carlos Oropeza

48.4k14 gold badges87 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

padawanTony Over a year ago

Thank you for the answer. My objection is that such a query would be unreadable (imagine doing this for every html-element). I think a better option would be to modify the body before inserting it into the DB.

Juan Carlos Oropeza Over a year ago

Check update version, of course you have to expand it. But you can make it a function

jjok · Accepted Answer · 2016-12-15 16:40:46Z

0

Can you put it in a container?

<div class="{{ blogpost.tags }}">
    {{ blogpost.body }}
</div>

answered Dec 15, 2016 at 16:40

jjok

6195 silver badges12 bronze badges

Collectives™ on Stack Overflow

Adding CSS-classes to HTML-tags After Retrieving Them From Database

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related