How the post content is 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>