nextbitlabs / Rapido

Write your blog posts with semantic HTML.
https://nextbitlabs.github.io/Rapido/
MIT License
23 stars 4 forks source link

close #120 | Allow full width images #121

Closed riccardoscalco closed 5 years ago

riccardoscalco commented 5 years ago

The <img> element, within or not the <figure> element, has a width of 600px on large screens. Authors may want to show images of different width, this is a style change and Rapido does not introduce different styles for the same semantic element. CSS classes are out of scope, therefore authors must opt for a customisation.

Rapido can, and should, simplify customisations as much as possible. The scope of this PR is to obtain full-width images with <img src="..." style="width: 100%"> without breaking the style of other elements.

<section>
  ...
  <figure>
    <img src="..." style="width: 100%">
    <figcaption>
      ...
    </figcaption>
  </figure>
  ...
</section>
<section>
  ...
  <img src="..." style="width: 100%">
  ...
</section>

The previous snippets work also in the header and footer.

The same changes have been applied also to elements <div> (for tables), <pre>, and <video>. After these changes, authors may assign a custom width to tables, code snippets, images and videos in the article sections, header and footer.

PR https://github.com/nextbitlabs/Rapido/pull/122 describes in the documentation the possibility to customise the width of some elements.