sambuc/pelican-plugins
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added fixing alt text; updated readme

Browse Source 
Signed-off-by: Duncan Lock <duncan.lock@gmail.com>
This commit is contained in:
Duncan Lock
2013-04-29 12:21:22 -07:00
parent c99a2102f8
commit efa6b8d0c1
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
better_figures_and_images/better_figures_and_images.py
View File

@@ -1,11 +1,13 @@
"""
Better Figures & Images
-------
------------------------
This plugin:
- Adds a style="width: ???px;" to each image in the content
- Adds a style="width: ???px; height: auto;" to each image in the content
- Also adds the width of the contained image to any parent div.figures.
- If RESPONSIVE_IMAGES == True, adds style="max-width: 100%; height: auto;" instead
- Corrects alt text: if alt == image filename, set alt = ''
TODO: Need to add a test.py for this plugin.
@@ -38,7 +40,7 @@ def content_object_init(instance):
if 'img' in content:
for img in soup('img'):
if instance.settings['RESPONSIVE_IMAGES']:
extra_style = 'max-width: 100%;'
extra_style = 'max-width: 100%; height: auto;'
else:
# TODO: Pretty sure this isn't the right way to do this, too hard coded.
# There must be a setting that I should be using?
@@ -50,6 +52,10 @@ def content_object_init(instance):
img['style'] += extra_style
else:
img['style'] = extra_style
if img['alt'] == img['src']:
img['alt'] = ''
fig = img.find_parent('div', 'figure')
if fig:
if fig.get('style'):

24
better_figures_and_images/readme.rst
View File

@@ -4,14 +4,16 @@ Summary
This plug-in:
- Adds a `style="width: ???px;"` attribute to any `<img>` tags in the content, by checking
the dimensions of the image file and adding the appropriate style="width: ???px;" to the `<img>` tag.
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="max-width: 100%; height: auto;"` instead.
- Corrects Alt text: If an img alt attribute = the image filename, it sets it to ""
Assuming that the image is 250px wide, it turns output like this:
<div class="figure" style="width: 250px;">
<img style="width: 250px;" alt="map to buried treasure" src="/static/images/image.jpg" />
<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>
@@ -23,8 +25,8 @@ Assuming that the image is 250px wide, it turns output like this:
into output like this:
<div class="figure" style="width: 250px;">
<img style="width: 250px;" alt="map to buried treasure" src="/static/images/image.jpg" />
<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>
@@ -34,3 +36,15 @@ into output like this:
</div>
</div>
or this, if RESPONSIVE_IMAGES = True:
<div class="figure" style="max-width: 100%; height: auto;">
<img style="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>