Photo galery and potrait photos

hi, i just made my first website with sparkle and i have a small problem. when i use photos of the portrait format i cannot fill the left and right side with a transparent colour it stays white. please advise what i need to do. have a look at my website www.suzart.de
kind regards, susanne

In common with a lot of galleries used in websites, the container is usually a fixed dimension. This means that portrait images will tend to fit themselves to the height of the gallery - creating the white space on either side. Some galleries, however, will adapt the dimensions to the aspect ratio of the images they display. This can look a bit ugly to the end user as the gallery will tend to change size and shape depending on the image being displayed.

The best way to overcome the issue is to simply pre-edit your images so they are all the same aspect ratio. This will mean cropping those portrait images so you won’t see the full image in the gallery. It’s a sort of trade-off between a nice, neat looking gallery, or one that hops about and changes dimensions.

hi franc, thank you for your informative answer. however i consider to use two gallaries: one for portrait and one for landscape. all the best, susanne

A good option - keep it simple!!!

@Suzart.de, Looks like you found yourself a simple solution! :slight_smile:

Just one obvious issue with your website…
You have your content rolling over the top of your main navigation. In sparkle make sure you have your main navigation block “Arrange Front” so all the content will move under it.

One option, a workaround I am showing here, is to make a wide box and make the letterbox fill color of the gallery match the color of the wide box. Yes, it is a departure from the look of the page, but it’s an option.
Dave

Thanks Dave, I’ve discussed your proposal with Susanne. We really appreciate your suggestion but as you mentioned it does take away the artistic look of the page. We will look for more inspiration how we can use Sparkle to share photo’s in a artistic way. Best regards, Susanne & Hans

Thanks for your feedback. We have updated the site in a way that the main navigation block now also moves with the content. Best regards, Susanne & Hans

1 Like

I’ve noticed that there is a trend these days for creating masonry galleries on artistic websites. These allow images to be displayed quite creatively in image blocks on the page. These can be manipulated for different device sizes, so can be quite a flexible way to display galleries. The beauty of this option is that it doesn’t matter what the orientation of the images are - in fact, you use the orientations to design the image block. By having each image in a lightbox, they will open without any white space on either side or top and bottom. Even if you use the fill option in your image boxes and end-up cropping them slightly, when they open In a lightbox, the full size image is displayed.

Web page space is probably the cheapest you can get, so why not use it creatively to display your images in a more artistic way? Below is an example of a masonry gallery created in Sparkle - maybe it will give you food for thought. If you want to see this example as a live site, CLICK HERE - works on mobile also.

5 Likes

Thanks Franc, this is great inspiration! We will look into it to see if we can achieve this kind of gallery. Since Susanne and me are just starting to explore Sparkle it could be that we need some more guidance how you realized this. Best regards, Susanne & Hans

How cool is this?
Thanks for the idea! Love it!
Dave

The idea came from my daughter. She designs websites for art galleries. She tells me that that gallery pages in websites should be set out the same way as a real gallery. Hang your pictures on plain coloured walls so that visitors can get an overall glimpse of everything on offer without any distractions. When they spot pictures they like, they can move closer and focus their attention on the pictures in greater detail. She tells me that web pages should be no different - you just use a Lightbox instead of having to move closer. She insists that galleries on websites should show of the artwork - not the widgets that can be put on the page. Makes sense to me!!!

3 Likes

@francbrowne, You have a wise web design daughter! :slight_smile:

1 Like

@francbrowne

Wonderful explanation from your daughter.
Indeed, it makes a lot of sense … :+1: :slightly_smiling_face:

we have updated the website and created a page with photos: https://suzart.de/photos.html

Looks much better - a great job at setting out the images. Personally, I would prefer a plain background (either black or white) so that the images have more impact. The busy background can be quite distracting on a gallery page. as a I mentioned in a previous post, you wouldn’t see such a background in a real art gallery, so maybe you should see how it looks without the additional imagery in the background. Ultimately, it’s all about personal preference, but certainly a more pleasing layout than having various size and orientation images opening in a normal gallery widget. Another option could be to use a blurred background image so that the main images you’re promoting get more prominence in the page. - just an idea!!!

@Moevi.nl, I’m wondering if anyone else is having issues with how long it takes for your website to load? After 4-5 minutes everything loaded on the page (sorry, way too long) and then I had to wait for the larger images to load taking 40-60 seconds each time.

It might be because I’m on the other side of the world?..

The image load represents about 9.8 mb, which is quite normal for an image intensive site. However. If you also include the background images (there appears to be 3 of them) they increase the image load to 24.2 mb. which is quite high. Even more reason to think about replacing the backgound with plain colours.

@Moevi.nl
@greenskin

Same for me … when I try to load the website, it takes a very, very long time … minutes … and the background images don’t load completely … I’m also on “some other side of the world” … but I don’t have this problem with other websites …

So I wonder if the web server of suzart.de is slow? :thinking:

Thanks for your feedback. The website is hosted from a low cost hosting server (10 Euro/year per site) and it might not be the fastest. I use the same for hosting my own website https://www.moevi.nl/ and so far got no complaints about speed.