Image double page

package-lock.json

@@ -5767,6 +5767,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenopoly": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/hyphenopoly/-/hyphenopoly-3.4.0.tgz",
+      "integrity": "sha512-FZM+oRkCSGh18RdAo38OuUM1YcteWndUlWWKrTdhoDEARAIDPwuEyib2/ugZtkgL07lDcu/nWi13F1j85Hi5Sw=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -10,6 +10,7 @@
     "babel-runtime": "^6.26.0",
     "gridsome": "^0.7.0",
     "gridsome-source-strapi": "^0.1.3",
+    "hyphenopoly": "^3.4.0",
     "pagedjs": "^0.1.35",
     "vue-markdown": "^2.2.4",
     "vue2-filters": "^0.9.1"

src/css/layout.scss

@@ -43,7 +43,7 @@
 }
 
 .cover-right {
-  background-position: -148mm 50%;
+  background-position: -$largeur 50%;
 }
 
 .grow {
@@ -75,3 +75,21 @@
   justify-content: center;
   align-items: center;
 }
+
+#image-3,#image-3-end{
+  position: absolute;
+  max-width: none;
+  width: 276mm;
+}
+
+#image-3{
+  margin-right: calc(-#{$marge} - #{$fond-perdu});
+  right:0;
+  object-position: calc(276mm / 2) 0;
+}
+
+#image-3-end{
+  margin-left: calc(-#{$marge} - #{$fond-perdu});
+  left:0;
+  object-position: calc(-276mm / 2) 0;
+}

src/pages/Index.vue

@@ -1,13 +1,11 @@
 <template>
 <Layout>
-
   <!-- Mise en page -->
   <!-- introductions -->
   <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
     <VueMarkdown class="intro">{{edge.node.contenu}}
     </VueMarkdown>
   </div>
-
   <div class="blank-page no-folio fill-motif-cross-left" />
   <!-- Auteurs, titre, sous-titre -->
   <div class="column no-folio">
@@ -25,14 +23,11 @@
       <div class="center">
         <img src="/logo_popsu.png" alt="" style="width:2cm;">
       </div>
-
     </div>
   </div>
   <!-- Page de fond -->
   <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: `url(https://popsu-rouen-en.strapi.figli.io/uploads/50424a6a43e44551a4faa699f8ef3caa.JPEG)`, }' />
-
   <!-- Sommaire -->
-
   <div class="column">
     <div class="section-title">
       Sommaire
@@ -47,42 +42,30 @@
       </span>
     </div>
   </div>
-
   <div class="blank-page" />
-
-
-
   <!-- Chapitres -->
-
   <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
     <h2 :id="`chapitres${edge.node.id}`" class="chapter-title canbreak">{{edge.node.Titre}}</h2>
     <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
-
   <!-- Page blanche -->
-
   <div class="blank-page" />
-
-
   <!-- Sections -->
-
-
   <div v-for="edge in orderBy($page.sections.edges,'node.Ordre')">
     <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
     <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
-
-
 </Layout>
 </template>
-
 <script>
 const axios = require('axios'),
   path = require('path'),
   param = require(`../../param.JSON`);
 
+
+
 import {
   Previewer
 } from 'pagedjs'
@@ -95,9 +78,10 @@ export default {
     VueMarkdown
   },
   mounted() {
-    // Ajouter
+
+    // Ajouter les citations
     let citations = Array.from(document.querySelectorAll("blockquote"));
-    citations.forEach((c,index)=>{
+    citations.forEach((c, index) => {
       c.id = `citation-${index}`;
     });
     // Ajouter les images
@@ -115,13 +99,24 @@ export default {
         let found = imgSource.find(element => element.id == img_id);
         img.src = path.join(param.source, found.images.url);
         img.id = `image-${img_id}`;
+        img.parentNode.classList.add("breakBefore");
         let promise = new Promise((resolve, reject) => {
           img.onload = function() {
             let legend = document.createElement("p");
             legend.classList.add("breakAfter");
             legend.classList.add("legend");
             legend.innerHTML = found.legende;
-            img.parentNode.insertBefore(legend, img.nextSibling);
+            legend.id = `legend-${img_id}`;
+            if(found.double){
+              let clone = img.parentNode.cloneNode(true);
+              clone.classList.add("breakBefore");
+              clone.querySelector("img").id += "-end";
+              img.parentNode.insertBefore(clone, img.previousSibling);
+              clone.parentNode.insertBefore(legend, clone.nextSibling);
+
+            }else{
+              img.parentNode.insertBefore(legend, img.nextSibling);
+            }
             resolve();
           }
         });
@@ -133,7 +128,9 @@ export default {
       });
     });
   }
-}
+};
+
+
 </script>
 
 <page-query>