Responsive Smugmug Images on WordPress

EverythingEverywhereEverythingEverywhere Registered Users Posts: 91 Big grins

Is there an easy way to implement responsive images using the element?

The closest thing I've found is some code which is 3 years old that you need to manually enter in your functions.php file (https://ramblurr.github.io/smugtools/responsive/wordpress.html)

Even if there was code you could get from the Share button in Smugmug, it would be nice.

2014 Travel Photographer of the Year, Society of American Travel Writers
2013 & 2015 Travel Photographer of the Year, North American Travel Journalists Association

Facebook | Travel Blog | Travel Photography | Instagram | Google+

Comments

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    There's nothing built by SmugMug to do this at this time, though it's certainly a good feature request as we dive into sharing and making sure your photos look good anywhere.

    To confirm, when you say "implement responsive images using the element", do you want the image size that gets returned to be optimized around the size of the element, or can any (large enough) image work, and just have it be scaled down appropriately by the browser? (ie. you could pull in the X4 image and then size it down ... or would you rather it pull the M, L, XL, X2, X3, X4... based on the size of the element its within)?

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • EverythingEverywhereEverythingEverywhere Registered Users Posts: 91 Big grins

    Optimized.

    Currently, you could just serve up a big image and have the browser resize it, but that would slow down page speed by serving up a needlessly large file.

    The srcset attribute allows you to define multiple images. Because Smugmug already has predefined sizes, I would think that part at least would be easy to do for any image hosted on Smugmug.

    2014 Travel Photographer of the Year, Society of American Travel Writers
    2013 & 2015 Travel Photographer of the Year, North American Travel Journalists Association

    Facebook | Travel Blog | Travel Photography | Instagram | Google+
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    When you're browsing SmugMug, we optimize the image that's displayed but we don't have any share options that do this. I'll talk with the team about taking advantage of srcset when we give the HTML code in the Share Panel.

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    Are you aware that IE11 and Edge do not support the srcset and therefore it wouldn't work for visitors on those browsers?

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • EverythingEverywhereEverythingEverywhere Registered Users Posts: 91 Big grins

    Just checking browser market share, there is still 80-85% of the market it would work with.

    Also, if there is an alternative way of doing it, that would be fine too.

    In doing research on this I came across a comment by Don Macaskill @onethumb in 2012 where he talked about supporting the "picture" element. I don't know what the state of things are since that was written in 2012.

    https://www.w3.org/community/respimg/2012/05/11/respimg-proposal/

    2014 Travel Photographer of the Year, Society of American Travel Writers
    2013 & 2015 Travel Photographer of the Year, North American Travel Journalists Association

    Facebook | Travel Blog | Travel Photography | Instagram | Google+
Sign In or Register to comment.