Customization to show which images are hidden

[jfriend]

Lots of folks have asked for the ability to see which images are marked hidden. This customization will put a small red X in the upper left corner of a thumbnail in the Smugmug view if the image is marked hidden. It only does this when you are logged in so your viewers won't see anything different.

Here's what it looks like when an image is marked hidden:

http://content.screencast.com/users/jfriend/folders/Jing/media/3b1965b4-f005-4772-8265-635bee9c2076/2009-09-10_2313.png

To install this customization, all you do is copy this code to your bottom javascript. It only works in the Smugmug view, not in journal, all thumbs, traditional, etc... and it only shows the X when you are logged in. If you want the X to look differently, it can be styled differently with CSS overrides.

Paste this code in your bottom javscript:



//--------------------------------------------------------------------------------------------------------------------
// MarkHiddenThumbs puts a red X on thumbnails in the Smugmug view that are hidden
//
// Installation and support is here: http://www.dgrin.com/showthread.php?t=143433.
//--------------------------------------------------------------------------------------------------------------------
if (typeof(JLF) == "undefined") var JLF = new Object;

// Declare a global object with our various methods on it. This puts all of our methods in their own namespace like YUI does.
JLF.HiddenMarkers =
{
// global data variables on the object
oldHidePhoto: "",

// externally accessible methods

// Replacement for the built-in hidePhoto function.
// It calls the original function, then updates the hidden marker for the affected thumb
NewHidePhoto: function(status, ImageID, ImageKey)
{
var retVal = JLF.HiddenMarkers.oldHidePhoto.apply(this, arguments);
var thumb = YD.get("photoBox_" + ImageID);
if (thumb)
{
JLF.HiddenMarkers.MarkSingleHiddenThumb(thumb);
}
return(retVal);
},

// Set the style from a whole style string rather than one attribute at a time
SetStyleString: function(element, str)
{
var styles = str.split(/\s*;\s*/);
for (var i in styles)
{
var pieces = styles[i].split(/\s*:\s*/);
if (pieces.length > 1)
{
YD.setStyle(element, pieces[0], pieces[1]);
}
}
},

// Update the hidden status of a single thumb
MarkSingleHiddenThumb: function(element)
{
try
{
// get existing marker if here
var markers = YD.getElementsByClassName("hiddenMarker", "div", element);
var imageID = element.id.substr(9); // strip off "photoBox_" off the id to get just the id
if (photoInfo[imageID].Status == "Hidden")
{
// if there is no marker yet, add one
if (!markers || (markers.length == 0))
{
var links = element.getElementsByTagName("a");
var imgs = links[0].getElementsByTagName("img");
var newDiv = document.createElement("div");
newDiv.className = "hiddenMarker";
JLF.HiddenMarkers.SetStyleString(newDiv, "position: absolute; top:1px; left:5px; z-index:10; color: #F00; font-size: 14pt; font-weight: bold; font-family: Arial;");
newDiv.innerHTML = "X";
imgs[0].parentNode.insertBefore(newDiv, imgs[0]);
}
}
else // not hidden now
{
// if there's a hidden marker, then remove it
if (markers && (markers.length != 0))
{
markers[0].parentNode.removeChild(markers[0]); // remove it
}
}
} catch (e) {}
},

// Update the hidden status of all thumbs
// Only written to work in the Smugmug view when logged in
// Other views don't appear to have the photoInfo array which gives us the hidden status
MarkAllHiddenThumbs: function()
{

if (YD.hasClass(document.body, "loggedIn") && YD.hasClass(document.body, "smugmug"))
{
YD.getElementsByClassName("photo", "div", YD.get("thumbnails"), JLF.HiddenMarkers.MarkSingleHiddenThumb);
}
}
};

// Install our replacement function for hidePhoto
if (typeof(hidePhoto) == "function")
{
JLF.HiddenMarkers.oldHidePhoto = hidePhoto;
hidePhoto = JLF.HiddenMarkers.NewHidePhoto;
}

// Register for notifications when the Smugmug view has been rendered
onPhotoShow.subscribe(JLF.HiddenMarkers.MarkAllHid denThumbs);

// --------------------------------------
// End of MarkHiddenThumbs code
// --------------------------------------

[Andrew Maiman]

Thanks! Installed the code, looks like it's working well.

[Mohamed.Ghuloom]

Thanks for this John
Installed it

[SamirD]

Great idea. I'll have to add this when I get a chance.

[tyroprate]

Nice. Works well. Thanks a lot.

[shaunking]

Once I confused a client about the number of images I had in a gallery. I forgot that some were hidden. Thanks so much for this practical code that will save me from another round of stress.

[derektom]

Jfriend, thanks for this but can you or anyone who's gotten this to work please provide more details on getting to my "bottom javascript" to install this?

Based on that description, I'm expecting something like a "Customize - Bottom Javascript" link to an empty box somewhere on my SmugMug homepage (or is this gallery specific?) that I could paste and submit the code.

Thanks in advance for any insight!

UPDATE: Did more searching and I'm guessing these Javascript customizations require a SM "Power User" or "Professional" account - am I correct?

Found answer here (these customizations are only for Power User or Pro accounts): https://secure.smugmug.com/help/customize-faq

[agallia]

Lots of folks have asked for the ability to see which images are marked hidden. This customization will put a small red X in the upper left corner of a thumbnail in the Smugmug view if the image is marked hidden. It only does this when you are logged in so your viewers won't see anything different....]
Great, John. Slick too. Installed without a hitch and works fine. Question: Can anything be done to have the red "x" show in the Delete Many Photos tool? That would be so handy too. Thanks for all your great SM assistance.

Happy New Year!

[jfriend]

Great, John. Slick too. Installed without a hitch and works fine. Question: Can anything be done to have the red "x" show in the Delete Many Photos tool? That would be so handy too. Thanks for all your great SM assistance.

Happy New Year!Smugmug doesn't include user scripts in the Delete Many Photos page so this type of script wouldn't be present in those pages and thus couldn't work there. Sorry.

[vegaguy]

Hey all, so I had this code in there and still do and it worked great but now I just noticed it ain't there anymore.?. The only thing I can think of that I changed recently was the addition of the 'Customize Package From This Pro' at http://www.dgrin.com/showthread.php?t=164117 .... does anyone have an idea on this one? I loved the Xs : ( Awesome code btw. please help anybody?

[jfriend]

Hey all, so I had this code in there and still do and it worked great but now I just noticed it ain't there anymore.?. The only thing I can think of that I changed recently was the addition of the 'Customize Package From This Pro' at http://www.dgrin.com/showthread.php?t=164117 .... does anyone have an idea on this one? I loved the Xs : ( Awesome code btw. please help anybody?I'm not sure what to say. The code seems to be still working, but I obviously can't see the hidden images in your own gallery. If I phony up a hidden image in your gallery (by temporarily setting a few JS variables), it shows the red X on it. What browser are you seeing this issue with? Have you tried clearing your browser cache? Does your browser report any JS errors?

[vegaguy]

I'm not sure what to say. The code seems to be still working, but I obviously can't see the hidden images in your own gallery. If I phony up a hidden image in your gallery (by temporarily settings a few JS variables), it shows the red X on it. What browser are you seeing this issue with? Have you tried clearing your browser cache? Does your browser report any JS errors?

Clearing the cache didn't help. It is Google Chrome. It did work not too long ago. I am not seeing any reported JS errors... is that noticeable?

[jfriend]

Clearing the cache didn't help. It is Google Chrome. It did work not too long ago. I am not seeing any reported JS errors... is that noticeable?I'm sorry - I don't really know what could be different about Chrome and that's not a browser I have installed.

[WinsomeWorks]

I'm so thankful for this script -- it has saved me countless hours of work, the details of which I'll spare you! Recently, one thing I've found handy is to move all the hidden thumbs to the end of my gallery, so that I can then arrange it better (according to what the viewer will actually see) That still allows me to print others myself. The only way I've found to do that is write down all the file numbers of hidden photos and then go to one of the arrange methods & arrange them. So I'm just making sure-- there are no move, arrange, or sort tools or customizations that allow for that little red "X" to show up while in any type of arrange box, correct?

Also, I just installed John's "download image" button & also his customization to take you directly to a gallery when it's the only gallery in a sub-category or whatever. Both are great to have, & I had them working in seconds after reading the instructions. Thank you greatly for sharing these!

[jfriend]

I'm so thankful for this script -- it has saved me countless hours of work, the details of which I'll spare you! Recently, one thing I've found handy is to move all the hidden thumbs to the end of my gallery, so that I can then arrange it better (according to what the viewer will actually see) That still allows me to print others myself. The only way I've found to do that is write down all the file numbers of hidden photos and then go to one of the arrange methods & arrange them. So I'm just making sure-- there are no move, arrange, or sort tools or customizations that allow for that little red "X" to show up while in any type of arrange box, correct?

Also, I just installed John's "download image" button & also his customization to take you directly to a gallery when it's the only gallery in a sub-category or whatever. Both are great to have, & I had them working in seconds after reading the instructions. Thank you greatly for sharing these! The "X" appears to show for me in the "Arrange Mode" (where you click the checkbox for arrange in some views and then you drag/drop to change position. It does not work in the other methods of arranging because Smugmug does not include your customizations in those screens.

[WinsomeWorks]

The "X" appears to show for me in the "Arrange Mode" (where you click the checkbox for arrange in some views and then you drag/drop to change position. It does not work in the other methods of arranging because Smugmug does not include your customizations in those screens. Hmm -- I'm not sure where you mean to "click the checkbox for arrange in some views". I'm not seeing any visible "X" in any of my arrange tools. I tried going to this one: "Tools > Many Photos > Arrange > Drag to Arrange " , which is what I thought you meant. But no Xes. I also tried the other ways to arrange: " Arrange > Arrange Photos", " Arrange > Sort", and "Arrange > Arrange by Number" (all under "Many Photos") . If there's some other checkbox, I don't know where it is. I'm using FF, btw. [ETA: The gallery I'm working on is unlisted, so I thought perhaps that was the difference between what you & I are seeing. But I just checked a listed gallery with hidden thumbs & don't see them showing in "Arrange" there either. Also tried it in IE, & same results as FF.]

[jfriend]

Hmm -- I'm not sure where you mean to "click the checkbox for arrange in some views". I'm not seeing any visible "X" in any of my arrange tools. I tried going to this one: "Tools > Many Photos > Arrange > Drag to Arrange " , which is what I thought you meant. But no Xes. I also tried the other ways to arrange: " Arrange > Arrange Photos", " Arrange > Sort", and "Arrange > Arrange by Number" (all under "Many Photos") . If there's some other checkbox, I don't know where it is. I'm using FF, btw. [ETA: The gallery I'm working on is unlisted, so I thought perhaps that was the difference between what you & I are seeing. But I just checked a listed gallery with hidden thumbs & don't see them showing in "Arrange" there either. Also tried it in IE, & same results as FF.]This way of arranging photos:

http://content.screencast.com/users/jfriend/folders/Jing/media/d90ad958-d5fd-4446-95e7-f813d5ebaea4/2010-08-02_0937.png

[WinsomeWorks]

Ok, I see what you mean, John. But I can only arrange them within that one page then (in SmugMug Style), as far as I know. I don't know of a way in SmugMug Style that will allow me to move the hidden thumbs to, say, the 15th page of a gallery. I can only arrange them on the page in front of me, right? Note: My "X"es only show for me when I'm in SmugMug style. (I never cared, because that's all I use... I don't force that style for my viewers though) So, using your method of arranging, I thought perhaps I could temporarily set the viewing style to "All thumbs" & then click the "Arrange" box & drag them where I wanted. But the hidden ones have no "X" when I'm in "All thumbs". Shucks! I'll try force the viewing style to "All thumbs" under "Gallery Settings" and see if that makes the Xes appear for me in "All thumbs" style. [ETA: Forcing viewing style to Thumbnails (or All Thumbs) didn't work either. Should my red Xes be showing for me in other styles?]

[rsquared]

Note: My "X"es only show for me when I'm in SmugMug style. (I never cared, because that's all I use... I don't force that style for my viewers though)

From the very first post in this thread "It only works in the Smugmug view, not in journal, all thumbs, traditional, etc..."

[jfriend]

Ok, I see what you mean, John. But I can only arrange them within that one page then (in SmugMug Style), as far as I know. I don't know of a way in SmugMug Style that will allow me to move the hidden thumbs to, say, the 15th page of a gallery. I can only arrange them on the page in front of me, right? Note: My "X"es only show for me when I'm in SmugMug style. (I never cared, because that's all I use... I don't force that style for my viewers though) So, using your method of arranging, I thought perhaps I could temporarily set the viewing style to "All thumbs" & then click the "Arrange" box & drag them where I wanted. But the hidden ones have no "X" when I'm in "All thumbs". Shucks! I'll try force the viewing style to "All thumbs" under "Gallery Settings" and see if that makes the Xes appear for me in "All thumbs" style. [ETA: Forcing viewing style to Thumbnails (or All Thumbs) didn't work either. Should my red Xes be showing for me in other styles?]Yeah, the Thumbnails view allows you to use the arrange mode with all thumbnails, but the red X doesn't show in the thumbnails view because that view didn't exist when this script was written and it would take a bunch of new code to figure out how to get it to work properly in the thumbnails view. Have you filed a uservoice feature request for Smugmug to just fix this and show us which thumbs are hidden?

[WinsomeWorks]

From the very first post in this thread "It only works in the Smugmug view, not in journal, all thumbs, traditional, etc..." Thanks-- I was about to go back & check on that. I thought that in the past I was able to get images to move to another page of a gallery in the "arrange" style that has the check-box, just by dragging them past the last image on the page I'm viewing. That would solve my problem, because I could do it in Smug Style. But now I'm not able to do that anymore. Is there something I'm missing? Anyone know how to drag to another page in SmugMug Style?

[WinsomeWorks]

Yeah, the Thumbnails view allows you to use the arrange mode with all thumbnails, but the red X doesn't show in the thumbnails view because that view didn't exist when this script was written and it would take a bunch of new code to figure out how to get it to work properly in the thumbnails view. Have you filed a uservoice feature request for Smugmug to just fix this and show us which thumbs are hidden? John, I think a feature request already exists, & if so, I would have voted on it-- I'll have to check & see. So you don't know a way to move photos to a different page when in SmugMug Style either, right?

[jfriend]

John, I think a feature request already exists, & if so, I would have voted on it-- I'll have to check & see. So you don't know a way to move photos to a different page when in SmugMug Style either, right?I'm not aware of a way to do that.

[Allen]

...So you don't know a way to move photos to a different page when in SmugMug Style either, right?
Set sort under gallery settings to "none" "ascending".
Under tools > many > more > sort, sort the gallery the way you want it first.
Then move thumbs.

You can "walk" the thumb to the next pages by shrinking and expanding the
browser. Expand browser to show max thumbs, move thumb to last position.
Shrink browse and move to last position. Kinda like that.
or just put in the new position number in the other sort option.

[WinsomeWorks]

Set sort under gallery settings to "none" "ascending".
Under tools > many > more > sort, sort the gallery the way you want it first.
Then move thumbs.

You can "walk" the thumb to the next pages by shrinking and expanding the
browser. Expand browser to show max thumbs, move thumb to last position.
Shrink browse and move to last position. Kinda like that.
or just put in the new position number in the other sort option. Allen, that's pretty crazy!! :D But, it does work-- if you have patience! (& I could get pretty fast at if after awhile) I couldn't really do the first part because I can't see the red "X"es in "sort" either. I mean, I was already kinda beyond that basic sorting anyhow. However, I was able to "walk" 'em to the back of my gallery like you said, w/ the shrink & move idea! Haha! Depending on the size of the gallery, this may be faster than writing down all the #s and the guesswork. Yeah, ummm... we just need those Xes to show up when we're using one of the arrange tools. I still didn't check UserVoice. Will post back if I find something. Thanks for the creative idea!

[Allen]

Allen, that's pretty crazy!! :D But, it does work-- if you have patience! (& I could get pretty fast at if after awhile) I couldn't really do the first part because I can't see the red "X"es in "sort" either. I mean, I was already kinda beyond that basic sorting anyhow. However, I was able to "walk" 'em to the back of my gallery like you said, w/ the shrink & move idea! Haha! Depending on the size of the gallery, this may be faster than writing down all the #s and the guesswork. Yeah, ummm... we just need those Xes to show up when we're using one of the arrange tools. I still didn't check UserVoice. Will post back if I find something. Thanks for the creative idea!
Moving them to the end of your gallery should be easy, just put in a
number bigger then the last one. Or use tools > many > arrange >
arrange photos. Select whatever and hit "end".

[WinsomeWorks]

Moving them to the end of your gallery should be easy, just put in a
number bigger then the last one. Or use tools > many > arrange >
arrange photos. Select whatever and hit "end". Allen, I'm talking about hidden photos. My problem from the beginning is that I can't see which ones are the hidden ones.... so I don't know what number they are without counting through the whole gallery. In tools > many > arrange > etc. I can't see the red Xes, so I don't know what to move! I'm thinking you jumped in here not realizing what the real problem is.... but no matter, cuz one of your solutions works anyway! You see, the only place we can see our red Xes on our hidden photos (if we've installed JFriend's handy RedX customization) is in SmugMug style. SmugMug won't allow them to show up within the "Arrange" tools. Ok, off to check UserVoice now for the solution we really need!

[Allen]

Allen, I'm talking about hidden photos. My problem from the beginning is that I can't see which ones are the hidden ones.... so I don't know what number they are without counting through the whole gallery. In tools > many > arrange > etc. I can't see the red Xes, so I don't know what to move! I'm thinking you jumped in here not realizing what the real problem is.... but no matter, cuz one of your solutions works anyway! You see, the only place we can see our red Xes on our hidden photos (if we've installed JFriend's handy RedX customization) is in SmugMug style. SmugMug won't allow them to show up within the "Arrange" tools. Ok, off to check UserVoice now for the solution we really need!
Just a side note. I can easily find all my hidden photos because I added the
keyword "hidden photo" to them. Why move them?

[WinsomeWorks]

Just a side note. I can easily find all my hidden photos because I added the
keyword "hidden photo" to them. Why move them?
Allen, see post #15. That tells why I want to move them. (that's not the only reason, but it's often the reason). Sometimes I'd like to identify them in the " many photos > delete " function as well, because then I could delete them all if I want. Adding the keyword is a good idea, but I don't know that it would help with the moving problem. The keyword would have to be added to each individually where they are in full view. You can't see the red Xes in "Bulk keywording".

[WinsomeWorks]

Ok guys, I found that feature request in UserVoice. It's actually ranked 16th right now, but I'm not convinced the rankings always mean a lot. http://feedback.smugmug.com/forums/17723-smugmug/suggestions/289143-clearly-indentify-hidden-photos-and-make-it-easi?ref=comments This one is for clearly identifying hidden photos to make it easier to work with them. A lot of the comments mention working with them on other "tools" pages as well, even though the original request isn't especially explicit about that. So if you care about this one, go vote. Supposedly, it's in the "planned" status, but that could already be from a year ago, so don't hold your breath. I just hope if it's implemented, the hidden photos will be marked on all the "Tools" pages of our galleries as well. Otherwise, it's kinda useless since JFriend's customization already works great for the galleries themselves.

[SamirD]

I've implemented this in order to help me find how many of my galleries are missing hidden images that once had them. One question--will this work on the gallery that results from a date search?

[SamirD]

One question--will this work on the gallery that results from a date search?The answer to this is, yes. It does work. :barb

[SamirD]

Another question. Since I use such a high-resolution on my monitor, is there a way to make the X stretch cover the entire thumbnail in some way? This would make it a lot easier to see. What about changing the color? Is that possible? Bright yellow or cyan or green should get my attention...

[jfriend]

Another question. Since I use such a high-resolution on my monitor, is there a way to make the X stretch cover the entire thumbnail in some way? This would make it a lot easier to see. What about changing the color? Is that possible? Bright yellow or cyan or green should get my attention...In this line of the script, you can change the color and font-size however you want:

JLF.HiddenMarkers.SetStyleString(newDiv, "position: absolute; top:1px; left:5px; z-index:10; color: #F00; font-size: 14pt; font-weight: bold; font-family: Arial;");

[SamirD]

Excellent! Thank you very much John! I knew it would be something simple, but I had no idea where to look. :thumb

[SamirD]

I changed the font size to 44 and that seems to work pretty well. Is there a way to center it on the thumbnail?

[jfriend]

I changed the font size to 44 and that seems to work pretty well. Is there a way to center it on the thumbnail?Not easily.

[SamirD]

Not easily.Thank you John. No biggie. I just increased the font to 64 and it's big enough now. :thumb Thank you for the very well written customization!

[Jetranger]

I copied this code in, and it shows the Red X in the corners of all the hidden photos, but the hidded photos don't show (all others show fine). They are just black squares with a red X in the corner. When I click on them, nothing shows on the right (like the photo is all black).

[jfriend]

I copied this code in, and it shows the Red X in the corners of all the hidden photos, but the hidded photos don't show (all others show fine). They are just black squares with a red X in the corner. When I click on them, nothing shows on the right (like the photo is all black).I think Smugmug is having issues showing hidden photos as I've seen several other threads where people have had similar issues. I'd suggest you contact the help desk and ask about your hidden photos there.

[Jetranger]

I think Smugmug is having issues showing hidden photos as I've seen several other threads where people have had similar issues. I'd suggest you contact the help desk and ask about your hidden photos there.

The hidden photos showed fine before the mods.

I'll take the code out again ... thanks ...

[SamirD]

*Makes mental note to check this when back to working on photos again*