Major revision and relaunch of the website of the architecture photographer Jörg Hempel

[horst]

 

The site of Jörg Hempel was built back in 2013/2014 the first time with ProcessWire, (version 2.3+ or 2.4). Then, over the years, individual areas were repeatedly rebuilt, equipped with new features, etc. Once, more than 50000 original images had to be exchanged and replaced by larger ones. I still remember that I wrote two days on the scripts, with which all original images were automatically exchanged via SFTP and all variants were recreated. At that time, a local computer ran three days and nights continuously in four parallel tasks. The exchange ran smoothly and without a single minute downtime of the live page. Today, the images (incl. variants) occupy over 130 GB disk space. :-)

But due to the different version changes, PW 2.4, 2.5, 2.6, 2.7, 2.8(!), all none namespaced, to the namespaced 3.0+, a lot of unsightly solutions were created, e.g. to adapt unmaintained third party modules etc. In the front end were some old libraries in use, too. Therefore Jörg Hempel decided to rework all areas. (design, frontend and backend). 

Jörg developed the design together with the design agency Quandel Staudt Design from Frankfurt, Germany. The front end was built as a HTML click dummy by Benedikt Seifert from Jena, Germany. I was left with the wiring of front end and back end, as well as the redesign of all server-side processes.

The new site now runs on PW 3.0.148 and PHP 7.4, using ProCache, AOS and my image helpers (Pia, PageimageManipulator2, CroppableImage3). All images use lazyload, and infinite scrolling was dropped, so we don't have to use the m.domain for mobiles any more.

The extensive filtering possibilities of the archive and the blog from the old site have been preserved. Url segments are used for the filters.

 

[wbmnfktr]

Kind of... Love on first sight... to be honest. Love the straight and clean look of everything.

And I love the speed of that site. My internet connection is quite lame but still.. everything was almost instantly present and usable.

There are... some things I could call a "glitch" but... maybe... it's just me and I will take a closer look later on.

18 minutes ago, horst said:

Today, the images (incl. variants) occupy over 130 GB disk space.

That's... WOW! My whole setup doesn't use that much of disk space. ?

 

Well done @horst, well done!

[horst]

@wbmnfktr many thanks, but the design wasn't my work. This goes to Quandel Staudt Design !

I'm more responsible for the massive disk space usage. ?

I only have built the homepage and the menus, - and worked on little (front end) things like the archive thumbnails on the homepage for mobile view. The design agency wanted to have fixed partial blue overlays in the bottom, with blur effect for the covered image part. I found out, that sometimes the text was to long to fit into the blue area. My recommended solution was to extend the boxes downwards, so that longer texts fit, but not too much of the image motifs get covered. Since the thumbnails are on white background, it was not possible to simply extend the semi-transparent text boxes downwards. So, now the pictures automatically get lengthened with a black, transparent gradient below and also get the blurred effect directly embedded into the pixels.

 

original thumb like in the desktop version                                                     the lengthened (and blurred) thumb

     

the result with the fixed partial overlay

 

 

[wbmnfktr]

Nonetheless... someone had to implement all those designs and features.

I really like it ... somehow. Kind of UIKIT and still some kind of custom.

I know how often I struggle with a "designer's idea" of something so... a great job.

[adrian]

2 hours ago, wbmnfktr said:

And I love the speed of that site. My internet connection is quite lame but still.. everything was almost instantly present and usable.

@horst - the site looks wonderful, but unfortunately the speed for me is actually unusable because of this:

 

Unrelated to speed, but also notice this:

HTH!

[wbmnfktr]

Each and everything related to Piwik/Matomo is blocked here... so I missed that one.

Good one @adrian.

[horst]

18 minutes ago, adrian said:

Unrelated to speed, but also notice this:

Thanks @adrian, this one I have already fixed yesterday for newly cached pages. But there are currently 4500+ pages in ProCache that needs to be rebuild.

[Pete]

Nice work - I love coming up with non-standard solutions to design problems like the blurred overlay.

Way back in 2005 I built an article block for a webiste that overlaid a gradient on the hero image for the same purpose of showing text on top and saved that copy of the image with the adjustment (before CSS3), and also generated all the article titles as images too as it was a non-standard font (this was before web font compatibility as well) so I know they can be a challenge, but a fun challenge ?

[Pixrael]

Very Good! Congratulations!

• https://gtmetrix.com/reports/joerg-hempel.com/W4poteAu
• https://tools.pingdom.com/#5c3bbe0cae400000

[horst]

8 hours ago, Pete said:

Nice work - I love coming up with non-standard solutions to design problems like the blurred overlay.

Way back in 2005 I built an article block for a webiste that overlaid a gradient on the hero image for the same purpose of showing text on top and saved that copy of the image with the adjustment (before CSS3), and also generated all the article titles as images too as it was a non-standard font (this was before web font compatibility as well) so I know they can be a challenge, but a fun challenge ?

Hi @Pete, thanks for the warm words.

And yep, the times without web fonts was way more challenging in regards to satisfy designers dreams. Especialy when working with designers coming from print media. ?

[dragan]

On 3/18/2020 at 8:34 PM, horst said:

the times without web fonts was way more challenging in regards to satisfy designers dreams

I'm old enough to actually remember Macromedia Adobe Flash... sometimes you were forced to use that plugin just to display a (dynamic) custom font (sIFR). Oh the fun we had... sometimes I think the young generation of web developers don't know how lucky they are. ? </derail>

[tpr]

On 3/18/2020 at 1:42 AM, horst said:

So, now the pictures automatically get lengthened with a black, transparent gradient below and also get the blurred effect directly embedded into the pixels

So are you creating a new image for this effect? If so, have you considered using CSS backdrop-filter?

https://css-tricks.com/almanac/properties/b/backdrop-filter/

[horst]

On 3/28/2020 at 6:59 PM, tpr said:

So are you creating a new image for this effect? If so, have you considered using CSS backdrop-filter?

Yes, without the need to enlarge the images on the bottom side, this would be a perfect use. But I needed a smooth transition from bottom black to transparent, without a visible hard line where the added bottom space touches the image. I couldn't figure out a css only solution that combines all needed parts. Also the current browser support isn't good, and I would have to use filter with additional layer divs instead of backdrop-filter.