From f00132d4a3fed7f5bcba4e6814ec7572d9eb0f02 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 10 Dec 2022 17:36:11 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Adds=20support=20for=20dimensions?=
=?UTF-8?q?=20on=20Image=20Widget?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Widgets/ImageWidget.vue | 26 +++++++++++++++++++++++++-
1 file changed, 25 insertions(+), 1 deletion(-)
diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue
index 2634b1d2..8bbf22c8 100644
--- a/src/components/Widgets/ImageWidget.vue
+++ b/src/components/Widgets/ImageWidget.vue
@@ -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}` : '';