Add single image (random from gallery)

ceo77 · August 12, 2015

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

denisegoldberg · 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

Allen · 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

denisegoldberg · 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

Allen · August 18, 2015

denisegoldberg wrote: »

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 */
}

Allen · 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.

denisegoldberg · 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

Allen · 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}

Add single image (random from gallery)

Comments