Consistent Image Size

[sweikal]

Hello,

Is there a way to keep image sizes consistent throughout a webpage? I have a series of images (all cropped at squares) that I want to be displayed at the exact height and width. However, whenever the browser window changes, the sizes of the images change as well causing misalignments.

See here for reference:

https://www.mitworldreforum.com/speakers.html

I've created equally spaced columns and each image is scaled to the max width of the column at 0 spacing, but the result is still varying image sizes. How can I get the images to display at a consistent size? Do I need to reupload every single image at the exact same pixel dimensions (something I would very much like to avoid)?

[Bernadette3]

Hi @sweikal. Did you resize the images in the editor or did you resize before you uploaded?

[sweikal]

I am resizing in the weebly editor.

[Adam7]

The Gallery element might be better than individual images, that way they are spaced and cropped consistently (it has both square and rectangle cropping options).

[jesseayers]

With all due respect, the gallery option does not work for most design work.  Weebly should already have consistent image size implemented in some fashion.  Doen't seem like it's that hard to do, and should be in high demand given that color images are need for attractive web design.

Jesse

[jesseayers]

And still no answer from Weelbt on this issue 13 months later.

[jesseayers]

I find this problem with image sizing absolutely unacceptable and inexcusable.  Using images is fundamental for building an attractive website.  Weebly has failed to address this issue for well over 3 years now, and they owe their customers an explanation. What is the technical challenge?  Is it insurmountable, or is everyone too busy playing golf to take care of a serious design flaw in their product?  I guess it is time to migrate to Wix or Wordpress.  I was willing to wait a month or two for Weebly to recognize the fix such a serious issue, but 3 years??  I think paying customers are entitled to an explantion from the CEO.  (Is the CEO even aware that customers have been complaining about this issue for 3 years, or is he/she out playing golf and not demanding that staff bring recurring complaints to his/her desk.) 

I just spent hours trying to get images the same size, only to find on the live, public-facing webite, those images are grossly different sizes for no reason I can find.  A Weelby tech support person also tried to resize the images on one of my pages (I have at least 30 pages), and his fix did not "stick" either.

[SimonWakeus]

@jesseayers Couldn't agree more. I am still building my site at Weebly but I am concerned they have stopped developing it. If they don't add features at all, Weebly sites will look out-dated and pretty soon, I will have to start building at another platform. 

[Brigette1]

@Adam @Bernadette Hi team.

I sometimes have problems with some images popping out into different sizes after I publish too.  Is there an easy solution for the issue yet?  Thanks very much!

[Bernadette3]

Can you post a link to the page with the images? It sounds like the images are not the same size when uploading, but I'm not sure if this is what you're describing. 

[Brigette1]

Hi @Bernadette 

When this issue has happened in the past, I've played with changing the size of the image with the resize image click-and-drag thing, publishing, then going back and changing size again, and somewhere along the line it fixes itself. But this time I'm doing that and it's not working (although it did on another page). This is the page with the problem - https://www.raisementalhealth.co.nz/mental-health-awareness.html, and the image below shows what it looks like in the editor compared to on the page. All of these icons are virtually the same size (a small number of pixels difference in a couple, but the out-of-size one is the same size as a couple of the others). If it's helpful, I think this problem happens with the first image on the left (I've only just realised that, so I've nothing to compare it to for now). There is a spacer above the whole row but none between the icons. Thanks for your thoughts!

[Bernadette3]

I tried to take a look in the editor, but I only see the first image for that page. I think you may be in the process of editing? 

Can you let us know when you've added all the images back so we can take a look? 

I've also added a hidden test page and copied the first image from the page a few times to see if I could duplicate the behavior on a large screen, but it appears to be working fine. If you publish the site we can take a look at the live site. I think this would at least help us understand if it is the image size causing the issue or something else. 

[Brigette1]

HI @Bernadette . Thanks for your reply. Yes, I was in the editor. When I looked at that page, the first image had popped out of shape on there too (unlike in the image above), so I tried making it uniform with the others again and annoyingly, it has worked this time   

I'd be really grateful it you can have a look anyway and see if you can pick up anything obvious I'm doing wrong, thanks so much!

[Brigette1]

@Bernadette Ooh!  If you have a look at this page you will see the same issue has occurred. This page looked fine earlier today!  https://www.raisementalhealth.co.nz/resource-library.html

[Bernadette3]

Those images are different sizes in the editor. Do you ever edit from different monitor sizes? 

Have you had a chance to check out the test page? https://www.raisementalhealth.co.nz/test.html

[Brigette1]

Hi, no, same monitor always. I upload the pictures, which are way too big, then use the click-and-drag to resize.

I've just had a look at the test page and they are all the same size. To do that, did you need to use the resizing click-and-drag? I think that may be where the problem lies. Can you see the issue in this page? 

https://www.raisementalhealth.co.nz/resource-library.html  I've created a copy of it below your test page. When I created it, all images were the same size, but today the first one is has reduced in size.

BTW, is there some smart way to have them exactly the same size? I do the resizing by eye at the moment.

[Adam7]

One way to ensure that they all end up the same size is to make your columns first using spacer elements. You can add them in a way to create the number of columns you need, then add your images to each column, and then remove the spacers afterward.

[Brigette1]

Hi @Adam Thanks for the tip, but when I removed the spacers it made the images too big, so I still needed to click and drag them to be the smaller size I wanted them to be.

---

@Adam wrote:

One way to ensure that they all end up the same size is to make your columns first using spacer elements. You can add them in a way to create the number of columns you need, then add your images to each column, and then remove the spacers afterward.

---

. 

[Brigette1]

@Bernadette  re my messages yesterday, I couldn't leave the site as it was so I've played again and for now all the images are uniform sizes. Fingers crossed they remain that way 🙂 

[feedthegoat]

This exact thing is happening to me. Quite surprised such a simple thing hasn't been fixed for all these years. Images are same size but when the browser window is shrunk down or on mobile, the sizes randomly change. Wouldn't recommend anyone use this builder unless these simple design issues are fixed...