General Community > WebsiteBaker Website Showcase

Architect's website

<< < (2/2)

CodeALot:
SLIR is a great way to 'prepare' your images, depending on the desired size and aspect ratio.

The images used in the Breddels website are ALL 1920 pixels wide, resized while uploading through PLUpload in OneForAll.
When a page is loaded, SLIR is used to slice and resize the image as desired.

Example: http://www.breddels.nl/projecten/wonen/natuurlijk-wonen-in-de-weel-1/

The top image is originally 1920 x 1280, but is cropped by SLIR to 1920 x 850 pixels.
At the bottom of the page you'll see the thumbnails. These are all cropped to squares by SLIR. Once clicked, you will see the original file (1920 x 1280). Scaled down at first to fit your screen, but you can enlarge the popup to original filesize. (FancyBox 3 is used)
 
If someone views this page on a mobile phone, a different SLIR command is called so that the top image is no longer 1920 x 1280 but resized and cropped down to 700 x 400 pixels, so the mobile user won't have to download the huge images. To get this to work, I altered OneForAll's view_item.php. SLIR commands were inserted and IsMobile() rules were added to call the right SLIR command depending on the platform used.

Feel free to e-mail or PM me for more info on SLIR and how to use this in your WebsiteBaker website.

Navigation

[0] Message Index

[*] Previous page