Elastic layout using smugmug custom image size...

Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
edited July 27, 2006 in SmugMug API Support & Integrations
Okay, this is not a hack for a smugmug website per se (although I suppose it could be used as such). I'm in the process of redesigning my blog. What I would really like to have is a completely elastic design. Doing this isn't that big of a deal if text is the only thing on the page. But obviously I'm going to be displaying images from time to time, and of course the site itself will contain graphics.

It occurred to me that smugmug can generate custom image sizes and that this may be extremely useful in avoiding the problems with the various dynamic image sizing methods out there. But, I've got no idea how to translate http://mikelane2.smugmug.com/photos/38673979-280x280.jpg into something that uses em's instead of pixels or that can automatically adjust based on the user-defined text size like the text can do.

If all that wasn't clear enough, I'd simply like to make it so the images resize with the text and I figured that the custom image size feature combined with some javascript would be a snazzy way of accomplishing that. But obviously that's way above my head to do.

So can this be done? If so, can you help me do it? And by help me, I mean show me how :D
Y'all don't want to hear me, you just want to dance.

http://photos.mikelanestudios.com/

Comments

  • bwgbwg Registered Users, Retired Mod Posts: 2,119 SmugMug Employee
    edited July 26, 2006
    Mike Lane wrote:
    Okay, this is not a hack for a smugmug website per se (although I suppose it could be used as such). I'm in the process of redesigning my blog. What I would really like to have is a completely elastic design. Doing this isn't that big of a deal if text is the only thing on the page. But obviously I'm going to be displaying images from time to time, and of course the site itself will contain graphics.

    It occurred to me that smugmug can generate custom image sizes and that this may be extremely useful in avoiding the problems with the various dynamic image sizing methods out there. But, I've got no idea how to translate http://mikelane2.smugmug.com/photos/38673979-280x280.jpg into something that uses em's instead of pixels or that can automatically adjust based on the user-defined text size like the text can do.

    If all that wasn't clear enough, I'd simply like to make it so the images resize with the text and I figured that the custom image size feature combined with some javascript would be a snazzy way of accomplishing that. But obviously that's way above my head to do.

    So can this be done? If so, can you help me do it? And by help me, I mean show me how :D
    i think you'll end up finding that the on the fly resizing is probably gonna be too slow for what you're after. i was working on a critique hack that used the dynamic images and it was so slow that i had to abandon ship on the project.
    Pedal faster
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited July 26, 2006
    bigwebguy wrote:
    i think you'll end up finding that the on the fly resizing is probably gonna be too slow for what you're after. i was working on a critique hack that used the dynamic images and it was so slow that i had to abandon ship on the project.
    Darn. Looks like I'll just go with em sizing with a fairly large image. Good to know anyhow thumb.gif
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • dominikdominik Registered Users Posts: 48 Big grins
    edited July 27, 2006
    http://mikelane2.smugmug.com/photos/38673979-280x280.jpg just comes up blank for me... Where is this on-fly-resizing feature documented? I for one would love square thumbnails (if only because it makes displaying portraits and landscapes in a sidebar much easier).

    That said, document.documentElement.clientHeight/Width gives you the window area in pixels... could be fed to a URL that gets smugmug's dynamically resized image (assuming the url you gave will work). Probably okay to display one image, in its own window, but not advisable for showing lots of images at once. I had code to do something very similar but haven't been able to find it; it was on my old machine and I'm not sure I transferred it over. I will post here again if I do find it.

    I'm unclear as to why you want an ems to pixel conversion, unless you want images to scale as a user adjusts font sizes? As I understand it, ems are linked to font size.

    Hope that helps a bit.
  • Mike LaneMike Lane Registered Users Posts: 7,106 Major grins
    edited July 27, 2006
    dominik wrote:
    http://mikelane2.smugmug.com/photos/38673979-280x280.jpg just comes up blank for me... Where is this on-fly-resizing feature documented? I for one would love square thumbnails (if only because it makes displaying portraits and landscapes in a sidebar much easier).

    http://blogs.smugmug.com/release-notes/2006/05/16/new-features-may-16th-2006/

    It doesn't crop your pics to be square, it will maintain the aspect ratio but it will make it so (in my case) the longest side is no greater than 280px.
    dominik wrote:
    That said, document.documentElement.clientHeight/Width gives you the window area in pixels... could be fed to a URL that gets smugmug's dynamically resized image (assuming the url you gave will work). Probably okay to display one image, in its own window, but not advisable for showing lots of images at once. I had code to do this but haven't been able to find it; it was on my old machine and I'm not sure I transferred it over.

    Man I really need to learn some JS. :uhoh
    dominik wrote:
    I'm unclear as to why you want an ems to pixel conversion, unless you want images to scale as a user adjusts font sizes? As I understand it, ems are linked to font size.

    Hope that helps a bit.

    I am indeed looking to resize the image with the text. If you do this sort of thing right, you can have a page that will appear to zoom in upon text resizing in a user's browser. As it turns out, I won't need the JS or the fancy smugmug custom image size url thingy. Using em's works just fine. Check out my test site to see what I mean. http://ateasetest.blogspot.com/ If you're in firefox just hit <ctrl>+ and <ctrl>- to resize the text and watch what the pics do.
    Y'all don't want to hear me, you just want to dance.

    http://photos.mikelanestudios.com/
  • dominikdominik Registered Users Posts: 48 Big grins
    edited July 27, 2006
    Mike Lane wrote:
    I am indeed looking to resize the image with the text. If you do this sort of thing right, you can have a page that will appear to zoom in upon text resizing in a user's browser. As it turns out, I won't need the JS or the fancy smugmug custom image size url thingy. Using em's works just fine. Check out my test site to see what I mean. http://ateasetest.blogspot.com/ If you're in firefox just hit <ctrl>+ and <ctrl>- to resize the text and watch what the pics do.
    The test site looks cool, though I'm not sure why you want images to adjust with text size :P Maybe it's personal preference though.

    Speaking of elastic designs, is there a way to get smugmug's galleries to take up the entire width of the available window, rather than being constrained to their little box in the middle? I really need to brush up on my CSS :P E.g. If I'm looking at all thumbs in a big window, I'd like to have thumbs from left to right instead of just down a relatively narrow area in the middle. This isn't so much of a concern for other viewing styles.
    </ctrl></ctrl>
Sign In or Register to comment.