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

+
{% if section.background or section.color %} diff --git a/prosopopee/themes/light/static/css/style-page.css b/prosopopee/themes/light/static/css/style-page.css index 2461bf5..f261cd7 100644 --- a/prosopopee/themes/light/static/css/style-page.css +++ b/prosopopee/themes/light/static/css/style-page.css @@ -276,3 +276,23 @@ blockquote:after { vertical-align: -0.2em; font-size: 2em; } + +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/light/templates/sections/paragraph.html b/prosopopee/themes/light/templates/sections/paragraph.html index f9b49b1..e17e68a 100644 --- a/prosopopee/themes/light/templates/sections/paragraph.html +++ b/prosopopee/themes/light/templates/sections/paragraph.html @@ -1,6 +1,26 @@ +{% if settings.settings.light_mode %} +{% set pathstatic = ".." %} +{% else %} +{% set pathstatic = "." %} +{% endif %}
{% if section.title %} -

{{ section.title }}

+

{{ section.title }}

{% 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 %} + {{ image.copy() }} + + + + {% endif %} + {{ section.text }} +

+
diff --git a/prosopopee/themes/material/static/css/style-page.css b/prosopopee/themes/material/static/css/style-page.css index 1176b1d..9cd88e8 100644 --- a/prosopopee/themes/material/static/css/style-page.css +++ b/prosopopee/themes/material/static/css/style-page.css @@ -202,3 +202,16 @@ video.fillWidth { } +span.left { + padding: 0 1.5em 1em 0; + top: 0.25em; +} + +span.right { + padding: 0 0 1em 1.5em; + top: 0.25em; +} + +.clear { + clear: both; +} diff --git a/prosopopee/themes/material/templates/sections/paragraph.html b/prosopopee/themes/material/templates/sections/paragraph.html index d5888f9..7ce952b 100644 --- a/prosopopee/themes/material/templates/sections/paragraph.html +++ b/prosopopee/themes/material/templates/sections/paragraph.html @@ -1,19 +1,46 @@ {% if section.background or section.color %} -
-{% endif %} +
+ {% endif %} -
+
{% if section.title %} -
-

{{ section.title }}

- {% else %} -
- {% endif %} +
+

{{ section.title }}

+ {% 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 }} +

+
+
+
+ + {% if section.background or section.color %}
- -{% if section.background or section.color %} -
{% endif %}