I was going back to clean up a couple old trip reports (Matt's recent changes make a world of difference in pulling up pages with lots of pictures quickly), and noticed that for vertical photos specified as "medium" using simple HTML code, those pictures now appear smaller than they did before. Before, all "medium" photos would have the same width, and on a 1280 resolution width monitor, you could place two of these pictures side-by-side without any text getting in between. Now all my old trip reports look funny, with text in random spots getting covered by these smaller pictures. Non-vertical pictures (that are more wide than they are tall) seem to be displayed the same way and size as before, so it's just the vertical ones (that are more tall than they are wide) that are affected.

Since the recent SP site improvement changes I should probably just conform to how everyone else displays their photos in trip reports and only put single large pictures in the middle of trip report pages instead of side-by-side (I do this because the pages look better when printed out on paper with less white space), but does anyone know of a way I can work around this, perhaps by manually tweaking the display width of a photo? There was an old forum post on HTML tables which probably covered this, but I think that post may have been deleted. Thanks.

Just add this right after the two images:

Code: Select all

<div style="clear:both;"></div>

And you should be fine. A div is just a generic block level element (i.e. causing a line break), and clear:both tells it to break out of any previously set floating of elements as is the case with left/right aligned images.

Check out the 8th post in this thread... you can post photos of any size and still get the SP frame around it we are familiar with.

html-tips-to-share-with-others-t54299.html

Oh using a large image and just displaying it smaller using the width and height attributes of the img tag is really not good practice; The browser still has to download the referenced image file in its full dimensions, and if you uploaded a full size image with several mega pixels you are quickly looking at a few megabytes per image. Now if you have a page with several pictures it adds up to preposterous dimensions. Plus scrolling through such pages can be very clumsy as some browsers jerk very annoyingly when scrolling over those resized images.
Doing this is fine though if the difference between the original and the displayed image dimensions is small, e.g. if you are using the medium width image and just make it a little smaller.

phlipdascrip wrote:Oh using a large image and just displaying it smaller using the width and height attributes of the img tag is really not good practice; The browser still has to download the referenced image file in its full dimensions, and if you uploaded a full size image with several mega pixels you are quickly looking at a few megabytes per image. Now if you have a page with several pictures it adds up to preposterous dimensions. Plus scrolling through such pages can be very clumsy as some browsers jerk very annoyingly when scrolling over those resized images.
Doing this is fine though if the difference between the original and the displayed image dimensions is small, e.g. if you are using the medium width image and just make it a little smaller.

I agree phlipdascrip...

I would not use the script I mentioned to shrink an original size photo- it is very annoying, as you point out, when folks do that. But a large photo is the one to use to shink to something below 1024px but larger than 500. If shinking to below 500px, use a medium.

Yea exactly that's the way to do it.