Photo Tools in All Thumbs, Traditional and Journal views [Sitemap]

View Full Version : Photo Tools in All Thumbs, Traditional and Journal views

darryl

Oct-30-2006, 01:25 PM

dmc

Oct-30-2006, 04:56 PM

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? :-}

I thought it would be easy too...
http://www.dgrin.com/showpost.php?p=343774&postcount=379

Andy

Oct-30-2006, 05:04 PM

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? :-}Hi daryl, thanks for the feature request. For now, you'll have to click the photo to get it in a single image view. I'll make sure that JT sees this though!

Andy

Oct-30-2006, 06:10 PM

Hey, a little birdie told me to say "stay tuned" you might see something interesting soon :thumb

devbobo

Oct-30-2006, 06:48 PM

Hey, a little birdie told me to say "stay tuned" you might see something interesting soon :thumb

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);

Andy

Oct-30-2006, 06:56 PM

Andy

Oct-30-2006, 07:20 PM

Dev, I wonder if dmc is sending you a bottle of wine or something right about now :lol3

dmc

Oct-30-2006, 08:10 PM

Dev, I wonder if dmc is sending you a bottle of wine or something right about now :lol3

hey Dev, nice job! that's a pretty handy solution (photo tools menu for each pic), I like it. :D told you it would be easy... for Devbobo that is! thanks :bow

ok, i'm impressed... but can you let me choose how many pics are served up on a journal page :wink

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. :thumb

devbobo

Oct-30-2006, 09:26 PM

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..

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);

dmc

Oct-31-2006, 04:51 PM

you mean something like this ??

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. :thumb It does have a few quirks though...

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 :D

devbobo

Oct-31-2006, 05:34 PM

ok, here's a 2nd attempt using a slightly different method..and trying to play nice with people's cookies :D

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);

dmc

Nov-01-2006, 02:23 PM

ok, here's a 2nd attempt using a slightly different method..and trying to play nice with people's cookies :D

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.... :scratch

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.

devbobo

Nov-01-2006, 02:44 PM

dmc,

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

dmc

Nov-01-2006, 02:55 PM

...I am going to be away for a few days...i will have another look when i get back.
David
:thumb

darryl

Nov-15-2007, 08:58 AM

Man, I totally forgot that I requested this, and found it while doing a search to see if I could do a !YD.hasClass.

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;
}

darryl

Nov-15-2007, 09:24 AM

In case you're wondering what the heck this does. Here's the Before shot:

darryl

Nov-15-2007, 09:25 AM

And here's the After shot. Yeah!

birchfield

Nov-16-2007, 03:07 AM

cheers for this :clap

been looking for a way to see the tools in traditional view for ages!

darryl

Sep-26-2008, 02:25 PM

Feh -- I think adding albumkeys and imagekeys broke this hack. Bummer.