add floating image in paragraph section

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)
 

docs/sections.rst

@@ -111,6 +111,17 @@ How to use it::
     title: the title
     text: Some text, HTML <b>is allowed</b>.
 
+Since 0.5 you can add a floating image in paragraph::
+
+  - type: paragraph
+    title: the title
+    text: Some text, HTML <b>is allowed</b>.
+    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
 ____
 

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

prosopopee/themes/exposure/templates/sections/paragraph.html

@@ -7,7 +7,34 @@
     {% else %}
     <div class="separator"></div>
     {% endif %}
-    <p>{{ section.text }}</p>
+    <p>
+    {% 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() }}
+    <span class="{{ float }} baguette">
+      <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
+         data-at-450="{{ image.generate_thumbnail("x450") }}"
+         data-at-800="{{ image.generate_thumbnail("x800") }}"
+         data-at-1366="{{ image.generate_thumbnail("x1366") }}"
+         data-at-1920="{{ image.generate_thumbnail("x1920") }}"
+         >
+         <img class="lazy" style="width: {{ image_resize }};" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt=""/>
+      </a>
+    </span>
+    {% endif %}
+    {{ section.text }}
+    </p>
+    <div class="clear"></div>
   </section>
   {% if section.background or section.color %}
 </div>

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

prosopopee/themes/light/templates/sections/paragraph.html

@@ -1,6 +1,26 @@
+{% if settings.settings.light_mode %}
+{% set pathstatic = ".." %}
+{% else %}
+{% set pathstatic = "." %}
+{% endif %}
 <section class="paragraph">
   {% if section.title %}
   <h3>{{ section.title }}</h3>
   {% endif %}
-  <p>{{ section.text }}</p>
+  <p>
+  {% if section.image %}
+  {% set image = Image(section.image) %}
+  {% if section.image.float %}
+  {% set float = section.image.float %}
+  {% else %}
+  {% set float = 'left' %}
+  {% endif %}
+  {{ image.copy() }}
+  <span class="{{ float }}">
+    <img src="{{ pathstatic }}/{{ image.generate_thumbnail("x150") }}" alt=""/>
+  </span>
+  {% endif %}
+  {{ section.text }}
+  </p>
+  <div class="clear"></div>
 </section>

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

prosopopee/themes/material/templates/sections/paragraph.html

@@ -1,19 +1,46 @@
 {% if section.background or section.color %}
-    <div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
+<div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
-{% endif %}
+  {% endif %}
 
-<div class="container">
+  <div class="container">
     {% if section.title %}
-        <div id="{{ section.title }}" class="scrollspy">
+    <div id="{{ section.title }}">
       <h2>{{ section.title }}</h2>
       {% else %}
       <div class="separator"></div>
       {% endif %}
 
-    <p class="flow-text">{{ section.text }}</p>
+      <p class="flow-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() }}
+			<span class="{{ float }} baguette">
+				<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
+			 		data-at-450="{{ image.generate_thumbnail("x450") }}"
+					data-at-800="{{ image.generate_thumbnail("x800") }}"
+					data-at-1366="{{ image.generate_thumbnail("x1366") }}"
+ 					data-at-1920="{{ image.generate_thumbnail("x1920") }}"
+ 				>
+					<img class="lazy" style="width: {{ image_resize }};" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt=""/>
+				</a>
+			</span>
+			{% endif %}
+			{{ section.text }}
+			</p>
+      <div class="clear"></div>
+		</div>
 	</div>
-</div>
 
-{% if section.background or section.color %}
+	{% if section.background or section.color %}
-    </div>
+</div>
 {% endif %}