Possible to move Album's title up & over its thumbnail's image?

rsamco · 2016-10-25 04:28:00

I'm am investigating if BL has all that I need to migrate my CE4 website. Everything appears pretty straight forward except for one type of custom CSS formatting that I implemented in CE4 -- having album titles appear over (i.e., on top of) an album's thumbnail -- see http://rick.samcos.com/galleries/g-2016/ as an example. Note that I used CE4 iconic album sets as the base style.

In BL, it appears that an album set's page structure put a thumbnail's caption element outside the <div> containing the thumbnail itself --so I don't see a way to move the caption from below the thumbnail using custom CSS alone. Specifically, this is what a page inspection shows (for a classic album set, but it is very similar for an iconic one):

<figure itemscope="" itemtype="http://schema.org/ImageObject">
	<div class="album-frame">
		<div class="album-thumbnail" style="background-image: url(<imageURL>); top: -1px; left: -1px; width: 184px; height: 184px;">
		<img src="<imageURL>" style="height: 184px; width: 184px;" alt="Album 1" title="Album 1" height="184" width="184">
		</div>
	</div>
	<figcaption itemprop="caption description"> 
		<p class="album-title">Album 1</p>
		<p class="album-description">this is test album using TTG's Backlight</p> 
	</figcaption>
</figure>

It appears to me that I must somehow effectively move the figcaption element up into the preceding album-frame element. Can anyone give me some BL guidance on how to do this? TIA!

rsamco · 2016-10-25 04:31:36

I forgot to include a link to a classic album set in my test sandbox: http://test.samcos.com/galleries/classic-album-set/
And here's one to a iconic album set: http://test.samcos.com/galleries/iconic-album-set/

Matthew · 2016-10-25 14:40:44

This is untested, but the first approach I would attempt would probably be something like this. This assumes a fixed height for your titles, so they would all need to be one line or two, with the "48px" values below replaced with whatever appropriate number. This would go into your custom CSS file.

figure {
	position: relative;
}

.album-frame {
	padding-top: 48px;
}

figcaption {
	height: 48px;
	position: absolute; top: 0;
}

rsamco · 2016-10-26 04:06:20

With some massaging, that did it, Matt! For others' benefit, here's the custom CSS that did it:

/* description classic album set with thumbnails with right&bottom drop shadows and overlaid titles */
.the__albumSet figure {
	position: relative;
	border-radius: 8px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 184px;
}

.album-frame {
	padding-top: 48px;
}

.the__albumSet figcaption {
	height: 2em;
	position: absolute; top: 126px;
	border-top: 1px rgba(0, 0, 0, 0) ;
}

.album-title {
	font-family: Verdana, Geneva, Tahoma, Roboto, 'Droid Sans', sans-serif ;
	line-height: 1em ;
	font-weight: 400 ;
	font-style: italic ;
	text-shadow: 2px 2px #000000;
	text-align: left ;
	font-size: 1em !important ;
	color: rgb(255,255,255) !important ;
}

.album-description {
    display: none;
}

THANKS!

Last edited by rsamco (2016-10-26 04:07:21)

pideja · 2017-04-02 03:09:15

Hello rsamco,

I borrowed your css in order to add some style to my thumbnails. It's looking good, not finished...There are three things I can't figure out:
- the spacing between the thumbnails is a bit tight;
- the image is offset to the left on the thumbnail container;
- is it possible to get the title label transparent rather than black?

This is the modified code I am using:

/* description classic album set with thumbnails with right&bottom drop shadows and overlaid titles */
.the__albumSet figure {
	position: relative;
	border-radius: 2px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 150px;
	width: 300px;
}

.album-frame {
	padding-top: 96px;
}

.the__albumSet figcaption {
	height: 1.5em;
	position: absolute; top: 126px;
	border-top: 1px rgba(0, 0, 0, 0) ;
}

.album-title {
	font-family: font-family: 'HelveticaNeue', sans-serif ;
	line-height: 1em ;
	font-weight: 400 ;	
	text-align: center ;
	font-size: 1em !important ;
	color: rgb(255,255,255) !important ;

http://pideja.ca/nat/en/galleries/

Last edited by pideja (2017-04-02 03:10:24)

rod barbee · 2017-04-02 22:33:48

Thumbnail spacing: try increasing margin in the album set template under Thumbnails> Cells

image offset: which layout are you using? Is this masonry like you mention in your other thread? Try larger thumbnails?

Title background: try changing background color for the cell. If you need the black cell color, then probe the title with the browser selector to see what the exact selector is. Have you tried setting a background-color to the .the__albumset figcaption selector?

pideja · 2017-04-02 23:18:50

The Album-set template is set to Iconic and the Album is set to Masonry.

As for the spacing between thumbnails, in the Album set template, I see:

- THE CELLS/margins & Album Max-width;

By playing around with the CELLS/margins I got rid of the white surface the thumbnail giving the appearance of an offset. Set margin to 0. Thumbnails are still bunched together, doesn't look half bad, but still would like to control that spacing. But strangely, that black label under the white title shows up as white on the mobile display!

rod barbee · 2017-04-03 00:31:44

Margin should control the spacing between the albums.
With the Iconic layout you also have aspect ratio and Thumbnail Coverage options to use. Setting Thumbnail Coverage to Cover will fill the cell. Setting aspect ratio to exactly match that of your thumbnails would also cause the thumbnails to fill the cell.

rod barbee · 2017-04-03 00:37:27

But strangely, that black label under the white title shows up as white on the mobile display!

I'm not seeing this on my iPad or iPhone. I'm seeing white lettering on a black background, placed over the lower left corner of the image.

pideja · 2017-04-03 02:48:15

You are right. The thumbnails do have a black label (background) with white text. But, is it my phone or the thumbnails are off and to the right in "portrait" mode and to the left in "landscape" mode?

pideja · 2017-04-03 03:03:41

I suspect that the custom css I borrowed from rsamco and edited must contain some overriding instructions, because if I set Margin to 5 I get a white border on the right and below the thumbnail. margin_at_5
But if I set it to 1, that border is there but small and to the left. margin_at_1
I have it now set to 0. But the spacing remains the same.

Now looking into the css script.

Last edited by pideja (2017-04-03 03:07:01)

rod barbee · 2017-04-03 05:39:15

the margin setting under Thumbnails > The Cells increases the spacing between the cells. Here I've set the margin at 16px:
http://backlight-rb-test.barbeephoto.co … er-albums/

(I've not created custom thumbnails for the iconic presentation, that's why they look the way they do. But if I had, they thumbnails would be filling the cells and be sharp. For this album, the Thumbnail Coverage setting is set to Auto. Setting it to Cover would fill the cell, but the thumbnail would look blurry because the albums within the set presently have small thumbnails.)

You can check to see if the css you've added is causing the problem by commenting out the new rules and then adding them back in to see when problems occur.

Also, take a look at the next to last rule in your custom css. It's missing a closing curly brace. This negates the copyright centering css that follows.

pideja · 2017-04-04 04:42:50

Fiddling around with the CSS as well as the Backlight Album-set settings. Beginning to look like what I want. Still haven't found how to center that grid of thumbnails.

Also, the original point to that CSS was to have a hover effect. I guess with some trial and error I'll find a way.

Wondering what's the difference between "absolute" and "relative" position?

Last edited by pideja (2017-04-04 04:45:53)

rod barbee · 2017-04-04 06:10:30

A hover effect requires that you use the :hover psuedo-selector in your css.

Here's a recent discussion on hover effects: http://community.theturninggate.net/vie … hp?id=7603

Absolute vs relative positioning: https://www.w3schools.com/cssref/pr_class_position.asp
Positioning can be hard to wrap your head around. There's lots of other info and tutorials out there.

rod barbee · 2017-04-04 06:12:31

It just occurred to me that you might not be referring to actual css hover effects (when the mouse hovers over an object). It that's the case, then you probably want to look more into positioning.

pideja · 2017-04-05 00:06:48

Set hovering as per example suggested:

@font-face {
	font-family: 'HelveticaNeue', sans-serif;
	src: url(/nat/en/backlight/custom/css/HelveticaNeue.ttf);}
	
/* inspector indicates this script is not used by the page.

.about .the__copy .content {
text-align: left;
text-widht: 800px
}	

*/

/* hovering on the album titles */
.albums a:hover p {
	color: #D8D8D8;
}



/* description classic album set with thumbnails with right & bottom drop shadows and overlaid titles */
.the__albumSet figure {
	position: relative;
	left: +100px; /* lateral position of thumbnail grid */
	border-radius: 2px;
	/*box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);*/
	height: 160px;
	width: 320px; /* largeur de la celule */
}

.album-frame {
	padding-top: 96px;
}

.the__albumSet figcaption {
	height: 1.5em;
	position: absolute; top: 115px;/* title position; higher number=lower position */
	border-top: 1px rgba(0,0,0) ;/* label color - black */
}

.album-title {
	font-family: font-family: 'HelveticaNeue', sans-serif ;
	line-height: 1em ;
	font-weight: 500 ;	
	text-align: center ;
	font-size: 1em !important ;
	color: rgb(255,255,255) !important ;
}

/*footer*/
.copyright p{
	font-style: italic;
	text-align: center;
}

Why won't it hover? I have also tried .album-frame:hover or .gallery .item:hover to no avail.

Last edited by pideja (2017-04-05 00:14:24)

rod barbee · 2017-04-05 00:34:16

you need to target the right selector.
this is the css you're actually using:

/* hovering on the album titles */
.album-frame:hover p {
	color: #D8D8D8;
}

instead of what you've posted above (which does work)

Also, later in your css under .album-title, you've got an !important declaration in the color: property. This will override everything. Remove !important.

You should be careful when using !important. Use it only when nothing else will work. In this case, I don't think you need it.

pideja · 2017-04-05 02:33:44

Of course, you are right.

Got the thumbnail caption to reverse upon hover but the background still eludes me. I don't know where it is described in the CSS.
I think it might be nicer if the whole label go from black to white.

I thaught it was .the_albumSet figcaption instruction but alas, no.

rod barbee · 2017-04-05 04:05:30

The reason .the_albumSet figcaption isn't working is that you need two underscores: .the__albumset figcaption

this would make the background transparent:

.the__albumSet figcaption {
background-color: transparent;
}

There are a couple options for what happens when hovering.

1) If you want the label background to go white and the text to go black upon hovering anywhere over the album thumbnail or label, try this:

.the__albumSet figure:hover figcaption {
background-color: white;
}

.the__albumSet figure:hover figcaption p{
	color:black;
}

OR

2) if you just want that to happen upon hovering only over the label itself, then try this:

.the__albumSet figcaption:hover {
background-color: white;
}

.the__albumSet figcaption:hover p {
	color:black;
}

pideja · 2017-04-05 05:07:57

Very nice. Thanks, Rod.

By the way, I'll be starting a new thread: trying to copy the templates for the English side and applying them to the French side in order to have tw sides identical, save for the language used.

Tried it twice and failed miserably. See pideja.ca/nat compare the en with the fr sides.

Last edited by pideja (2017-04-05 05:13:51)

rod barbee · 2017-04-05 08:56:56

so far you've forgotten to assign an album set template to the FR galleries page. But I'm jumping the gun. Go ahead and start another topic.

Community @ The Turning Gate

#1 2016-10-25 04:28:00

Possible to move Album's title up & over its thumbnail's image?

#2 2016-10-25 04:31:36

Re: Possible to move Album's title up & over its thumbnail's image?

#3 2016-10-25 14:40:44

Re: Possible to move Album's title up & over its thumbnail's image?

#4 2016-10-26 04:06:20

Re: Possible to move Album's title up & over its thumbnail's image?

#5 2017-04-02 03:09:15

Re: Possible to move Album's title up & over its thumbnail's image?

#6 2017-04-02 22:33:48

Re: Possible to move Album's title up & over its thumbnail's image?

#7 2017-04-02 23:18:50

Re: Possible to move Album's title up & over its thumbnail's image?

#8 2017-04-03 00:31:44

Re: Possible to move Album's title up & over its thumbnail's image?

#9 2017-04-03 00:37:27

Re: Possible to move Album's title up & over its thumbnail's image?

#10 2017-04-03 02:48:15

Re: Possible to move Album's title up & over its thumbnail's image?

#11 2017-04-03 03:03:41

Re: Possible to move Album's title up & over its thumbnail's image?

#12 2017-04-03 05:39:15

Re: Possible to move Album's title up & over its thumbnail's image?

#13 2017-04-04 04:42:50

Re: Possible to move Album's title up & over its thumbnail's image?

#14 2017-04-04 06:10:30

Re: Possible to move Album's title up & over its thumbnail's image?

#15 2017-04-04 06:12:31

Re: Possible to move Album's title up & over its thumbnail's image?

#16 2017-04-05 00:06:48

Re: Possible to move Album's title up & over its thumbnail's image?

#17 2017-04-05 00:34:16

Re: Possible to move Album's title up & over its thumbnail's image?

#18 2017-04-05 02:33:44

Re: Possible to move Album's title up & over its thumbnail's image?

#19 2017-04-05 04:05:30

Re: Possible to move Album's title up & over its thumbnail's image?

#20 2017-04-05 05:07:57

Re: Possible to move Album's title up & over its thumbnail's image?

#21 2017-04-05 08:56:56

Re: Possible to move Album's title up & over its thumbnail's image?

Board footer