diff --git a/docs/changelog.rst b/docs/changelog.rst index c541fd0..dec6cc8 100644 --- a/docs/changelog.rst +++ b/docs/changelog.rst @@ -9,6 +9,7 @@ Changelog * Add quotes section https://prosopopee.readthedocs.org/en/latest/sections.html#quote by beudbeud * Add deploy and preview option https://prosopopee.readthedocs.io/en/latest/build.html#preview by beudbeud * Load only css and jss if the section is used by beudbeud + * Possibility to add floating image in paragraph by beudbeud https://prosopopee.readthedocs.org/en/latest/sections.html#paragraph 0.4 (2016-12-11) diff --git a/docs/sections.rst b/docs/sections.rst index 62670f4..fe718cf 100644 --- a/docs/sections.rst +++ b/docs/sections.rst @@ -111,6 +111,17 @@ How to use it:: title: the title text: Some text, HTML is allowed. +Since 0.5 you can add a floating image in paragraph:: + + - type: paragraph + title: the title + text: Some text, HTML is allowed. + image: image.jpg + float: right + size: 150px + +By default if you don't set float and size the image will be on left with a size of 250px + HTML ____ diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css index fd79b81..a5854df 100644 --- a/prosopopee/themes/exposure/static/css/style-page.css +++ b/prosopopee/themes/exposure/static/css/style-page.css @@ -497,3 +497,23 @@ video.responsive-video { margin-left: 11.5%; margin-right: 11.5%; } + +span.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; +} + +span.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; +} + +span.left img, span.right img { + width: 100%; +} + +.clear { + clear: both; +} diff --git a/prosopopee/themes/exposure/templates/sections/paragraph.html b/prosopopee/themes/exposure/templates/sections/paragraph.html index c870afe..3579408 100644 --- a/prosopopee/themes/exposure/templates/sections/paragraph.html +++ b/prosopopee/themes/exposure/templates/sections/paragraph.html @@ -7,7 +7,34 @@ {% else %}
{% endif %} -{{ section.text }}
+
+ {% if section.image %}
+ {% set image = Image(section.image) %}
+ {% if section.image.float %}
+ {% set float = section.image.float %}
+ {% else %}
+ {% set float = 'left' %}
+ {% endif %}
+ {% if section.image.size %}
+ {% set image_resize = section.image.size %}
+ {% else %}
+ {% set image_resize = '250px' %}
+ {% endif %}
+ {{ image.copy() }}
+
+
+
+
+
+ {% endif %}
+ {{ section.text }}
+
{{ section.text }}
+
+ {% if section.image %}
+ {% set image = Image(section.image) %}
+ {% if section.image.float %}
+ {% set float = section.image.float %}
+ {% else %}
+ {% set float = 'left' %}
+ {% endif %}
+ {{ image.copy() }}
+
+
+
+ {% endif %}
+ {{ section.text }}
+
{{ section.text }}
-
+ {% if section.image %}
+ {% set image = Image(section.image) %}
+ {% if section.image.float %}
+ {% set float = section.image.float %}
+ {% else %}
+ {% set float = 'left' %}
+ {% endif %}
+ {% if section.image.size %}
+ {% set image_resize = section.image.size %}
+ {% else %}
+ {% set image_resize = '250px' %}
+ {% endif %}
+ {{ image.copy() }}
+
+
+
+
+
+ {% endif %}
+ {{ section.text }}
+