How to get rid of the useless map part of the info popup?

afx · February 22, 2015

Hi,
none of my images have GPS information.
When using the (i) popup window I always see this rather useless large area showing "No Map Information"

Is there a way to get rid of this waste of space?

thx
afx

denisegoldberg · February 22, 2015

afx wrote: »

When using the (i) popup window I always see this rather useless large area showing "No Map Information"

Is there a way to get rid of this waste of space?

I don't remember who originally provided this code but I have it installed on my site and it works quite nicely to remove the map box when it isn't needed.

I have this in my theme's CSS:

/* remove empty map box from info popup */
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-map-container,
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-imageinfo-nomapdata-overlay {
	display:none;
}
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-imageinfo-container {
	top:auto;
}

The map remains if the photo includes GPS information.

Try info popup on these photos on my site:
... with GPS: http://www.denisegoldberg.com/Fragments/Photos-by-phone/i-zdJ8xjN/A
... without GPS: http://www.denisegoldberg.com/Wandering-near-home/Winter-2015/i-vnwpGth/A

Updated a bit later to credit the source
Ah, I found the source of the code. Many thanks to thenickdude for his posting of the above CSS here.

--- Denise

Tom Foster · February 22, 2015

Thanks for that Denise, very useful! May have to copy that code!

David_S85 · February 22, 2015

Well, how about that! Thanks Denise, and also big thanks to Nick. Something that a lot of people have been asking about for a year and a half and he writes a small snippet of code to finally take care of the problem.

Allen · February 22, 2015

Does this leave the photos in gallery with geo info map visible? Does it just work on non-geo photos?

I can see this as important if all the photos in a gallery have no geo info but if any do but not all,
it would be almost impossible to find those with without hitting the double arrows in the upper
right corner.

We need a "map this" button on each gallery page like legacy to bring up a map with all tagged photos.
I can get that now using this link but seems to be broken now.
http://maps.smugmug.com/?feedType=geoAlbum&Data=3272272_cDCQWw

denisegoldberg · February 22, 2015

Allen wrote: »

Does this leave the photos in gallery with geo info map visible? Does it just work on non-geo photos?

The photos with geo info still show the geo info. There are two links to photos in my galleries in my previous post - one shows map info, one does not. This is with the CSS applied in the theme so it applies to the entire site.

--- Denise

David_S85 · February 22, 2015

Allen wrote: »

Does this leave the photos in gallery with geo info map visible? Does it just work on non-geo photos?

Click Denise's first link, click a photo to go into Lightbox view, click the "i" info icon, and then keep hitting your right cursor key. You will see that only geo-tagged photos have a map, and the untagged images don't display the map. Both retain full EXIF. Very clean. I don't know if that works on all browsers since Nick seems to write code only for Chrome. But in Chrome, it works like a gem.

EDIT: Ha! Answered about the same time.

Allen · February 22, 2015

The problem is that the mapping feature is completely hidden to visitors unless they by chance
click "photo info" on a mapped photo.

David_S85 · February 22, 2015

Allen wrote: »

The problem is that the mapping feature is completely hidden to visitors unless they by chance
click "photo info" on a mapped photo.

By chance? All info is hidden to the visitor unless they hit the info button. I don't see your point. With screen sizes getting more huge, I personally would like to see SM either increase the size of the bottom right icons (including the info button) a bit, or allow us to be able to scale them. When in Lightbox view, I also would like to see the least amount of clutter on the screen except for the photo I'm viewing. I don't know how one could have it both ways. How would you like to see SM display the info button more visibly and all the time so no one can miss it?

pilotdave · February 22, 2015

David_S85 wrote: »

By chance? All info is hidden to the visitor unless they hit the info button. I don't see your point. With screen sizes getting more huge, I personally would like to see SM either increase the size of the bottom right icons (including the info button) a bit, or allow us to be able to scale them. When in Lightbox view, I also would like to see the least amount of clutter on the screen except for the photo I'm viewing. I don't know how one could have it both ways. How would you like to see SM display the info button more visibly and all the time so no one can miss it?

There used to me a "map" button next to the info button. This problem was created when smugmug combined them. The map button only appeared when the photo had location data, so it was obvious when looking through pictures which ones had a map. Now nobody would know to click the info button to find location data, especially if the "no map data" box is hidden. Visitors might quickly figure out that exif data is available with the info button, but they might never discover that map data is available there on select images too. The solution is to go back to the old map button, or go back to the legacy "map this" button that shows all geotagged photos in the current gallery on a map. Not sure why they ever got rid of that.

Dave

David_S85 · February 22, 2015

So maybe if there was bigger, more visible combination "Map/Info" Icon button? I could easily get behind something like that if there was a slight redesign for those five little icons. The Map/Info could be the left-most icon which would be closer to the pic. I'd imagine that's the one that is more likely to be clicked by viewers.

sarasphotos · February 23, 2015

Although I don't find the solution extremely elegant, I have long since changed the icon text to "Info & Location" to take care of the problem of visitors not finding the map. But I would definitely prefer either an extra map button for pictures with gps info or a return of the gallery-level "map this" button.

Cheers, Sara

David_S85 · February 23, 2015

sarasphotos wrote: »

Although I don't find the solution extremely elegant, I have long since changed the icon text to "Info & Location" to take care of the problem of visitors not finding the map. But I would definitely prefer either an extra map button for pictures with gps info or a return of the gallery-level "map this" button.
Cheers, Sara

Well, that's cool! How are you doing that?

afx · February 24, 2015

denisegoldberg wrote: »

I don't remember who originally provided this code but I have it installed on my site and it works quite nicely to remove the map box when it isn't needed.

Thanks Denise!

The way it looks on your site is exactly what I want.
Unfortunately it does not seem to work on my site, time to start debugging.

thx
afx

sarasphotos · February 24, 2015

Info Box Text Change

David_S85 wrote: »

Well, that's cool! How are you doing that?

@David_S85
I use the following code in my "all galleries" css block. And I don't deserve full credit for it - I found it somewhere in a forum post or on Aaron's or thenickguy's website. :-)

/* Label the info button */
.sm-button.sm-button-image-info:after {
    content: "Info & Location" !important;
    margin-left: 8px;
    display:inline-block;
}

Cheers,

Sara

denisegoldberg · February 24, 2015

David_S85 wrote: »

Well, that's cool! How are you doing that?

sarasphotos wrote: »
@David_S85
I use the following code in my "all galleries" css block. And I don't deserve full credit for it - I found it somewhere in a forum post or on Aaron's or thenickguy's website. :-)
/* Label the info button */
.sm-button.sm-button-image-info:after {
    content: "Info & Location" !important;
    margin-left: 8px;
    display:inline-block;
}
Cheers,

Sara

It's on thenickguy's website with CSS for all of the lightbox buttons. You can find it at http://www.sherlockphotography.org/Customisations/Large-photo-download-buttons/.

--- Denise

Allen · February 24, 2015

A better message on the photo overlay would help tremendously.
BTW, I changed my "Photo Info" text to "Info/Map"

David_S85 · February 24, 2015

Excellent! Thank you.
EDIT: Added and it works!

Now, any way we can get that "i" icon image any larger? Or have it show up first among the icons instead of in the middle?

sarasphotos wrote: »
@David_S85
I use the following code in my "all galleries" css block. And I don't deserve full credit for it - I found it somewhere in a forum post or on Aaron's or thenickguy's website. :-)
/* Label the info button */
.sm-button.sm-button-image-info:after {
    content: "Info & Location" !important;
    margin-left: 8px;
    display:inline-block;
}
Cheers,

Sara

denisegoldberg wrote: »

It's on thenickguy's website with CSS for all of the lightbox buttons. You can find it at http://www.sherlockphotography.org/Customisations/Large-photo-download-buttons/.

--- Denise

Allen wrote: »

A better message on the photo overlay would help tremendously.
BTW, I changed my "Photo Info" text to "Info/Map"

David_S85 · February 24, 2015

Denise, I don't see an option in "Theme" to include a CSS content block there. How and where exactly is this code added?

EDIT: Never mind. Figured it out. Added to the CSS/HTML block in All Galleries. And that also works. Yea! :ivar

And I'll add that this new option allows the site owner to very easily check if one has forgotten to include map info for an image by just quickly scrubbing through all the images in a particular gallery. Hadn't thought of this code as a tool to do that - but this is a nice side benefit.

denisegoldberg wrote: »
I don't remember who originally provided this code but I have it installed on my site and it works quite nicely to remove the map box when it isn't needed.

I have this in my theme's CSS:
/* remove empty map box from info popup */
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-map-container,
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-imageinfo-nomapdata-overlay {
	display:none;
}
.sm-user-ui .sm-panel-imageinfo.sm-imageinfo-nomapdata .sm-imageinfo-container {
	top:auto;
}
The map remains if the photo includes GPS information.
--- Denise

denisegoldberg · February 24, 2015

David_S85 wrote: »

Denise, I don't see an option in "Theme" to include a CSS content block there. How and where exactly is this code added?

EDIT: Never mind. Figured it out. Added to the CSS/HTML block in All Galleries. And that also works. Yea!

The CSS block works where you put it but if you'd like to use the theme CSS block it's just a little hidden.

Edit your theme.
Click the Advanced tab.
Scroll down to the bottom and you will find a Custom CSS entry.

I'm not sure why it's hidden there - it should be easily visible, probably deserves a tab of it's own.

There was a complaint about it when it was first moved, in the thread Please put Edit CSS back at the top of the Advanced tab in Edit theme. Unfortunately there was never a response.

--- Denise

David_S85 · February 24, 2015

Never knew that Advanced pane even existed. Thanks, Denise!

How to get rid of the useless map part of the info popup?

Comments