Merge pull request #32 from dflock/better_figures_and_images

Better Figures & Images Plugin

better_figures_and_images/__init__.py

@@ -0,0 +1 @@
+from .better_figures_and_images import *

better_figures_and_images/better_figures_and_images.py

@@ -0,0 +1,60 @@
+"""
+Better Figures & Images
+------------------------
+
+This plugin:
+
+- 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, also adds style="max-width: 100%;"
+- Corrects alt text: if alt == image filename, set alt = ''
+
+TODO: Need to add a test.py for this plugin.
+
+"""
+
+import os
+
+from pelican import signals
+
+from bs4 import BeautifulSoup
+from PIL import Image
+
+
+def content_object_init(instance):
+
+    if instance._content is not None:
+        content = instance._content
+        soup = BeautifulSoup(content)
+
+        if 'img' in content:
+            for img in soup('img'):
+                # 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?
+                src = instance.settings['PATH'] + '/images/' + os.path.split(img['src'])[1]
+                im = Image.open(src)
+                extra_style = 'width: {}px; height: auto;'.format(im.size[0])
+
+                if instance.settings['RESPONSIVE_IMAGES']:
+                    extra_style += ' max-width: 100%;'
+
+                if img.get('style'):
+                    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'):
+                        fig['style'] += extra_style
+                    else:
+                        fig['style'] = extra_style
+
+        instance._content = soup.decode()
+
+
+def register():
+    signals.content_object_init.connect(content_object_init)

better_figures_and_images/readme.rst

@@ -0,0 +1,50 @@
+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 = the image filename, it sets it to ""
+
+
+Assuming that the image is 250px wide, it turns output like 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 output like 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>

better_figures_and_images/test_data/images-test.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Better Figures &amp; Images Test</title>
+    </head>
+    <body>
+        <div class="figure">
+            <img alt="map to buried treasure" src="/static/images/dummy-200x200.png">
+            <p class="caption">
+                This is the caption of the figure (a simple paragraph).
+            </p>
+            <div class="legend">
+                The legend consists of all elements after the caption. In this case, the legend consists of this paragraph.
+            </div>
+        </div>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <div class="figure align-right">
+            <img alt="map to buried treasure 2" src="/static/images/dummy-250x300.png">
+            <p class="caption">
+                This is the second image caption.
+            </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>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <img alt="/static/images/dummy-200x200.png" src="/static/images/dummy-200x200.png">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <img alt="/static/images/dummy-250x300.png" class="align-right" src="/static/images/dummy-250x300.png">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </body>
+</html>

better_figures_and_images/test_data/images-test.rst

@@ -0,0 +1,75 @@
+:title: Images Test
+:slug: images-test
+:date: 2013-04-23 15:59:39
+:tags: images, test
+
+.. figure:: /static/images/dummy-800x300.png
+
+	This is the caption of the figure (a simple paragraph).
+
+	The legend consists of all elements after the caption.  In this
+	case, the legend consists of this paragraph.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+.. figure:: /static/images/dummy-200x200.png
+	:alt: map to buried treasure
+
+	This is the caption of the figure (a simple paragraph).
+
+	The legend consists of all elements after the caption.  In this
+	case, the legend consists of this paragraph.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+.. figure:: /static/images/dummy-250x300.png
+	:alt: map to buried treasure 2
+	:align: right
+
+	This is the second image caption.
+
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+.. image:: /static/images/dummy-200x200.png
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+.. image:: /static/images/dummy-250x300.png
+	:align: right
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.