Photo Tools in All Thumbs, Traditional and Journal views
darryl
Registered Users Posts: 997 Major grins
In contrast to my last rant, a tiny easy request.
All of the (Bulk) Photo Tools: Rotation, Edit Captions, Delete Photos, should be accessible from these styles that do not have a primary photo in them.
As it stands, *none* of the Photo Tools are available in these styles (unless you count "arrange mode" in Traditional or All Thumbs.)
Easy, right? :-}
All of the (Bulk) Photo Tools: Rotation, Edit Captions, Delete Photos, should be accessible from these styles that do not have a primary photo in them.
As it stands, *none* of the Photo Tools are available in these styles (unless you count "arrange mode" in Traditional or All Thumbs.)
Easy, right? :-}
0
Comments
I thought it would be easy too...
http://www.dgrin.com/showpost.php?p=343774&postcount=379
Portfolio • Workshops • Facebook • Twitter
Portfolio • Workshops • Facebook • Twitter
function addPhotoTools() { if (!YD.hasClass(document.body,'loggedIn')) return; if (!YD.hasClass(document.body,'traditional') && !YD.hasClass(document.body,'allthumbs') && !YD.hasClass(document.body,'journal')) return; re = /photos\/(\d+)/; oPhotos = YD.getElementsByClassName('photo', 'div'); for (i=0; i < oPhotos.length;i++) { re.exec(oPhotos[i].innerHTML); oID = RegExp.$1; oEl = document.createElement('div'); oEl.innerHTML = "<form method=\"get\" name=\"image_tools"+ oID +"\" action=\"/photos/tools.mg\"><input type=\"hidden\" name=\"ImageID\" value=\""+ oID +"\"><input type=\"hidden\" name=\"Type\" value=\"Album\"><select name=\"tool\" onChange=\"document.image_tools" + oID + ".submit();\"><option value=\"\">< photo tools ></option><option>-----------------------</option><option value=\"rotatebulk\">Rotate Photos</option><option value=\"newcrop\">Crop Photo</option><option value=\"newthumb\">Zoom Thumbnail</option>option value=\"color\">Color Effects</option><option value=\"colorbulk\">Color Effects (Bulk)</option><option>-----------------------</option><option value=\"highlight\">Feature Photo</option><option value=\"unhighlight\">Remove Featured Photo</option><option value=\"thisisme\">This Is Me! (Bio Photo)</option><option>-----------------------</option><option value=\"caption\">Edit this Caption/Keywords</option><option value=\"bulkcaption\">Edit Captions/Keywords (Bulk)</option><option>-----------------------</option><option value=\"coordinates\">Edit Geography</option><option>-----------------------</option><option value=\"sort\">Sort Gallery</option><option value=\"move\">Arrange this Photo</option><option value=\"dragndrop\">Drag & Drop Photos</option><option value=\"newnewbulkmove\">Arrange Photos</option><option value=\"bulkmove\">Arrange Photos (Expert)</option><option value=\"splitbulk\">Move Photos</option><option value=\"bulkmovegallery\">Move Photos (Expert)</option><option>-----------------------</option><option value=\"makecopy\">Make 2nd Copy</option><option value=\"replace\">Replace Photo</option><option value=\"delete\">Delete this Photo</option><option value=\"newbulkdelete\">Delete Photos (Bulk)</option></select></form>"; oPhotos[i].appendChild(oEl); } } YE.addListener(window, "load", addPhotoTools);SmugMug API Developer
My Photos
w000000t <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/bowdown.gif" border="0" alt="" >
add this, too, to your css:
.traditional #photos select {width: 150px;}
#allthumbs .photo {padding-bottom: 10px;
padding-top: 10px;
}
.allthumbs #photos select {width: 100px;
margin-top: 5px;
}
it's just right for journal.
Devbobo to the RESQUOOOOOOOOOOOOOOO
Portfolio • Workshops • Facebook • Twitter
Portfolio • Workshops • Facebook • Twitter
hey Dev, nice job! that's a pretty handy solution (photo tools menu for each pic), I like it.
ok, i'm impressed... but can you let me choose how many pics are served up on a journal page
or how about, when I click on a pic in journal view, instead of single image view, I see the pic in Critique style (where the exif data shows) that'd be cool..
or how about .... ahh, just let me know if you need something to work on, I have lots of ideas.
you mean something like this ??
function hackCritique() { if (!YD.hasClass(document.body,'critique')) return; oEl = YD.get('albumTitle'); oEl.innerHTML = "<a href='/homepage/templatechange.mg?TemplateID=9&origin="+ window.location + "'>" + oEl.innerHTML + "</a>"; } function hackJournal() { if (!YD.hasClass(document.body,'journal')) return; var re = /href="((http:\/\/\S*)?\/gallery\/\d+\/\d\/\d+\/(Large|Medium|Small))"/; oPhotos = YD.getElementsByClassName('photo', 'div'); for (i=0; i < oPhotos.length;i++) { oPhotos[i].innerHTML = oPhotos[i].innerHTML.replace(re,"href='/homepage/templatechange.mg?TemplateID=12&origin=$1'"); } } YE.onAvailable('albumTitle', hackCritique); YE.addListener(window, "load", hackJournal);SmugMug API Developer
My Photos
Dev, this is great.... when someone wants to see more detail about a pic in my Journal Large, they click on it and they see the pic in Critique view which displays the the exif details, and smug loupe, etc. Just what I wanted.
First problem is that I limit most of my Galleries to Journal (which I have hacked to be Journal Large). Your "Critique hack" doesn't work when the gallery is forced into Journal view. If I change it to Viewer controlled, it does work, but with a couple issues.
When I am viewing pics in Journal, I decide to click on a pic, and I see that pic in Critique.... nice! So I hit the "back" key and I am back in Journal.... so far so good. Now when I hit the link that takes me to the next Journal Page, I end up back in Critique style again! something not quite right there...
My preference would be to also remove the "next/prev" pic links in Critique mode so the user has to hit the brower's "back" to get back to the Journal. (I already do this in Single image view and it keeps people from clicking on a journal pic, then once they are in Single image view, they start hitting Next, Next, Next instead of going back to the Journal.) Since my journal already shows Large pics, there is no reason to click on the pic unless you want to see exif data, or leave a comment (which nobody will ever see in Journal))
Anyway, this is exacly what I was looking for though... hopefully we can get it to work when the gallery's style is set to Journal!
Thanks again Dev
function checkStyle() { if (readCookie('Template') != '9' && readCookie('Template') != '12') { document.cookie = "oTemplate=" + readCookie('Template') + "; expires=Thu, 07-Jan-2010 00:00:01 GMT; path=/; domain=.smugmug.com"; window.location.href = "/homepage/templatechange.mg?TemplateID=9&origin=" + window.location.href; } } checkStyle(); function hackCritique() { if (!YD.hasClass(document.body,'critique')) return; document.cookie = "Template=" + readCookie('oTemplate') + "; expires=Thu, 07-Jan-2010 00:00:01 GMT; path=/; domain=.smugmug.com"; return; oEl = YD.get('albumTitle'); oEl.innerHTML = "<a href='/homepage/templatechange.mg?TemplateID=9&origin="+ window.location + "'>" + oEl.innerHTML + "</a>"; } function hackJournal() { if (!YD.hasClass(document.body,'journal')) return; document.cookie = "Template=" + readCookie('oTemplate') + "; expires=Thu, 07-Jan-2010 00:00:01 GMT; path=/; domain=.smugmug.com"; var re = /href="((http:\/\/\S*)?\/gallery\/\d+\/\d\/\d+\/(Large|Medium|Small))"/; oPhotos = YD.getElementsByClassName('photo', 'div'); for (i=0; i < oPhotos.length;i++) { oPhotos[i].innerHTML = oPhotos[i].innerHTML.replace(re,"href='/homepage/templatechange.mg?TemplateID=12&origin=$1'"); } } YE.onAvailable('albumTitle', hackCritique); YE.addListener(window, "load", hackJournal);SmugMug API Developer
My Photos
thanks Dev, I gave it a try... still a bit quirky though.
still doesn't do anything if the gallery style is set to Journal. So I changed a gallery to viewer controlled so I could test the new code.
I Clicked on the gallery, I see pics in Journal (page 1). I clicked on one of the pics, I see the pic in Critique, great. I hit the back key, I see the same Journal page, but it is back at the top again (normally, it scrolls down to where I was) ok so far.
But when I selected a new gallery Page, I got a blank page.... then I noticed the stlye chooser was blank... so I chose "smugmug" and the gallery came back in "smugmug". Now if I select different gallery pages, it seems to alternate between Journal and smugmug styles....
not sure how much you want to work on this...(probably should move this to the customization forum) I think it would be a great feature, but I need it to work on gallery's that have their style set to Journal before I could use it (assuming the quirks are resolved).
I really do like seeing the pic in critique mode when I click on an image though.... nice seeing the exif data right there.
yes you will have to leave the galleries as user-controlled...this is because the style changer code only works if it's set to user-controlled. But in saying that...the code automatically sets the style to journal, so there should be no need to actually force it to journal...make sense ?
not show about the other quirkyness, I only tried a small number of functions.
I am going to be away for a few days...i will have another look when i get back.
David
SmugMug API Developer
My Photos
It works like a dream, although all of the double-quotes in the innerHTML for the <photo tools> form need to be escaped (oh crap, there they are when you do a reply). Well, let me see if I can get that to show up properly just on the page. Oof, that was a bunch of work. But I think I fixed a typo in the original code too (a missing < before one of the options). Guess I'm the only one using this code. :-}
function addPhotoTools() { if (!YD.hasClass(document.body,'loggedIn')) return; if (!YD.hasClass(document.body,'traditional') && !YD.hasClass(document.body,'allthumbs') && !YD.hasClass(document.body,'journal')) return; re = /photos\/(\d+)/; oPhotos = YD.getElementsByClassName('photo', 'div'); for (i=0; i < oPhotos.length;i++) { re.exec(oPhotos[i].innerHTML); oID = RegExp.$1; oEl = document.createElement('div'); oEl.innerHTML = "<form method=\\"get\\" name=\\"image_tools"+ oID +"\\" action=\\"/photos/tools.mg\\"><input type=\\"hidden\\" name=\\"ImageID\\" value=\\""+ oID +"\\"><input type=\\"hidden\\" name=\\"Type\\" value=\\"Album\\"><select name=\\"tool\\" onChange=\\"document.image_tools" + oID + ".submit();\\"><option value=\\"\\">&lt; photo tools &gt;</option><option>-----------------------</option><option value=\\"rotatebulk\\">Rotate Photos</option><option value=\\"newcrop\\">Crop Photo</option><option value=\\"newthumb\\">Zoom Thumbnail</option><option value=\\"color\\">Color Effects</option><option value=\\"colorbulk\\">Color Effects (Bulk)</option><option>-----------------------</option><option value=\\"highlight\\">Feature Photo</option><option value=\\"unhighlight\\">Remove Featured Photo</option><option value=\\"thisisme\\">This Is Me! (Bio Photo)</option><option>-----------------------</option><option value=\\"caption\\">Edit this Caption/Keywords</option><option value=\\"bulkcaption\\">Edit Captions/Keywords (Bulk)</option><option>-----------------------</option><option value=\\"coordinates\\">Edit Geography</option><option>-----------------------</option><option value=\\"sort\\">Sort Gallery</option><option value=\\"move\\">Arrange this Photo</option><option value=\\"dragndrop\\">Drag & Drop Photos</option><option value=\\"newnewbulkmove\\">Arrange Photos</option><option value=\\"bulkmove\\">Arrange Photos (Expert)</option><option value=\\"splitbulk\\">Move Photos</option><option value=\\"bulkmovegallery\\">Move Photos (Expert)</option><option>-----------------------</option><option value=\\"makecopy\\">Make 2nd Copy</option><option value=\\"replace\\">Replace Photo</option><option value=\\"delete\\">Delete this Photo</option><option value=\\"newbulkdelete\\">Delete Photos (Bulk)</option></select></form>"; oPhotos[i].appendChild(oEl); } } YE.addListener(window, "load", addPhotoTools);Ah, ok, *now* the above code is cut-and-pasteable into your Javascript. And from Andy, this into your CSS:
.traditional #photos select {width: 150px;} #allthumbs .photo {padding-bottom: 10px; padding-top: 10px; } .allthumbs #photos select {width: 100px; margin-top: 5px; }been looking for a way to see the tools in traditional view for ages!
James Singh Photography <-- my site!!