Dynamically set image width & height

Wappler General Need Help
1

I tried resize image from js by passing variables to image dynamic attributes like width and height but seems it not working

2

Please explain in more details what exactly have you tried.

3

I want to resize image on app connect side by passing variable from js file to image dynamic attributes as width&height to further resize image on loading. for instance image has static width =500 px
and by var_width =700px I want to increase width of image to 700px

4

So how do you pass these values? Where? where do they come from?

5

I simplify my question) Let assume we have variable name var_width with value 700 on the same page as image and in image dynamic attributes width we place var_width.Will be image increase width from static width=500 to var_width value?

6

Where does this variable come from? Is it an App Connect variable? Is it a JS variable? If it's javascript variable, then please provide the code you're using.

7

Teodor, assume the variable is app connect variable.Is it possible by this variable change the width of image by dynamic attribute width?

8

Well yes, if it's an App Connect variable just select your image, add a dynamic attribute > images > width and then pick the variable value using the dynamic data picker.

9

but it's not working. I can change width by placing numeric figures in static width but when I try to place the different numeric in dynamic one nothing happens

10

Please provide your code, that's not working.

11

Ok I will provide later on as I'm under the wheel )

12

I found the reason. If static values are declared (in style file or in image) , dynamic attributes are not working.

13

Sorry for barging in. I think that your solution may be overcomplicated by using an image resize variable.

Images have set intrinsic values that cannot be changed on the front end. However, images can be shown in a responsive manner with the Bootstrap classes of .image-fluid and .w-100 to scale the image with its parent container (.col).

An <img> should always contain the following attributes

  • src
  • alt
  • width
  • height

Preferably, where the width and height are the intrinsic values of the image. Not the required size. This is to assist rendering.

For more, see:

14

In my case, it works perfectly fine.

<dmx-value id="var1" dmx-bind:value="120"></dmx-value>
<img width="800" dmx-bind:width="var1.value" src="assets/images/teodor-kuduschiev-jPkqlDe99z8-unsplash.jpg">

the dynamic value overrides the static one.

15

Also if you set the width without setting a height or vice versa, the image should scale properly automatically. I do this all the time so I don't have to try and figure out the exact scaling numbers.