Adds support for dimensions on Image Widget

This commit is contained in:
Alicia Sykes 2022-12-10 17:36:11 +00:00
parent 71291c1ce9
commit f00132d4a3

View File

@ -1,6 +1,6 @@
<template>
<div class="image-widget">
<img :src="imagePath" class="embedded-image" />
<img :src="imagePath" :style="imageDimensions" class="embedded-image" />
</div>
</template>
@ -18,6 +18,30 @@ export default {
if (!this.options.imagePath) this.error('You must specify an imagePath');
return `${this.options.imagePath}${this.updatePathParam}`;
},
/* If set, apply users specified image dimensions */
imageDimensions() {
// Skip if neither set
if (!this.options.imageWidth && !this.options.imageHeight) return null;
// Apply correct units to input val, if needed
const makeDimensionsUnit = (userVal) => {
if (!userVal) { // Nothing set, use auto
return 'auto';
} else if (!Number.isNaN(Number(userVal))) { // Number set, add px
return `${userVal}px`;
} else { // Value is string, likely already includes units
return userVal;
}
};
console.log(`
width: ${makeDimensionsUnit(this.options.imageWidth)};
height: ${makeDimensionsUnit(this.options.imageHeight)};
`);
// Return CSS values for width and height
return `
width: ${makeDimensionsUnit(this.options.imageWidth)};
height: ${makeDimensionsUnit(this.options.imageHeight)};
`;
},
/* Generate a URL param, to be updated in order to re-fetch image */
updatePathParam() {
return this.updateCount ? `#dashy-update-${this.updateCount}` : '';