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: + +
+ /static/images/image.jpg +

+ This is the caption of the figure. +

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
+
+ +into output like this: + +
+ +

+ This is the caption of the figure. +

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
+
+ +or this, if RESPONSIVE_IMAGES = True: + +
+ +

+ This is the caption of the figure. +

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
+
\ No newline at end of file diff --git a/better_figures_and_images/test_data/dummy-200x200.png b/better_figures_and_images/test_data/dummy-200x200.png new file mode 100644 index 0000000..598d754 Binary files /dev/null and b/better_figures_and_images/test_data/dummy-200x200.png differ diff --git a/better_figures_and_images/test_data/dummy-250x300.png b/better_figures_and_images/test_data/dummy-250x300.png new file mode 100644 index 0000000..f21336a Binary files /dev/null and b/better_figures_and_images/test_data/dummy-250x300.png differ diff --git a/better_figures_and_images/test_data/dummy-800x300.png b/better_figures_and_images/test_data/dummy-800x300.png new file mode 100644 index 0000000..4122c88 Binary files /dev/null and b/better_figures_and_images/test_data/dummy-800x300.png differ diff --git a/better_figures_and_images/test_data/images-test.html b/better_figures_and_images/test_data/images-test.html new file mode 100644 index 0000000..98a8e64 --- /dev/null +++ b/better_figures_and_images/test_data/images-test.html @@ -0,0 +1,44 @@ + + + + + Better Figures & Images Test + + +
+ 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. +

+
+ map to buried treasure 2 +

+ 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. +

+ /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. +

+ /static/images/dummy-250x300.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. +

+ + \ 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