How to scale an image

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

How to scale an image

Post by richrich » Thu Nov 15, 2018 8:57 am

Is there a way to scale an image in a smooth way as you drag the browser window left and right? This is for a product picture. Not for say a layer or header background image. When I searched Google I get all the coding ways to do it: "width: 100%; height: auto;". But how would I do it with WWB. I tried all the settings with the layout grid and layer but no image size % scale. Do I need a separate plugin? I can get the image to move left and right but not shrink and grow in size as I drag the browser window left and right. Rich

User avatar
Pablo
 
Posts: 14503
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to scale an image

Post by Pablo » Thu Nov 15, 2018 9:53 am

If you place the image inside a layout grid then you can set 'full width' to 'true' to make it responsive.

There many templates that demonstrate this behavior.
http://www.wysiwygwebbuilder.com/templates8.html

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Thu Nov 15, 2018 7:38 pm

Thanks Pablo, that worked. I was looking in the layout grid options when the setting was in the image options. Thanks. Now is there a way to have the image get smaller proportionally as to how far across the screen you have pulled the browser window to the left? What you said worked but only re-sized when you got way to the left, say below 250px width. Once it got below 250px the re-size was proportional and perfect. But can the resizing start say at 1000px and then scale down a bit right down to 320-200px? Rich

User avatar
crispy68
 
 
Posts: 425
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: How to scale an image

Post by crispy68 » Thu Nov 15, 2018 8:03 pm

The image is only going to resize (scale) when the container it is in gets to being the same size or smaller than the image. As long as there is enough space in the grid, it is not going to scale. You can always change the size of the grid to make the space around it less which will invoke the scaling sooner.

User avatar
Pablo
 
Posts: 14503
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to scale an image

Post by Pablo » Thu Nov 15, 2018 9:13 pm

Do you mean you do not want the image to get bigger than a certain size?
This can be controlled with the 'max width' property.

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Thu Nov 15, 2018 10:41 pm

crispy68, When you say change the size of the grid, when I drag the image into the layout grid the layout grid increases it's size to exactly the size of the image. So how would I change the size of a layout grid. I also looked at the layout grid properties and I have 0 for top and bottom padding. So to much padding is not stopping it from starting to re-size (get smaller) right when you start going from 1000px to 900px to 800px. The gutter was set to 15 and setting it to 0 didn't make the image re-size start any sooner..

Pablo, On the max width, no I wasn't worried about that yet but yes I'm sure that would have been one of my next questions as I don't want the image to get blurry due to it getting bigger then it's original 100% size. I get what crispy68 is saying if there was a bunch of room around the image but being the layout grid snaps right around the image there is no space there to stop the image from getting smaller right from the start of dragging the browser screen smaller (1000px, 900px, 800px, etc).

Here's an example. It's talking about the code to make it happen but if you drag the browser window from right to the left, right from the start of the window drag (1000px ish) the sample image starts shrinking instantly and shrinks a little at a time all the way from the beginning of the browser window drag till the end (100px ish). Rich

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Thu Nov 15, 2018 10:44 pm


User avatar
crispy68
 
 
Posts: 425
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: How to scale an image

Post by crispy68 » Fri Nov 16, 2018 12:13 am

to be honest, without seeing your design or even a working version, it is hard to explain how to go about it.

When the image is dragged into a grid column and the full width set to true, the image is going to scale only as large as the max-width you have set in the image properties and will scale down once the grid column is as large as the width of your image. Adding more gutter or padding within the grid cell itself will affect when the image starts to scale as the screen gets smaller. Why, because you are changing the available space within the column.

Layout grids can have different # of columns and widths in BP's as well as gutter/padding width which allows you to change the width of the actual column as it gets smaller which allows for more control over the size of the image as it gets smaller. However, since you are not using BP's, this is a moot point. Your link above to the demo is also using bp's.

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Fri Nov 16, 2018 7:06 am

I added more columns to the layout grid with the image in it and it did make the image scale sooner in the browser window re-size. So that gives me a little more control. I went back and looked at the sample page I included and I do see the break points now. There are so many settings it's almost overwhelming. If you know what they all do you can probably do anything. Rich

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Fri Nov 16, 2018 7:11 am

I just looked at the templates Pablo included. Is there a chance there are any product page (ecommerce) templates? Are there any templates (product pages) for WWB other then the directory that Pablo pointed out? Or are the only templates on the web for WWB on the WWB site. Rich

User avatar
Pablo
 
Posts: 14503
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to scale an image

Post by Pablo » Fri Nov 16, 2018 7:28 am


richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Sat Nov 17, 2018 10:46 am

Guys, I just got the flexible text extension working and it works beautifully. Is there an extension or a way to make an image work the same way the flexible text extension works? When I drag an image into a layout grid and choose full width: true the image will change in size but the size won't change till the very end of the browser window drag. The flexible text extension starts sizing smaller the second you start pulling the browser to the left. Is there an extension for images that make images react like text is reacting using the flexible text extension? Rich

User avatar
Pablo
 
Posts: 14503
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to scale an image

Post by Pablo » Sat Nov 17, 2018 1:24 pm

When I drag an image into a layout grid and choose full width: true the image will change in size but the size won't change till the very end of the browser window drag.
This depends on the max-width setting of the image.

richrich
 
 
Posts: 25
Joined: Wed Nov 14, 2018 8:52 pm

Re: How to scale an image

Post by richrich » Sat Nov 17, 2018 9:15 pm

I played with the max-width setting. Yes, if I change the max width setting to 800 which makes the image as big as the screen it will start getting smaller the minute you start dragging the browser window to the left. But, max width at 800 makes the image as big as the screen. If I change max width to 200 which gives me a proper 3"x3" image then I have to drag the browser window to the left almost to 320 before it starts to get smaller. I'm 1 week into WWB, I hate to ask such novice questions. Rich

User avatar
Pablo
 
Posts: 14503
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to scale an image

Post by Pablo » Sat Nov 17, 2018 9:40 pm

Note that this has nothing to do with WWB, this is just how HTML/CSS works.

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests