Add single image (random from gallery)

ceo77ceo77 Registered Users Posts: 4 Beginner grinner
edited August 18, 2015 in SmugMug Customization
hi,

is there a way to add a single image randomly on the homepage from a gallery?
background is not solving it, because the image is then shown n the entire background.
slideshow does not solve it, because there is no way to fit on the entire width of the screen.

thanks!

christian

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited August 18, 2015
    ceo77 wrote: »
    is there a way to add a single image randomly on the homepage from a gallery?
    You can add a single photo block to your homepage. I am not aware of a way to show a random image but you could periodically change the image that is shown.

    To see an example, take a look at my homepage.

    --- Denise
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 18, 2015
    Add a HTML widget and put this <img> html in it. In a gallery go to "Get a Link".
    Photo links tab > Buy Link
    You will see a gallery ID_KEY in the Buy Link that looks like this: 27395118_hH2gVP
    Insert that into the img
    Set the photo size

    <center>
    <span style="font-size: 24px">Single random photo with each page load/refresh</span>

    <img src="/photos/random.mg?AlbumID=27395118&AlbumKey=hH2gVP&Size=L" alt="image">
    </center>

    I have it running on this page. Also under the single I had multiple thumbs that random change with page reload.
    http://www.photosbyat.com/Test-old-journal/n-nF9zb
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited August 18, 2015
    Allen wrote: »
    <center>
    <span style="font-size: 24px">Single random photo with each page load/refresh</span>

    <img src="/photos/random.mg?AlbumID=27395118&AlbumKey=hH2gVP&Size=L" alt="image">
    </center>
    The OP will need to balance the request for a photo that fills the space vs. having a random image. Unfortunately using the random image HTML requires setting a size instead of letting the size vary based on the browser size.

    It's really a shame the single photo content block doesn't support specifying a random image from a specified gallery.

    --- Denise
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 18, 2015
    The OP will need to balance the request for a photo that fills the space vs. having a random image. Unfortunately using the random image HTML requires setting a size instead of letting the size vary based on the browser size.

    It's really a shame the single photo content block doesn't support specifying a random image from a specified gallery.

    --- Denise
    Here's the CSS in the HTML box CSS tab. Add the "img" rule and the photo resizes with browser size.
    Should see this on my page.
    img {
      border: 2px solid gold;
      
    }
    
    a {color:yellow;}
    
    img {
        padding: 2px;  /* size of mat inside border */
        background: #fff; /* mat color */
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 18, 2015
    BTW, further down the page I've been testing a journal type page. I'll have to test "img resize" on those also.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited August 18, 2015
    Allen wrote: »
    Here's the CSS in the HTML box CSS tab. Add the "img" rule and the photo resizes with browser size.
    Should see this on my page.
    img {
      border: 2px solid gold;
      
    }
    
    a {color:yellow;}
    
    img {
        padding: 2px;  /* size of mat inside border */
        background: #fff; /* mat color */
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    
    Awesome, thanks Allen!

    --- Denise
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 18, 2015
    As a side note for my site? I've see in the past that the header area does all kind of weird things
    positioning vertically. I have, so far, eight single photo banners used for different folders flowing down.
    CSS hides all but one for each folder. The top margins were a nightmare on the three browsers for each
    banner.

    This is what I had to add for top margin for this random photo widget. The right margin was added so
    the photo had some space on the right side as browsers shrunk.
    .sm-browser-chrome .sm-page-widget-11782937 {margin-top: 65px; margin-right: 10px}
    .sm-browser-ie .sm-page-widget-11782937 {margin-top: 65px; margin-right: 10px}
    .sm-browser-firefox .sm-page-widget-11782937 {  margin-top: 0px; margin-right: 10px}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.