images #825 #784 #783

assets/css/app.scss

@@ -537,6 +537,18 @@ section[role="main-content"]{
 
           }
 
+          figure{
+            // outline: 1px solid red;
+            background-color: $grisclair;
+            margin:1em 0;
+            img{
+              width: 100%;
+            }
+            figcaption{
+              @include fontcaption
+              padding: 0.5em;
+            }
+          }
         }
       }
     }
@@ -626,7 +638,7 @@ section[role="main-content"]{
         top:$top;
         right:0;
         background-color: #fff;
-        width:40%;
+        width:percentage(10/$default_sum);
         box-sizing: border-box;
         padding-top: 1em;
         padding-bottom: 1em;

assets/css/base/_fonts.scss

@@ -85,3 +85,9 @@ footer[role="tools"] .row>nav{
   font-weight: 400;
   margin:0;
 }
+
+@mixin fontcaption {
+  @include fontsans;
+  font-size: 0.643em;
+  line-height: 1.1em;
+}

assets/css/base/_variables.scss

@@ -6,4 +6,5 @@ $default_sum: 12; // total number of columns
 
 $small-bp:768px;
 $med-bp:1080px;
+$ipad-bp: 1536px;
 $large-bp:1900px;

src/components/Content/EdText.vue

@@ -57,6 +57,7 @@ export default {
       `</a>` +
       `${this.tei}</div>`
       this.parseLinks()
+      this.parseFigures()
       // this.parsePageBreaks()
       // console.log('EdText: builded html', this.html)
     },
@@ -99,6 +100,30 @@ export default {
         // console.log('this.html', this.html)
       }
     },
+    parseFigures () {
+      console.log('parseFigures this.html', this.html)
+      let imgs = this.html.match(/<img[^>]*>/g)
+      console.log('imgs', imgs)
+      if (imgs) {
+        let imgparts, newsrc, newimg
+        for (var i = 0; i < imgs.length; i++) {
+          // console.log(`link ${i}:`, links[i])
+          imgparts = RegExp(/<img src="(.+)" alt="(.+)">/g).exec(imgs[i], 'g')
+          console.log('imgparts', imgparts)
+          if (!imgparts) {
+            console.warn(`img ${i} malformed:`, imgs[i])
+          } else {
+            newsrc = `${imgparts[1]}/full/1000,/0/native.jpg`
+            newimg = `<img` +
+              ` src="${newsrc}"` +
+              ` alt="${imgparts[2]}"` +
+              `/>`
+            // console.log('newlink', newlink)
+            this.html = this.html.replace(imgs[i], newimg)
+          }
+        }
+      }
+    },
     // parsePageBreaks () {
     //   let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
     //   console.log('pagebreaks', pbs)