README.rst 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. Requirements
  2. ------------
  3. * pip install pillow beautifulsoup4
  4. Summary
  5. =======
  6. This plug-in:
  7. - 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.
  8. - Also finds any ``div class="figures"`` tags in the content, that contain images and adds the same style to them too.
  9. - If ``RESPONSIVE_IMAGES`` setting is true, it adds ``style="width: ???px; max-width: 100%; height: auto;"`` instead.
  10. - Corrects Alt text: If an img ``alt`` attribute equals the image filename, it sets it to ""
  11. Assuming that the image is 250px wide, it turns this::
  12. <div class="figure">
  13. <img alt="/static/images/image.jpg" src="/static/images/image.jpg" />
  14. <p class="caption">
  15. This is the caption of the figure.
  16. </p>
  17. <div class="legend">
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  19. </div>
  20. </div>
  21. into this::
  22. <div class="figure" style="width: 250px; height: auto;">
  23. <img style="width: 250px; height: auto;" alt="" src="/static/images/image.jpg" />
  24. <p class="caption">
  25. This is the caption of the figure.
  26. </p>
  27. <div class="legend">
  28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  29. </div>
  30. </div>
  31. or this, if ``RESPONSIVE_IMAGES = True``::
  32. <div class="figure" style="width: 250px; max-width: 100%; height: auto;">
  33. <img style="width: 250px; max-width: 100%; height: auto;" alt="" src="/static/images/image.jpg" />
  34. <p class="caption">
  35. This is the caption of the figure.
  36. </p>
  37. <div class="legend">
  38. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  39. </div>
  40. </div>