Over the last week we have been updating a great number of the sites look & feel areas. The
Home page has had a face lift with several more planned updates to go. We also moved the user bar and
site search above the scroller.
Across a great number of areas of the site we have been implementing what we have called scaled rounded corner images. This is making such a vast site appearance update and is loaded into the following areas:
Places (all pages)
Blogs (
home page and index lists)
Treks (all pages)
Classifieds (all pages)
Articles (index page only)
Wildflowers (new section added recently)
Recipes (new section added recently)
Member Public Profiles
Top level image scroller
Firstly a scaled image is where we take the source image and then scale it to completely fill a defined area on the site. On the site we use images in various sizes based on where it is to be displayed; typical sizes are 50x50px, 80x80px, 100x100px, 180x250px, 250x250px and 800x600px. There are a number of others but you get the idea we render images in different sizes. So the scaling system will take a source image in the uploaded size and then work out how to resize it (larger or smaller) to fill the space based on the minimum size, an example will make this easier say you upload a photo and it is 1920x1080px if we want to show this at 100x100px we would firstly work out the smallest dimension 1080 and determine the shrink factor 100/1080 = .0925 we then resize the image using this factor makes 177.6x100px - this is not 100x100 so we have to crop the top and bottom off the image to remove the 77.6px. We do this by cropping to the centre so 38.8px from the top and 38.8px from the bottom get removed. The image is now 100x100 and we render this.
So dependant on the shape of the photo we may remove some of the top/bottom or left/right. However we do not squash or upset the proportions of the image (which we think is much very important). If this image is then show at 180x250px or so other size the formulas are applied again and the image is shown at the requested size.
The rounded corners are just that we use css styling to add a 5px radius around the corners of the images. The resulting output looks much better than a mismatch of images across pages.
When the image is full presented via a click to open the full size image - we present the image resized as required to fit without any crop - thus it presents the full image. To see how this works look in any of the areas documented above.
There are some areas where this function will cause issues due to the less photographic nature of the images, such as
shop products and business logos etc. We are looking to how best to manage these images to ensure the best uniform layout of the site as possible.
We really think this update is excellent and hope you also like the update.
David