From da4973979e6e0f46007479942c6146fd89fb2ecc Mon Sep 17 00:00:00 2001 From: trendschau Date: Tue, 4 Jan 2022 21:50:38 +0100 Subject: [PATCH] Version 1.5.2 image width,height and aspect ratio --- system/author/css/style.css | 8 ++ system/author/js/vue-blox.js | 197 ++++++++++++++++++++++++++------- system/author/js/vue-shared.js | 2 +- themes/cyanine/css/style.css | 4 +- 4 files changed, 169 insertions(+), 42 deletions(-) diff --git a/system/author/css/style.css b/system/author/css/style.css index abc6512..0be1efb 100644 --- a/system/author/css/style.css +++ b/system/author/css/style.css @@ -159,6 +159,13 @@ input.upload{ opacity: 0; } +.imgsizes::after{ + content: "px"; + margin-left: -30px; + color: #ddd; + font-weight: bold; +} + /* fix wrong text-align/family */ input, textarea, button {font-family: arial, sans-serif} @@ -2605,6 +2612,7 @@ button.delDL i:hover{ display: block; margin: auto; max-width: 100%; + height: auto; } .blox img.youtube{ position: relative; diff --git a/system/author/js/vue-blox.js b/system/author/js/vue-blox.js index b808bbd..228e2a0 100644 --- a/system/author/js/vue-blox.js +++ b/system/author/js/vue-blox.js @@ -1565,6 +1565,7 @@ const imageComponent = Vue.component('image-component', { '' + '' + '' + + '
'+ '' + '' + '', @@ -1581,6 +1582,11 @@ const imageComponent = Vue.component('image-component', { imglink: '', imgclass: 'center', imgid: '', + imgwidth: 0, + imgheight: 0, + originalwidth: 0, + originalheight: 0, + imgloading: 'lazy', imgattr: '', imgfile: '', showresize: true, @@ -1593,57 +1599,77 @@ const imageComponent = Vue.component('image-component', { if(this.compmarkdown) { - this.showresize = false; + this.showresize = false; - this.imgmeta = true; + this.imgmeta = true; + + var imgmarkdown = this.compmarkdown; + + var imgcaption = imgmarkdown.match(/\*.*?\*/); + if(imgcaption) + { + this.imgcaption = imgcaption[0].slice(1,-1); + + imgmarkdown = imgmarkdown.replace(this.imgcaption,''); + imgmarkdown = imgmarkdown.replace(/\r?\n|\r/g,''); - var imgmarkdown = this.compmarkdown; - - var imgcaption = imgmarkdown.match(/\*.*?\*/); - if(imgcaption){ - this.imgcaption = imgcaption[0].slice(1,-1); - imgmarkdown = imgmarkdown.replace(this.imgcaption,''); - imgmarkdown = imgmarkdown.replace(/\r?\n|\r/g,''); } - + if(this.compmarkdown[0] == '[') { - var imglink = this.compmarkdown.match(/\(.*?\)/g); + var imglink = this.compmarkdown.match(/\(.*?\)/g); if(imglink[1]) { - this.imglink = imglink[1].slice(1,-1); - imgmarkdown = imgmarkdown.replace(imglink[1],''); - imgmarkdown = imgmarkdown.slice(1, -1); + this.imglink = imglink[1].slice(1,-1); + + imgmarkdown = imgmarkdown.replace(imglink[1],''); + imgmarkdown = imgmarkdown.slice(1, -1); + } } - - var imgtitle = imgmarkdown.match(/\".*?\"/); - if(imgtitle) - { - this.imgtitle = imgtitle[0].slice(1,-1); - imgmarkdown = imgmarkdown.replace(imgtitle[0], ''); - } - - var imgalt = imgmarkdown.match(/\[.*?\]/); + + var imgalt = imgmarkdown.match(/\[.*?\]/); if(imgalt) { - this.imgalt = imgalt[0].slice(1,-1); + this.imgalt = imgalt[0].slice(1,-1); } - - var imgattr = imgmarkdown.match(/\{.*?\}/); + + var imgattr = imgmarkdown.match(/\{.*?\}/); if(imgattr) { - imgattr = imgattr[0].slice(1,-1); - imgattr = imgattr.split(' '); + imgattr = imgattr[0].slice(1,-1); + imgattr = imgattr.trim(); + imgattr = imgattr.split(' '); + + var widthpattern = /width=\"?([0-9]*)[a-zA-Z%]*\"?/; + var heightpattern = /height=\"?([0-9]*)[a-zA-Z%]*\"?/; + var lazypattern = /loading=\"?([0-9a-zA-Z]*)\"?/; + for (var i = 0; i < imgattr.length; i++) { + var widthattr = imgattr[i].match(widthpattern); + var heightattr = imgattr[i].match(heightpattern); + var lazyattr = imgattr[i].match(lazypattern); + if(imgattr[i].charAt(0) == '.') { - this.imgclass = imgattr[i].slice(1); + this.imgclass = imgattr[i].slice(1); } else if(imgattr[i].charAt(0) == '#') { - this.imgid = imgattr[i].slice(1); + this.imgid = imgattr[i].slice(1); + } + else if(widthattr) + { + this.imgwidth = parseInt(widthattr[1]); + } + else if(heightattr) + { + this.imgheight = parseInt(heightattr[1]); + } + else if(lazyattr && lazyattr[1] != '') + { + this.imgloading = lazyattr[1]; } else { @@ -1652,15 +1678,92 @@ const imageComponent = Vue.component('image-component', { } } - var imgfile = imgmarkdown.match(/\(.*?\)/); + var imgfile = imgmarkdown.match(/\(.*?\)/); if(imgfile) { - this.imgfile = imgfile[0].slice(1,-1); - this.imgpreview = this.$root.$data.root + '/' + this.imgfile; + imgfilestring = imgfile[0]; + var imgtitle = imgfilestring.match(/\".*?\"/); + if(imgtitle) + { + this.imgtitle = imgtitle[0].slice(1,-1); + imgfilestring = imgfilestring.replace(imgtitle[0], ''); + } + + this.imgfile = imgfilestring.slice(1,-1).trim(); + this.imgpreview = this.$root.$data.root + '/' + this.imgfile; } + + this.createmarkdown(); } }, methods: { + createmarkdown: function() + { + if(this.imgpreview) + { + var img = new Image(); + img.src = this.imgpreview; + + var self = this; + + img.onload = function(){ + + self.originalwidth = img.width; + self.originalheight = img.height; + self.originalratio = self.originalwidth / self.originalheight; + + self.calculatewidth(); + self.calculateheight(); + self.createmarkdownimageloaded(); + } + } + else + { + this.createmarkdownimageloaded(); + } + }, + calculatewidth: function() + { + this.setdefaultsize(); + if(this.imgheight && this.imgheight > 0) + { + this.imgwidth = Math.round(this.imgheight * this.originalratio); + } + else + { + this.imgwidth = ''; + } + }, + calculateheight: function() + { + this.setdefaultsize(); + if(this.imgwidth && this.imgwidth > 0) + { + this.imgheight = Math.round(this.imgwidth / this.originalratio); + } + else + { + this.imgheight = ''; + } + }, + setdefaultsize: function() + { + if(this.imgheight == 0 && this.imgwidth == 0) + { + this.imgwidth = this.originalwidth; + this.imgheight = this.originalheight; + } + }, + changewidth: function() + { + this.calculateheight(); + this.createmarkdownimageloaded(); + }, + changeheight: function() + { + this.calculatewidth(); + this.createmarkdownimageloaded(); + }, openmedialib: function() { this.showresize = false; @@ -1677,8 +1780,8 @@ const imageComponent = Vue.component('image-component', { updatemarkdown: function(event) { this.$emit('updatedMarkdown', event.target.value); - }, - createmarkdown: function() + }, + createmarkdownimageloaded: function() { var errors = false; @@ -1708,12 +1811,13 @@ const imageComponent = Vue.component('image-component', { imgmarkdown = imgmarkdown + '(' + this.imgfile + ')'; } - var imgattr = 'loading="lazy" '; + var imgattr = ''; + if(this.imgid != '') { if(this.imgid.length < 100) { - imgattr = imgattr + '#' + this.imgid + ' '; + imgattr = imgattr + ' #' + this.imgid; } else { @@ -1724,20 +1828,32 @@ const imageComponent = Vue.component('image-component', { { if(this.imgclass.length < 100) { - imgattr = imgattr + '.' + this.imgclass; + imgattr = imgattr + ' .' + this.imgclass; } else { errors = 'Maximum size of image class is 100 characters'; } } + if(this.imgloading != '') + { + imgattr = imgattr + ' loading="' + this.imgloading + '"'; + } + if(this.imgwidth != '') + { + imgattr = imgattr + ' width="' + this.imgwidth + '"'; + } + if(this.imgheight != '') + { + imgattr = imgattr + ' height="' + this.imgheight + '"'; + } if(this.imgattr != '') { imgattr += this.imgattr; } if(imgattr != '') { - imgmarkdown = imgmarkdown + '{' + imgattr + '}'; + imgmarkdown = imgmarkdown + '{' + imgattr.trim() + '}'; } if(this.imglink != '') @@ -1751,7 +1867,7 @@ const imageComponent = Vue.component('image-component', { errors = 'Maximum size of image link is 100 characters'; } } - + if(this.imgcaption != '') { if(this.imgcaption.length < 140) @@ -1776,6 +1892,7 @@ const imageComponent = Vue.component('image-component', { } else { + console.info(imgmarkdown); publishController.errors.message = false; this.$parent.activatePage(); this.$emit('updatedMarkdown', imgmarkdown); diff --git a/system/author/js/vue-shared.js b/system/author/js/vue-shared.js index 1675217..eed8e0d 100644 --- a/system/author/js/vue-shared.js +++ b/system/author/js/vue-shared.js @@ -549,7 +549,7 @@ Vue.component('component-image', { methods: { getimagesrc: function(value) { - if(value !== null && value !== '') + if(value !== undefined && value !== null && value !== '') { var imgpreview = myaxios.defaults.baseURL + '/' + value; if(value.indexOf("media/live") > -1 ) diff --git a/themes/cyanine/css/style.css b/themes/cyanine/css/style.css index ebcf234..43fa6b5 100644 --- a/themes/cyanine/css/style.css +++ b/themes/cyanine/css/style.css @@ -136,7 +136,9 @@ dt::after{ /* Make images and image captions look good */ img, figure,figure img{ - max-width: 100%; + max-width: 100%; + height: auto; + aspect-ratio: attr(width) / attr(height); } figure{ display: table;