Options

CSS for small images on mobile & medium when not?

VocoderVocoder Registered Users Posts: 7 Beginner grinner
edited June 24, 2016 in SmugMug Customization
Greetings. First post here, 3 days into my trial. I'm looking forward to fully converting in the next week or so but have run into a wall that I can't seem to get over on my own...

If I set the homepage images to size small the site looks great on my phone. However, on a monitor, medium size images are needed to build the look I want.

Question - can a CSS guru point me towards a way that I can automatically display small size gallery images on mobiles and medium everywhere else?

Comments

  • Options
    photoclickphotoclick Registered Users Posts: 278 Major grins
    edited June 23, 2016
    If you are using a Single Photo content block to display your image then, instead of playing with CSS, simply set the Photo Size property of that content block to "Fill Width" or "Fit Width". The Smugmug algorithm will automatically serve the size that is appropriate for the current screen. If you are not using the standard content block to host the image, then provide a link to your site so someone can look at it and, potentially, help.
    michaelshapirophotography.com
    tailoredportraits.com
  • Options
    VocoderVocoder Registered Users Posts: 7 Beginner grinner
    edited June 23, 2016
    I'm using a collage landscape gallery - here's my site: mikekrueger.smugmug.com

    One other thing I've noticed is that randomly, the nice arrangement of photos that in that gallery will go wonky and drops one of the images out of the 'grid'. Any help on that would be appreciated as well! Thanks!
  • Options
    FergusonFerguson Registered Users Posts: 1,339 Major grins
    edited June 24, 2016
    Sometimes you want to do exactly what you are saying (I do for headers), but do bear in mind that using CSS affects the rendered image but not the transmitted image, so reducing size by CSS will not reduce the page load time due to image size.

    Finding a way to have Smugmug deliver the right size (different templates or settings) is a much better alternative as they reduce the size prior to transmission.
    http://captivephotons.com
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 24, 2016
    Vocoder I don't know if you have changed anything in your code in the past ca 12 hours (now it is 7:40 UTC), but if not than something worth noting might be that while I could see your changing sizes within one or two page reloads from a Windows Firefox and Windows Chrome, I could not see the same effect on Mac Firefox, Chrome or Safari...which makes me wonder if there is something with the Operating System that causes this weird behavior.
    What I have seen on my Mac before with Collection Landscape galleries is that if the photos do not fit into full lines the last photos will often get displayed in weird sizes - larger than the other line's photos (not necessarily filling it all up then either), this was one of the reasons why I rather hand-coded my portfolio pages and "folder-indexes" than using one of the collage galleries provided. Not sure if my "hand coding" would work for your homepage as it is based on all photos having the same size to get arranged automatically.

    But this makes me wonder if this resizing for collage landscape is rather a bug than a feature...

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    VocoderVocoder Registered Users Posts: 7 Beginner grinner
    edited June 24, 2016
    I've made a couple of small changes since I posted, but the issue is still there for me using Safari and Chrome on Mac, and Edge on Windows. It also happens on Safari for iPhone, but I've coded a mobile-only home page for that issue. I totally agree with your thought about this being a bug. It's a bummer either way - as it affects my customer's experience.
Sign In or Register to comment.