Pretty off-topic ;)
But well «yes» It’s either / or in my opinion. You kinda mixed two navigation concepts, here:
If I click an image and a lightbox opens where I can see the whole frontpage magnified I wouldn’t expect anything further (hidden in a caption). Example → http://simoneklimmeck.com/
But If you want to show more I would make the frontpage a thumbnail grid of sorts which are linked to projects. Similar to this approach → http://www.dielamb.com/photo/
Just keep it as simple as possible for the user.
Well, I know and experienced the same headaches with the wide gamut displays–I had one myself for years–wasn’t convinced since every image was showing correctly on any other (high quality) display. The problem was that my colorimeter wasn’t able to calibrate that thing correctly. So I always had kinda faulty profiles, which made the images in all desktop applications appear to be right but anything web related was totally off.
I checked all your images – there’s only very minor differences on all my (calibrated) monitors. Adobe RGB looks like of the whites are slightly offwhite and in generall the images are wee bit softer and a bit less saturated (which is exactly whar Adobe RGB does → because dynamic range). All of this behaviour seem perfectly normal to me.
Regarding your max-width-lightbox-thingy you might want to try to enable a global max-width (around 1440-1920px) to the whole page. This way you can optimize your pictures to the given maximum resolution:
(but, I don’t really know if the lightbox is actually adapting the max-width, too. Further thoughts on that below)
—A conceptional thought at the end:
I’d try to connect all the images in your frontpage to a full project, where the images are shown in bigger sizes instead of putting a link in the lightbox caption (my guess is that users won’t try to click them anyway).
This way you can get rid of the lightbox all together and have better control over the size of the images ;)
@arminunruh Thank you!
The code works fine! Is there any way to ease-out the transition to transparent?
Hey one easy solution would be to not use a png
But I wanted to prevent that (font-based) images look blury because of jpeg-compression and also wanted the background color of given images to appear in the same shade as the page background. (which is sometimes not controllable dependig on color renderung and image profiles)
Ah sorry,… didn’t read that you want to prevent resizing in Lightbox,… I’d simply go for a sufficient resolution with a good compression something around 1600×1600 or bigger (you can easily compress these around 300-400kb)
Since you're a photography professional visitors will be ok when images need a wee bit of loading time. Add in some lazy loading an it’s all fine — just my 2 cents.
I just checked your link. On all my browsers (Chrome, Safari, Firefox) the colors look totally fine on all my displays. It seems to be a problem with your calibration settings for your monitor of some sorts.
If you want to make sure that images aren’t displayed bigger than they are just give them a max-width via a custom class or id.
Something along the lines of:
Then add that class / id to the images you want (via right klick in the gridder):
If you don’t want wordpress to kick out your profiles activate the option Armin mentioned above and optimise your pictures beforehand.
I’d recommend to use xn-convert (or similar) to do so. You can batch process your hi-res exports and the end result is way smaller and way better in quality than anything compressed with PS or LR.
All along I wouldn’t stress out about the image-profiles too much.
sRGB is the best choice 99% of the time but depending of the browser and if that browser is capable of interpreting image profiles it’s absolutely not controllable what the end-user may see…
It’s similar with typography / fonts – Because the internet.
Just define the hr sytle in the settings and set up rows in the gridder.
Page should have no (left & right) frame to make the lines go border to border of the viewport.
Add Project-Thumnail in the first column of each gridder-row and the text afterwords.
These steps should bring you pretty close. Rest ist fine-tuning and perhaps a wee bit of custom css – something like overflow-hidden etc. ‹— just guessing, here.
Perhaps I just didn’t figure out how… but I wish there would be an option to globally set where image captions apear.
Right now they appear left, centered or right aligned below the image (depending on how you set the text to be aligned). It would be super cool to have an option to define if image captions appear below or inside
This feature unfortunately only is available for Project Thumbnails right now. Would be great to see the same or a similar treatment for image captions.
Similiar to these settings:
All the best!
If this is already there please point me in the right direction.
Hi there again!
I’ve got a strange issue which I solved by removing the Top Frame – Nontheless it feels more like a bug than a feature:
On the first row of a project or page Use Browser Height for Row Height only really works when there is no Top Frame set. As soon as there is a Top Frame and Use Browser Height for Row Height set it’s the browser height plus top frame
From a logic standpoint this makes total sense but still feels kinda wrong. I‘d expect Use Browser Height for Row Height to always be the browser height or at least be browser height minus top frame (more like Use Viewport for Row Height) no matter which frame is set.
I hope this makes any sense?
Loving laytheme like hell ♡
@mariusjopen I sent the correct one,… sorry.
Just to make sure:
the red backgrounds shouldn‘t be there. It’s just a random color I chose to make the above mentioned behaviour visibile.
For my understanding it would be logical to hide the placeholder background color of the lazy load images as soon as the images have loaded.
I could choose to have no placeholder background color for lazy load images which causes a bit of a usability issue since the user doesn’t know if there are images being loaded or the page is just blank.
Hey there Forum,
Since my old site was lacking the awesome control laytheme has I'm currently rebuilding my portfolio with the latter. I'm really pleased with what’s possible and am getting good results so far.
One thing I noticed:
When a project relies on transparent PNGs and you set a placeholder background color it stays behind said images after loading.
Since I'm using rather big images for my projects lazy loading is a nice feature but I cannot use it with the behaviour mentioned above. It would be cool to transition that background color to transparent or overall page-background color after images have loaded.