Added fixing alt text; updated readme

Signed-off-by: Duncan Lock <duncan.lock@gmail.com>

better_figures_and_images/better_figures_and_images.py

@@ -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'):

better_figures_and_images/readme.rst

@@ -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>