varia
/
manymanymany-varia-websites
forked from varia/varia.website
14
1
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
many many many Varia's websites, work in progress: https://many.vvvvvvaria.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 Commits
3 Branches
0 Tags
147 MiB
 
 
 
 
 
 
Tree: 60186ea3bd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '60186ea3bd'
${ noResults }
manymanymany-varia-websites/plugins/better_figures_and_images/README.rst

1.9 KiB
Raw Blame History 

Requirements
------------

* pip install pillow beautifulsoup4

Summary
=======

This plug-in:

- Adds a ``style="width: ???px; height: auto;"`` attribute to any ``<img>`` tags in the content, by checking the dimensions of the image file and adding the appropriate ``style="width: ???px; height: auto;"`` to the ``<img>`` tag.

- Also finds any ``div class="figures"`` tags in the content, that contain images and adds the same style to them too.

- If ``RESPONSIVE_IMAGES`` setting is true, it adds ``style="width: ???px; max-width: 100%; height: auto;"`` instead.

- Corrects Alt text: If an img ``alt`` attribute equals the image filename, it sets it to ""


Assuming that the image is 250px wide, it turns this::

  <div class="figure">
    <img alt="/static/images/image.jpg" src="/static/images/image.jpg" />
    <p class="caption">
      This is the caption of the figure.
    </p>
    <div class="legend">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 	        tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

into this::

  <div class="figure" style="width: 250px; height: auto;">
    <img style="width: 250px; height: auto;" alt="" src="/static/images/image.jpg" />
    <p class="caption">
      This is the caption of the figure.
    </p>
    <div class="legend">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

or this, if ``RESPONSIVE_IMAGES = True``::

  <div class="figure" style="width: 250px; max-width: 100%; height: auto;">
    <img style="width: 250px; max-width: 100%; height: auto;" alt="" src="/static/images/image.jpg" />
    <p class="caption">
      This is the caption of the figure.
    </p>
    <div class="legend">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>