collage landscape always shows caption in Chrome (should float), OK Edge/IE11/FIrefox

denisegoldberg · December 23, 2014

leftquark wrote: »
...I need to find someone with a Surface. In the mean time, I'm going to try to offer some code and see if it works.

First, try this:
/* Hide the title / caption bar by default */
.sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-tile:hover .sm-tile-info {
  display: block !important;
}

That's a bit too heavy-handed.

It does work very nicely on collage landscape galleries. If you find a surface you can see it in this gallery (which has captions on most of the photos) - http://www.denisegoldberg.com/Travel/Nevada-California-201412/Parks-wearing-color/ (assuming you can add the code in Chrome since I've removed the code from my site).

Unfortunately it also removes the captions from journal-style galleries and it removes the captions from my "galleries" page.

On the "gallery" page at http://www.denisegoldberg.com/Gallery/ it causes very unfortunate behavior. On that page I have the captions set to under. So the captions are gone but when I hover a space opens up between the rows of photos and the caption is shown.

On a folder it removes the caption and shows it on hover - but I have my folders set up to always show the caption. Example at http://www.denisegoldberg.com/Wandering-near-home. I always want the caption to show there.

The kaleidoscope page (http://www.denisegoldberg.com/Kaleidoscope/) behaves like the folders, the captions are gone and show on hover.

Journal style gallery that is a collection (http://www.denisegoldberg.com/Fragments/Top-13-images-2014/), the CSS removes the caption, the like, info, and buy buttons, the keywords, and the link to the source gallery.

I've removed the code.

For any code to work it would need to target only collage style galleries.
I guess maybe I'm a bit inconsistent - I always want the caption to show on pages that essentially allow the viewer to wander through my site. But on the actual collage galleries, they should only show on hover.

Thanks for trying though.

Let me know if you have another idea (short of writing custom code for each gallery, not going to go there). I suppose I can turn the hover off entirely.

It will be interesting to see if this problem becomes more widespread as there are more touch devices out there.

--- Denise

Allen · December 23, 2014

Couple suggestions. In the CSS target only the Chrome browser (.sm-browser-chrome)
and target only the specific galleries (sm-page-node-xxxxx) needed.

.sm-browser-chrome .sm-page-node-xxxxx ....

Good example why we need a specific class name in the for each style.

denisegoldberg · December 23, 2014

Allen wrote: »

Couple suggestions. In the CSS target only the Chrome browser (.sm-browser-chrome)
and target only the specific galleries (sm-page-node-xxxxx) needed.

.sm-browser-chrome .sm-page-node-xxxxx ....

Good example why we need a specific class name in the <body> for each style.

That's a good thought - but I don't want to add gallery-specific CSS in for almost every gallery on my site. That's a maintenance nightmare. I put up with that kind of maintenance nightmare on legacy to get reasonably sized thumbs; I'm not willing to go back to that.

If there was a specific class name for the style then it could be applied just to that gallery style.

--- Denise

Jtring · December 23, 2014

I don't have Win 8.1 to test on either but the following would target containers holding captions in collage landscape galleries on my 7.1 system. The first below is for any browser. The second just for Chrome. "Row-organic" effectively means collage landscape.

.sm-tile-row-organic .sm-tile-info
.sm-browser-chrome .sm-tile-row-organic .sm-tile-info

denisegoldberg · December 24, 2014

Jtring wrote: »

I don't have Win 8.1 to test on either but the following would target containers holding captions in collage landscape galleries on my 7.1 system. The first below is for any browser. The second just for Chrome. "Row-organic" effectively means collage landscape.

.sm-tile-row-organic .sm-tile-info
.sm-browser-chrome .sm-tile-row-organic .sm-tile-info

Adding .sm-tile-tow-organic to the code that was supplied above did not remove the caption anywhere - so it didn't "break" the rest of my site but it also didn't remove the caption from the collage landscape galleries in chrome.

Thanks for trying.

--- Denise

leftquark · December 25, 2014

denisegoldberg wrote: »

Adding .sm-tile-tow-organic to the code that was supplied above did not remove the caption anywhere - so it didn't "break" the rest of my site but it also didn't remove the caption from the collage landscape galleries in chrome.

Thanks for trying.

--- Denise

Jtring was REALLY close ... he just had a typo where he forgot the "s" in "tiles" in the "sm-tiles-row-organic"

/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-tiles-row-organic .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-tiles-row-organic .sm-tile:hover .sm-tile-info {
  display: block !important;
}

Does that work better? I didn't investigate if this makes the other gallery styles usable. I need some sleep and I'll look tomorrow!

denisegoldberg · December 25, 2014

I'm traveling right now (without access to Windows 8.1). I'll try this when I get home in a few days.

--- Denise

denisegoldberg · December 28, 2014

leftquark wrote: »
Jtring was REALLY close ... he just had a typo where he forgot the "s" in "tiles" in the "sm-tiles-row-organic"
/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-tiles-row-organic .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-tiles-row-organic .sm-tile:hover .sm-tile-info {
  display: block !important;
}
Does that work better? I didn't investigate if this makes the other gallery styles usable. I need some sleep and I'll look tomorrow!

Perfect, thanks to both you and jtring!

The captions now show only on hover (collage style galleries) and Journal style galleries retain the text below the photo as desired. Behavior in lightbox is also good.

I'd love it if this could be fixed in smug as opposed to fixing it only for my site - I would think there are a lot of folks out there using hover and collage style galleries who have no idea what their sites look like in Chrome on Windows 8.1.

But - for now, I'm very happy. Thanks again!

--- Denise

Update on December 29 2014:

oh crap! I missed checking one page - http://www.denisegoldberg.com/Gallery. The info style is set to Under on this page. With the code above the folder names are missing except on hover.

I have removed the "fix" from my site and I have turned off the hover on collage galleries for now.

leftquark · December 29, 2014

denisegoldberg wrote: »

I'd love it if this could be fixed in smug as opposed to fixing it only for my site - I would be there are a lot of folks out there using hover and collage style galleries who have no idea what their sites look like in Chrome on Windows 8.1.

I'll pass it along when everyone's back from the New Year and see what people think.

denisegoldberg · December 29, 2014

leftquark wrote: »

I'll pass it along when everyone's back from the New Year and see what people think.

Oh crap! I missed something when I checked this - the fix broke my gallery page. With the fix the folder names do not show on that page.

I've removed the fix from my site.

I've also updated my post saying that this fix worked to not cause confusion for other folks.

I would still like to see this hover work - but for now I have set the info style to off in my collage landscape galleries. I would love to turn it back on - if you have another suggestion (short of adding gallery-specific or folder-specific CSS) I would be happy to try it.

--- Denise

leftquark · December 29, 2014

denisegoldberg wrote: »

Oh crap! I missed something when I checked this - the fix broke my gallery page. With the fix the folder names do not show on that page.

OK, slight change now that I've investigated the code a bit deeper. I'm hoping this should work better. It targets specifically the "info-over" bar when it's enabled. Info-over only exists when the collage style is set to bottom bar and show. I think this might work?

/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-tiles-info-over .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-tiles-info-over .sm-tile:hover .sm-tile-info {
  display: block !important;
}

Tested it on the Saguro gallery: works (hovering displays caption)
Tested i on the gallery page: works (captions always displayed)

denisegoldberg · December 29, 2014

leftquark wrote: »
OK, slight change now that I've investigated the code a bit deeper. I'm hoping this should work better. It targets specifically the "info-over" bar when it's enabled. Info-over only exists when the collage style is set to bottom bar and show. I think this might work?
/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-tiles-info-over .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-tiles-info-over .sm-tile:hover .sm-tile-info {
  display: block !important;
}
Tested it on the Saguro gallery: works (hovering displays caption)
Tested i on the gallery page: works (captions always displayed)

That's better. It didn't work properly on the kaleidoscope page where I had the info over the images but I've changed the info to under for now.
I still need to confirm this works on Windows 8.1 and Chrome - I will do that when I get home this evening. But I've confirmed that it looks OK in other environments which is a step in the right direction (and I know the previous code worked on Windows 8.1 / Chrome so I'm taking a leap of faith that this variation works too).

Thanks again!

Isn't it awfully early in the morning for you???

--- Denise

Updated later:
Oops, nope, that doesn't work either. See next post in this thread.

denisegoldberg · December 29, 2014

denisegoldberg wrote: »

That's better. It didn't work properly on the kaleidoscope page where I had the info over the images but I've changed the info to under for now.
I still need to confirm this works on Windows 8.1 and Chrome - I will do that when I get home this evening. But I've confirmed that it looks OK in other environments which is a step in the right direction (and I know the previous code worked on Windows 8.1 / Chrome so I'm taking a leap of faith that this variation works too).

Thanks again!

Isn't it awfully early in the morning for you???

--- Denise

Crap, nope, that doesn't work either. The folder names are removed from the folders containing galleries, for example here - http://www.denisegoldberg.com/Wandering-near-home (although it doesn't show the problem right now since I've removed the code again).

I'm removing the code again.

Let me think about changing the pages containing folders / galleries to under instead of bottom since that would work without changing the code.
I'll be back later...

--- Denise

leftquark · December 29, 2014

We can target galleries only using:

/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-gallery-images .sm-tiles-info-over .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-gallery-images .sm-tiles-info-over .sm-tile:hover .sm-tile-info {
  display: block !important;
}

I woke up early to check the fog in SF. Went back to sleep but couldn't resist replying first :P

denisegoldberg · December 29, 2014

leftquark wrote: »
We can target galleries only using:
/* Hide the title / caption bar by default */
.sm-browser-chrome .sm-gallery-images .sm-tiles-info-over .sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-browser-chrome .sm-gallery-images .sm-tiles-info-over .sm-tile:hover .sm-tile-info {
  display: block !important;
}
I woke up early to check the fog in SF. Went back to sleep but couldn't resist replying first :P

That looks good! I verified that hover now works properly on collage landscape galleries and that the tiles with captions over them (gallery page, all folder pages) show the captions as desired. (And hopefully I didn't miss anything this time...)

Thanks so much for supplying this CSS fix.

--- Denise

denisegoldberg · April 18, 2015

I have the fix leftquark provided installed on my site so my collage galleries look good on Chrome even on Windows 8.1 on a touch screen monitor. Unfortunately many (most!) other smug sites using collage galleries with a caption that only shows on hover show the same problem I saw without the CSS change.

There are many smug sites currently showing in a way the site owner did not intend - but the owners are probably not aware of the problem unless they also use Windows 8.1 and Chrome.

Is there a reason why this is a CSS change and not a global fix applied to the product?

--- Denise

agallia · April 19, 2015

Where is this CSS code inserted?

denisegoldberg · April 19, 2015

agallia wrote: »

Where is this CSS code inserted?

Place it in your theme CSS or in a CSS block on entire site.

--- Denise

leftquark · April 20, 2015

denisegoldberg wrote: »

There are many smug sites currently showing in a way the site owner did not intend - but the owners are probably not aware of the problem unless they also use Windows 8.1 and Chrome.

Is there a reason why this is a CSS change and not a global fix applied to the product?

Denise, this would also frustrate me and I agree that a sitewide fix would be best. I keep hoping that Chrome will update itself to properly report that a mouse is connected. Right now it's telling us that you're using a touch device without a mouse even though you have a mouse connected. While I have it on our list of things to get to, our sorcerers are currently working on some really great things that we think all of you guys will love.

denisegoldberg · April 20, 2015

leftquark wrote: »

Denise, this would also frustrate me and I agree that a sitewide fix would be best. ... While I have it on our list of things to get to, our sorcerers are currently working on some really great things that we think all of you guys will love.

It's really a shame there are many sites out there that currently don't look right in this environment, but I understand that you have other priorities.

Thanks for listening.

--- Denise

denisegoldberg · April 27, 2016

bump for SmugMug attention...

This problem persists in Windows 10 in the latest version of Chrome if the site does not include the CSS fix that leftquark supplied above. I have seen it on many smug sites on both my computer (large screen, computer embedded in monitor) and my tablet.

I suspect that many site owners have never seen their sites in this environment; they look bad given that on small screens it is not uncommon for the full photo to be covered by the title / caption. I have the fix installed and no longer see the problem on my site.

Note that the problem is only visible if you are using Chrome on a recent version of Windows and the device you are using has a touch screen.

I encourage site owners to apply this fix to their sites.

--- Denise

leftquark · April 28, 2016

Let me refresh my memory on this and get back to you later today ... We are going to make a change that endured the bottom bar is always hidden on mobile, so now's a good time to look into this one

denisegoldberg · April 28, 2016

leftquark wrote: »

Let me refresh my memory on this and get back to you later today ... We are going to make a change that endured the bottom bar is always hidden on mobile, so now's a good time to look into this one

Thank you!

As I mentioned, my site is fine because I used the CSS you supplied, but many others are not.

Please let me know if this is addressed - I'd like to remove the CSS when/if it is no longer needed.

--- Denise

leftquark · April 28, 2016

What we're going to do is hide the Info Bar from all mobile devices. For tablets, the bar will also be hidden, but will either show up on 1) mouse hover, if a mouse is attached or 2) when the photo is tapped on (like when using your finger to scroll the screen), which is essentially a "hover". These changes should fix the issue and not require the CSS (I hope).

I'm working on getting a number of mobile web fixes pushed through, so I'll be sure to let you all know when it's live.

denisegoldberg · April 28, 2016

leftquark wrote: »

What we're going to do is hide the Info Bar from all mobile devices. For tablets, the bar will also be hidden, but will either show up on 1) mouse hover, if a mouse is attached or 2) when the photo is tapped on (like when using your finger to scroll the screen), which is essentially a "hover". These changes should fix the issue and not require the CSS (I hope).

I'm working on getting a number of mobile web fixes pushed through, so I'll be sure to let you all know when it's live.

Thanks for the details.

Will this change also apply to computers with touch screens? I am seeing this behavior in Chrome on my Dell desktop that is essentially a large touchscreen flat panel with a laptop engine in it. With the CSS code the caption isn't showing on my site, but I just checked a gallery on Hikin' Mike's site and on Chrome this gallery shows the captions on every image; on Firefox it doesn't show - http://gallery.imagesinthebackcountry.com/Landscape-and-Nature/Central-valley/.

--- Denise

Hikin' Mike · April 28, 2016

denisegoldberg wrote: »

Thanks for the details.

Will this change also apply to computers with touch screens? I am seeing this behavior in Chrome on my Dell desktop that is essentially a large touchscreen flat panel with a laptop engine in it. With the CSS code the caption isn't showing on my site, but I just checked a gallery on Hikin' Mike's site and on Chrome this gallery shows the captions on every image; on Firefox it doesn't show - http://gallery.imagesinthebackcountry.com/Landscape-and-Nature/Central-valley/.

--- Denise

Chrome and Firefox look the same to me. Hidden until you hover.

denisegoldberg · April 28, 2016

Hikin' Mike wrote: »

Chrome and Firefox look the same to me. Hidden until you hover.

This only happens on a touchscreen computer. Doesn't happen on my laptop, only on desktop with touchscreen.

--- Denise

Hikin' Mike · April 28, 2016

denisegoldberg wrote: »

This only happens on a touchscreen computer. Doesn't happen on my laptop, only on desktop with touchscreen.

--- Denise

That makes sense then since I don't have a touchscreen.

denisegoldberg · April 28, 2016

Hikin' Mike wrote: »

That makes sense then since I don't have a touchscreen.

I gave him your site as an example since mine has CSS on it to fix the problem (above in this thread). You might want to add the CSS to your site as well though...

--- Denise

leftquark · May 3, 2016

The fix is in test, so it (hopefully) won't be too much longer!

collage landscape always shows caption in Chrome (should float), OK Edge/IE11/FIrefox

Comments