The problem was that in development area, it seemed that the content of the blog post like this one was no longer rendering as HTML, but as simple text, meaning that <br> for example will not be processed into a break, and instead it was just printed as text.
I have tested with different changes, removing completely the new CSS code, text changes, layout changes and so on. But nothing worked, the rendering of HTML was gone, and instead everything was printed as normal text.
But the hard part was that in the current live version everything seemed to be fine, and i couldn't figure out what might be the problem even comparing the old and new templates.
After a few hours i gave up and went to do something else.
Slept over it, and kept on thinking what might be the problem, is it the new design? Is it the new way of doing the chameleon templates? And a lot of thoughts went through my head related to this.
Maybe i needed to use another template tool, something was wrong with the server, or the version of the tools.
The day after, started looking at it again with the kind of sense i needed to change the template tools.
But a last Google search "pyramid chameleon text not displaying as HTML" gave me a good first link for a Stack Overflow post from 14 years ago:
Python Pyramid Chameleon templating language escapes HTML
And there it was in one of the comments:
- when using this ${variable} the contents of the "variable" will be rendered as text.
So from the comments, one simple way of making sure the template doesn't escape the HTML would be to change ${variable} to ${structure: variable} and this way the HTML will be rendered correctly.
Did the change on the development area, and tested and work as expected this time.
I went a bit further, as i like to understand the root cause, and went onto the documentation for Chameleon, and it was actually very clear and visible on the introduction that:
-The ${...} notation is short-hand for text insertion. The Python-expression inside the braces is evaluated and the result included in the output. By default, the string is escaped before insertion. To avoid this, use the structure: prefix:
<div>${structure: ...}</div>
All good now, and clear in the introduction of the documentation, and of course, myself not using this for a long time and doing this for fun, i was not fully aware.
But there was something still bothering me, which was how could it be working in the current live blog, where this was not happening?
So, lets check out the code the the live blog, and compare it fully to the new design code, and not just looking at it, but using a diff tool.
And low and behold, there is was:
<div id="article-content" tal:content="structure content">
${content}
I had missed the "structure" keyword inside the div and only used the variable when i merged/copied the code to the new design (this was also another way of doing the same thing as stated above).
My mistake all along, and just to show that when rushing things, and thinking we have done everything correctly, here was a small mistake with big consequences.
Not really big consequences, but some more work than expected, and a bit of fun also as in the end everything seemed to make sense, and no unexplained magic was happening.