Photo Sizing

Stig

Have Vanilla done something recently? Really not a fan of this stretch to fit frame business that we've been getting for a while.

eastterrace6168

Noticed this Stig, thought it was something I was doing wrong, but is it the forum?

aliwibble

@Stig, is it buggering up the aspect thingy, or keeping it in the right proportions but making it huge? Links to some affected posts may help us narrow down the source of the problem for @lookout, and possibly come up with a workaround

ETA, I've tweaked the images in this post as I spotted it while reading the Dobbo thread. Unfortunately you need to be using the desktop site to modify the size of the image in the link, so it's not a workaround that everyone can use.

Stig

Hi Ali, yes it's blowing pics up so they are bigger than they ought. Thanks for your tweak. I like that. What's the secret? 

eastterrace6168

Stig said:

Hi Ali, yes it's blowing pics up so they are bigger than they ought. Thanks for your tweak. I like that. What's the secret? 

Stig, I have had this for a couple of weeks, and has put me off posting pics, would love to know what is happening, we can't be the only ones who are getting this...🤷‍♂️

aliwibble

OK, I suspect it's probably an issue with the CSS settings for the site, but it's not really my thing, so I can't say for certain. Basically it's defaulting the image size to the width of the post area of the screen, rather than the inherent attributes of the image, but you can overide that by including your desired width in pixels in the link. On some sites if the specified width is wider than the width of the screen you get scrollbars, but on here it just scales the image down. For landscape pictures I'd suggest 600 pixels, portrait 400, and 300 if you want to put two side by side. In theory you can specify the height as well, but if you get the numbers wrong it buggers up the picture, so that's best avoided.

If you're on the desktop site, what you can do is use the </> icon to edit the html. When you import a picture, the standard html for the link looks something like this

<img alt="" src="https://us.v-cdn.net/5000498/uploads/editor/2j/nmh05qj6zupz.jpg">

To change the width, just add width="400" after the <img bit. It's also a good idea to add brief alt text as it helps people using screen readers, and helps you keep track of which picture is which if you're including several in one post. That came in very handy while doing the Shenanigans bitesize eg.

<img width="400" alt="Kids wearing Floyd and Harvey heads in the Museum" src="https://us.v-cdn.net/5000498/uploads/editor/2j/nmh05qj6zupz.jpg">

The nice thing is doing this changes the size of the image in the "Leave a Comment" box, so you can see how big it'll be while you're drafting.

If you want to put two pictures side by side, it's a good idea to put one or more &nbsp; tags between them, as that inserts a space

<img width="300" alt="yellow card" src="https://us.v-cdn.net/5000498/uploads/editor/ct/8h4aeikkkqbr.png"> &nbsp; 
<img width="300" alt="red card" src="https://us.v-cdn.net/5000498/uploads/editor/m9/emdsuuk8khp2.png">
 

(I'd usually make those smaller, but wanted to give you an idea of the sizing)

Hope that helps.

Stig

Thanks very much Ali. Much appreciated 

eastterrace6168

Still sounds a bit complicated to me, mind you that ain't unusual...whatever happened to the way it was...🤦‍♂️

eastterrace6168

Sussed out the editing bit @aliwibble thank you...ok as a temp sort out, bit of a faff, be good if it can be sorted though...🤷‍♂️