WebsiteBaker Community Forum

General Community => WebsiteBaker Website Showcase => Topic started by: CodeALot on September 23, 2017, 12:46:58 AM

Title: Architect's website
Post by: CodeALot on September 23, 2017, 12:46:58 AM

Well if nobody else wants to show what they do with WB 2.10, I will :)
 
This new website for a large architectural firm is all about images. Large images, slideshows, lightboxes with enlarge-options... But also project data, lots of project data.  A customized OneForAll module is used for the project data, divided into several project categories, and a second OneForAll module is used for news. SLIR is used to resize images on-the-fly, depending on screensize. Built from scratch, no standard templates were used.
 
Website address: http://www.breddels.nl

(https://www.netweters.nl/media/netwetersslider/images/item25/breddels.png)
 

Title: Re: Architect's website
Post by: dbs on September 23, 2017, 08:13:07 AM

Hi, looks nice.
I'm not sure but it seems your SLIR do not work on all images.
The startpage reloads every few seconds, is that correct?
Maybe sometimes the captures are hard to read.

I see 3 errors:
- a.indexOf is not a function
- missing } after function body
- $(...).stickUp is not a function

Apart from that the site is nice and generous.

Title: Re: Architect's website
Post by: CodeALot on September 23, 2017, 10:04:34 AM

SLIR works on all images here. Can you give me an example?

Page reload (homepage) is intentional. (Company's wish). If you look at the top, you'll see that the images are from different project types (homes, shops, schools etc) each time the page reloads. This reload only happens on the homepage.

I don't worry too much about javascript errors in scripts I didn't write myself as long as their merely "notices" without breaking the site. Would be much too time-consuming to repair all of those...
 
Thanks for the comments!

Title: Re: Architect's website
Post by: Hans on September 23, 2017, 10:35:54 AM

Mooi hoor!

Even volgen hoe dat zit met dat SLIR, nooit van gehoord.

Curious to know what's that all about SLIP, never heard of it.

Title: Re: Architect's website
Post by: dbs on September 23, 2017, 12:53:24 PM

I have wrong understand the SLIR. Tought it provide images in the visible size.
All good.

Title: Re: Architect's website
Post by: CodeALot on September 23, 2017, 04:15:44 PM

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.