move info bar under slideshow

phaserbeam · December 23, 2013

Hi there...
i have a slideshow here.

I don't like the info bar over the slideshow image. Is is possible to add some CSS to make the layout looking like here? I mean info bar under the slideshow?

I think i need to shrink the slideshow image and must move the info area under the image.

Any ideas how to do that?

Thanks a lot
markus

thenickdude · December 26, 2013

Yes, that is possible with some severe CSS trickery. Try this:

.sm-user-ui .sm-slideshow {
	/* 
	 * Shift the top of the slideshow block down the page so the JS reserves less vertical height for the image.
	 *
	 * Add 12 pixels of extra margin too so there's some consistency with the bottom of the slideshow (which always reserves 12px by JS).
	 */
	margin-top:46px; 
}
.sm-user-ui .sm-slideshow .sm-slideshow-tile {
	top:-34px; /* Move the content back up to where it should have started */
}
.sm-user-ui .sm-slideshow,
.sm-user-ui .sm-slideshow .sm-tile-content {
	overflow:visible;
}
/* Set font and line heights explicitly so we can reserve the right amount of space at the top of the slideshow */
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p {
	font-size:14px;	
	line-height:1.2;
	padding:0;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info {
	padding:10px 16px;	
	height:34px; /* 14px font height plus two lots of 10px vertical padding */
	position:relative;
	overflow:hidden;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p {
	height:1.2em;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p ~ p {
	/* Only permit one line of text to be displayed (so our height allocation for the caption is fixed) */
	display:none;
}

phaserbeam · December 26, 2013

Lamah wrote: »

Yes, that is possible with some severe CSS trickery. Try this:

Cool! Many thanks for that. I just added some text-options and i find this much better now then the default settings.

OK, the captions for portrait style photos could be done better (do not shorten the captions/titles) but that's ok...

Tanks for your help.

Markus

BigRed · December 17, 2017

@leftquark ,
It seems to me very unprofessional that we still need to resort to this sort of tenuous CSS in order to do something as basic as shifting slideshow block captions to below our images. I'm grateful to @thenickdude and @phaserbeam for working it out, but I'm nervous that it isn't sustainable, and it necessarily truncates captions (especially on mobile view).
The Smugmug guiding principle of making our pictures look their best is sorely betrayed by covering them up, simply because we have important text info about them to present. When the Slideshow Gallery Style captions are below, why are Slideshow Block captions on top?? I'm building a new site for an association of artists, and SM is mostly a very good fit -- but this one defect is leaving a sour taste.

Thanks for listening.

move info bar under slideshow

Comments