diff --git a/better_figures_and_images/__init__.py b/better_figures_and_images/__init__.py
new file mode 100644
index 0000000..b8fefc4
--- /dev/null
+++ b/better_figures_and_images/__init__.py
@@ -0,0 +1 @@
+from .better_figures_and_images import *
diff --git a/better_figures_and_images/better_figures_and_images.py b/better_figures_and_images/better_figures_and_images.py
new file mode 100644
index 0000000..51f3376
--- /dev/null
+++ b/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)
diff --git a/better_figures_and_images/readme.rst b/better_figures_and_images/readme.rst
new file mode 100644
index 0000000..6614609
--- /dev/null
+++ b/better_figures_and_images/readme.rst
@@ -0,0 +1,50 @@
+Summary
+===========
+
+This plug-in:
+
+- Adds a `style="width: ???px; height: auto;"` attribute to any `` tags in the content, by checking
+the dimensions of the image file and adding the appropriate `style="width: ???px; height: auto;"` to the `
` 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:
+
+
+ + This is the caption of the figure. +
+
+ + This is the caption of the figure. +
+
+ + This is the caption of the figure. +
+
+ + This is the caption of the figure (a simple 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. +
+
+ + 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. 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. +
++ 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. +
+ + \ No newline at end of file diff --git a/better_figures_and_images/test_data/images-test.rst b/better_figures_and_images/test_data/images-test.rst new file mode 100644 index 0000000..b1104ba --- /dev/null +++ b/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. \ No newline at end of file