...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;
}
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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)
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.
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...
/* 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
/* 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...)
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?
Acadiana Al
Smugmug: Bayou Oaks Studio
Blog: Journey to the Light
"Serendipity...the faculty of making happy, unexpected discoveries by accident." .... Horace Walpole, 1754 (perhaps that 'lucky shot' wasn't really luck at all!)
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.
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.
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.
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
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.
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.
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/.
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.
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...
Comments
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
Musings & ramblings at https://denisegoldberg.blogspot.com
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.
My Website index | My Blog
If there was a specific class name for the style then it could be applied just to that gallery style.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
.sm-tile-row-organic .sm-tile-info
.sm-browser-chrome .sm-tile-row-organic .sm-tile-info
Thanks for trying.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Jtring was REALLY close ... he just had a typo where he forgot the "s" in "tiles" in the "sm-tiles-row-organic"
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!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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.
--- 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.
Musings & ramblings at https://denisegoldberg.blogspot.com
I'll pass it along when everyone's back from the New Year and see what people think.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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
Musings & ramblings at https://denisegoldberg.blogspot.com
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?
Tested it on the Saguro gallery: works (hovering displays caption)
Tested i on the gallery page: works (captions always displayed)
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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.
Musings & ramblings at https://denisegoldberg.blogspot.com
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
Musings & ramblings at https://denisegoldberg.blogspot.com
I woke up early to check the fog in SF. Went back to sleep but couldn't resist replying first :P
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks so much for supplying this CSS fix.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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
Musings & ramblings at https://denisegoldberg.blogspot.com
Smugmug: Bayou Oaks Studio
Blog: Journey to the Light
"Serendipity...the faculty of making happy, unexpected discoveries by accident." .... Horace Walpole, 1754 (perhaps that 'lucky shot' wasn't really luck at all!)
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks for listening.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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
Musings & ramblings at https://denisegoldberg.blogspot.com
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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
Musings & ramblings at https://denisegoldberg.blogspot.com
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.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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
Musings & ramblings at https://denisegoldberg.blogspot.com
Chrome and Firefox look the same to me. Hidden until you hover.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
That makes sense then since I don't have a touchscreen.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations