How is the post and page content modified before the output?
Content generated in the post editor needs some improvements before displaying on your static website. That's why Publii applies some modifications to cover most common issues and problems. Below there is a complete list of all modifications applied to the content before display in your theme.
The operations listed below are in the same order as they are done by the Publii renderer, because some operations must be processed before others.
Remove Table of Contents id attribute if there is no ToC
If user will add table of contents and later will remove it, the post content contains unnecessary id attributes so they should be removed from the content. Remember: this operation is performed only if table of contents not exists in the post content.
For example:
<h2 id='mcetoc_1eoa987if5'>Heading in post</h2>
Will produce:
<h2>Heading in post</h2>
Improve download attributes
Post editors usually generates the download
attribute as download='download'
. It is shortened just to the download
.
For example:
<a href="test.pdf" download='download'>Link</a>
Is transformed into:
<a href="test.pdf" download>Link</a>
Remove contenteditable attributes
TinyMCE generates sometimes the contenteditable
attributes in the output, which allows edit of the specific container content. Publii removes all occurrences of such attributes in the final output of the post content.
For example:
<figcaption contenteditable>Test caption</figcaption>
Is transformed into:
<figcaption>Test caption</figcaption>
Remove the last empty paragraph
If your post content contains at the end an empty paragraph - Publii will remove it. Usually such paragraphs are unintended, that's why they are automatically removed.
For example:
<p>Lorem ipsum dolor</p>
<p>Sit amet</p>
<p> </p>
Will produce:
<p>Lorem ipsum dolor</p>
<p>Sit amet</p>
Add srcset and sizes attributes to images
Every image in the post content is analyzed and the proper values of the srcset and sizes attributes are added to images. Thanks to this operation it is possible to support responsive images in Publii.
For example:
<img
width="1482"
height="939"
src="test-image.png"
alt="Test"
loading="lazy" />
Will produce (the output depends from your responsive images settings in your theme config):
<img
width="1482"
height="939"
src="test-image.png"
alt="Test"
loading="lazy"
srcset="test-image.png 1482w,
test-image-480x304.png 480w,
test-image-748x474.png 748w,
test-image-768x487.png 768w,
test-image-300x190.png 300w,
test-image-1024x649.png 1024w"
sizes="(min-width:160em) 20vw,
(min-width:75em) 33vw,
(min-width: 37.5em) 50vw,
480px" />
Add lazy loading
For every <img>
, <video>
, <audio>
and <iframe>
elements the loading="lazy" attribute is added automatically to improve the page speed of your static websites generated with Publii.
For example:
<img src="test.png" alt="" />
<video src="test.mp4"></video>
<audio src="test.mp3"></audio>
<iframe src="test.html"></iframe>
Will produce:
<img loading="lazy" src="test.png" alt="" />
<video loading="lazy" src="test.mp4"></video>
<audio loading="lazy" src="test.mp3"></audio>
<iframe loading="lazy" src="test.html"></iframe>
Wrap images into figure elements
For posts built with TinyMCE and Markdown editors there is performed an additional operation of wrapping the images inside paragraphs into figure elements with the same CSS classes as the image contains.
For example:
<p><img src="#" class="test-image" alt="" /></p>
Is transformed into:
<figure class="test-image">
<img src="#" alt="" />
</figure>
Wrap galleries into additional div
For posts built with TinyMCE editor galleries are wrapped into an additional div with gallery-wrapper class:
<div class="gallery gallery-wrapper--wide">
<!-- gallery content -->
</div>
Will produce:
<div class="gallery-wrapper gallery-wrapper-wide">
<div class="gallery">
<!-- gallery content -->
</div>
</div>
Remove double slashes from gallery images URLs
Sometimes post editors creates URLs with double slashes in galleries - Publii filters these URLs to achieve a proper URL without additional slashes:
https://www.example.com/media//gallery/image.png
Will output:
https://www.example.com/media/gallery/image.png
Remove paragraphs around iframes
Sometimes the <iframe>
tags are wrapped into paragraphs. These paragraphs will be automatically removed during creating post content output:
<p><iframe src="test.html"></iframe></p>
Will be transformed into:
<iframe src="test.html"></iframe>
Make iframes responsive
To make <iframe>
elements responsive - they are wrapped into additional <div>
element with post__iframe
CSS class:
<iframe src="test.html"></iframe>
Will be transformed into:
<div class="post__iframe"><iframe src="test.html"></iframe></div>
If you want to disable this feature for some <iframe>
elements please add data-responsive="false"
attribute to iframes which should not be wrapped into an additional <div>
element.
Remove CDATA sections
TinyMCE adds additional CDATA sections to the scripts inside the post content - they are removed in the final output:
<script><![CDATA[/*script content*/]]></script>
Will be transformed into:
<script>/*script content*/</script>