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

2

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • JtringJtring Registered Users Posts: 675 Major grins
    edited 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
    Jim Ringland . . . . . jtringl.smugmug.com
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited December 25, 2014
    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!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited December 29, 2014
    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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited December 29, 2014
    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)
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited December 29, 2014
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • agalliaagallia Registered Users Posts: 541 Major grins
    edited April 19, 2015
    Where is this CSS code inserted?
    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!)
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 20, 2015
    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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited 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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited April 28, 2016
    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.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited April 28, 2016
    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' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited April 28, 2016
    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.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,341 moderator
    edited April 28, 2016
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 3, 2016
    The fix is in test, so it (hopefully) won't be too much longer!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.