Jump to content

How do I ensure all images are the same size?

Recommended Posts

I use my blog ( http://janeyudelman.com/news/ ) for positing "news" (say, a new exhibit). Each post is accompanied by an image (always prepared to the same dimensions) and then left justified with the text about the exhibit to the right of this. In order to fit the text beside the image, I need to re-size the image. Does anyone know how to ensure that all of the images on blog page are the same size? (Right now, with each posting my images turn out to be different sizes and the page looks very unprofessional.)

Thanks.

Link to comment
  • 2 years later...
  • Replies 8
  • Created
  • Last Reply

This has been seriously driving me crazy. CRAZY! I upload images that are the same exact size. Some of them get scaled to 800. Some to 720. Some to 680. It's driving me crazy. There's no rhyme or reason behind it. And I have no idea what to even do, short of taking them down and trying again... sometimes you have better luck on the third or fourth try. :) Ridiculous. If you figured out an answer to this question that you had back in 2013... I'd love to hear what you wound up doing. Thanks! It looks like Squarespace hasn't fixed it yet. Even though it's been a bug for a while now.

Link to comment

Id have to see the images before upload and after to tell you why they are a different size than the original, but the dimensions should scale perfectly. Go to the page @jane linked and see that some images are 600x600, some are 400x600. Now if you have two images with two different dimensions, how do you suppose you make them the same size? Crop or skew the image. Generally we dont want that unless we are thumb-nailing. Alternatively you can either resolve in that your images can differ in width but all must be the same height, or differ in height but all the same width. I think for your blogs your intent is to have the same width and center the image. So then you need to pick a static width, and for my example I will use 400px because no image is less than 400px wide on the page @ jane linked.

In the case of @jane to make all the images the same width you would add the custom CSS below:

.sqs-block-image { margin: auto; width: 400px;}

But this would affect every instance of the .sqs-block-image on the entire site. It sounds like you really only care to make this change on the blog. To specify the page we would use javascript to write the CSS like this in the settings->advanced->code injection header:


<script>
if(window.location.pathname == '/news') { 
 document.write('<style type="text/css">.sqs-block-image {margin: auto;    width: 400px;}</style>')
}
</script>

... where /news is the target page.

For you, @lauren2234, if you dont understand the concept, then you need to link your page for better assistance.

thx-d

Link to comment

Oh, thank you so much for getting back with me! This has been a problem for me for a long time. I figured it was just an issue with squarespace, so I've always just been aggravated... but excepting it as it was. Today, I had a post where it happened to 6/10 images. And I decided to look for an answer.

To better explain the issue. I don't think it's a css problem or an image size problem. I upload images that are always larger than our post width. Our post width is 770px. And our images are usually around 1000px wide.

If you look at this post (which is just a roundup of instagrammers)... http://www.theshelf.com/blogger-roundups/australian-bloggers The first 6 images are scaled down to exactly 720px wide. While the last 4 maintain the original dimensions of the image that was uploaded.

Why would those first 6 get resized, while the last 4 are not? The last 4 fit beautifully at 100% the width of the post (770px)... while the rest of the images (the six that were scaled down to 720px) throw off the layout. For no reason other than the platform seems to just arbitrarily choose some images to scale, while leaving others untouched.

Any help with this would be great!

Link to comment

The image is definitely scaled down but I dont know the reason why it happened. I think you can fix it however. Instead of choosing a static width its probably better to use 100% so it scales with page resizing.

Add this to your header code injection:


<script>
if(window.location.pathname.indexOf('blogger-roundups') > -1) {   document.write('<style type="text/css">.sqs-block-image .intrinsic {    margin: auto;    min-width: 100%;}</style>') }
</script>

I notice you have a bunch of blogs, so instead of just focusing on the australian-bloggers page this should work on any page with the pathname containing blogger-roundups. Hopefully that is discretionary enough to not break another part of the site.

Let me know if you have any issues.

thx-d

Link to comment

Hopefully, by now you have solved the re-sizing issue using the code provided above. If not, what worked for me in the end was changing the layout of the text associated with each image. I have no idea why this made a difference, but as of now the problem seems to have resolved itself--all of the vertical images posted are the same size and all of the squares posted are the same size.

Link to comment
  • 3 weeks later...
  • 7 months later...

Using an Image Block, with images that are uploaded at the same size is an important first step. Squarespace has a guide on formatting your images for display on the web that you can find here:

https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web

It would seem that images that are 1500px wide will be the best bet. Personally, I like images in a 3:2 aspect ratio, which puts them at 1500px x 1000px in size.

After that, you can manually resize your Blocks after you have them in place. Here is another guide on that:

https://support.squarespace.com/hc/en-us/articles/206543647-Resizing-blocks

You shouldn't need to use any code to make this happen. If your images are formatting at odd sizes even after following these steps, I recommend reaching out to customer care to ask them what may be going on here.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.