Add thickbox support to acidfree images (one-line patch)

Hi,

thanks for this. I need integrate thickbox and Acidfree too and I am happy you found some solution. I dont care, if it is clean or not, if it is working! Would be nice to have some Acidfree option to turn thickbox on and off.

Hi.

I did some testing with yours changes to acidfree:

1) it is not working for images inserted via acidfree inline filter - it only loads in thickbox thumbnail itself
2) when I go to my albums, I have to click the NAME of album and not the THUMBNAIL IMAGE of album, because if I do so, only thumbnail of album is loaded into thickbox and nothing else.
3) If I enter the album via its name, I can click any photo and it is properly loaded into thickbox, navigation back and forward is working.

So this solution is promising, but not perfect. I and my users are used to click at album's thumnails, so it would be confusing.

But you are on the right way, so please hold on, I hope you'll find something.

lakyljuk

Hi.

I appreciate you are still working on it. Thanks.

Tested now your latest modification to acidfree.module, but I have to report it still has the same bug - When I click on album's thumbnail, I am not moved inside album, but I see thickbox loading large version of this thumbnail. To get inside album, I have to click album's title, not album's thumnail. Inside album, everything is working as expected - clicking at any photo gives me Thickbox with navigation. Only problem which remains is clicking at album's thumbnail.

Can you help?

lakyljuk

Take a deep breath ..... Yeah, it's working! :)

Album thumbnail and album title will take me inside album, where I can click thumbnails and get thickbox effect. Nice.

Inline pictures - this option works too, thanks.

What I have realized:

1) When I am looking at thumbnails inside album, I realized, that thumbnail itself will trigger thickbox, but it's title doesn't. I personally click always thumbnails, but some user could click thumbnail caption instead, so they would see normal node with enlarged picture, no thickbox. It's just the minor bug, but if you know some easy fix, would be nice.

2) When I have for example one inline acidfree image thumbnail inside story, without thickbox, after click I am taken into enlarged version with option to go backwards or forward in enlarged photos. This is normal AF behaviour. When we have added thickbox to inline images, after click, thickbox is triggered, shows enlarged photo, but I cannot see the rest of the album. I typically have 20 or more pictures in album, one of them attaching as AF inline thumbnail into story. So in this case, if want to see rest of the pictures, I cannot use this inline thumbnail as entry to album. So what to do? I have idea - change AF, so clicking inline thumbnail wouldnt trigger thickbox, wouldnt show me enlarged one, but would take me into the album, this thumbnail belongs to. Then I would be able to click thumbnails and trigger thickbox for browsing them all.

Anyway, thank you again, you did a nice job.

lakyljuk

For those who are confused by all the statements/retractions/corrections, here is the result, coded as a unified diff.

As it happens, class_image.inc is the only file that needs to be changed.

--- orig/acidfree/class_image.inc       2007-05-10 01:07:29.000000000 -0400
+++ patched/acidfree/class_image.inc    2007-09-28 01:34:19.000000000 -0400
@@ -53,7 +53,7 @@
     }
     $info = image_get_info(file_create_path($node->images['thumbnail']));
 
-    $image = _acidfree_image_display($node, 'thumbnail', array('width' => $info['width'], 'height' => $info['height']));
+    $image = _acidfree_image_display($node, 'thumbnail', array('width' => $info['width'], 'height' => $info['height'], 'class' => 'image-thumbnail'));
     
     $h = $info['height'] + variable_get('acidfree_extra_length',12);
     $w = $info['width'] + variable_get('acidfree_extra_length',12);

Hi pillarsdotnet,

you are absoutely right that it is enough to change only one line in class_image.inc. But it still doesn't solve case, when user click thumbnail TITLE and not thumbnail itself. If I click thumbnail I see thicboxed enlarged image, but when I click thumbnail caption, I see only normal enlarged picture, no thickbox. Can this be unified somehow? And also - inline image tag [acidfree:xxx class='image image-thumbnail'] will show me thickboxed enlarged image, but only this one. I am not taken into album this image belongs to and I cannot browse rest of the pictures.

Thanks for your patch anyway.

lakyljuk writes:

If I click thumbnail I see thicboxed enlarged image, but when I click thumbnail caption, I see only normal enlarged picture, no thickbox. Can this be unified somehow?

Short answer: no.

Longer answer:

It's possible, but you'd have to modify the thickbox.js file. Thickbox is triggered specifically when you click on an image which is of class "image-thumbnail". It extracts the image path from the image object and modifies it to obtain the path to the larger copy. You can't extract an image path from a piece of text. I suppose it could work backwards in the DOM object list until it *does* find an image, but it's just easier to remove the link from the text than to make it work the same way as the image.

Anyhow, I don't **want** the behavior you describe. I **like* being able to click on the text and get to the picture node. How else would I get there?

Lets say you are right - is would be easier to remove link from caption than to tweak thickbox.js to accept the text link for displaying original image. You say you _don't want_ to have link displaying thickbox too, same as thumbnail does. That you wouldn't be able to reach normal image node ever. Umm, what about to go to /acidfree, select appropriate album, select Album contents and edit image nodes? No thicbox is launched and you can move these nodes, change their title, rotate them etc.

lakyljuk wrote:

Lets say you are right...

Actually, I was wrong. After reading through thickbox.js, I believe that it is *possible* to have a link display a thickbox popup, by setting the "onclick" attribute, but I'm just not motivated to figure it out right now. See http://drupal.org/node/136153

lakyljuk wrote:

... Umm, what about to go to /acidfree, select appropriate album, select Album contents and edit image nodes? ...

That, of course, is an option, but again, it comes down to personal preference. I don't like the "Album contents" editing mode. I find it cumbersome.

Anyhow, if you want your pictures displayed differently, you of course are free to implement your own theme override.

Find the "theme_acidfree_print_thumb_image() function in the acidfree/class_image.inc file.

Copy it into the template.php file in your theme directory.

If your theme is called "foo" then rename your copy of the function to "foo_acidfree_print_thumb_image()".

Find the line that says:

    $title = l($node->title, $path, array('title' => $node->title), $p, NULL, true, true);

Change it to whatever suits you best.

That, of course, is an option, but again, it comes down to personal preference.

Sure, I am far from forcing anyone on my preferences :) I am grateful for pointing me out to elegant theme override of thumbnail image's look. Thanks.

My solution for this is
find
function _class_image_view_alter(&$node)
in modules/acidfree/class_image.inc

and change
$image = l($image, "node/{$node->nid}", array(), 'size=_original', null, null, true);
to
$image = l($image, file_create_url($node->images[IMAGE_ORIGINAL]), array('title' => $node->title, 'class'=>'active thickbox'), $p, NULL, true, true);
Thickbox window appear when clicking on preview image in album (not in album list or on random image module).

Many thanks for this patch. But it only works when you click on the thumbnail link. Has anyone managed to make it work for the ablum photos? (the photos that show up before the pignation appears).

thanks,

Here's a method that works perfectly for me. Just using some suggestions / changes in this thread, all I had to do was add the following function to my template.php (**nothing** had to be changed with any of acidfree's files)....

function phptemplate_acidfree_print_thumb_image(&$node, $parent=null) {
    $vid = acidfree_get_vocab_id();
    if (count($node->taxonomy[$vid]) > 1 && $parent) {
        $p = "pid={$parent->tid}";
    }
    $info = image_get_info(file_create_path($node->images['thumbnail']));

    $image = _acidfree_image_display($node, 'thumbnail', array('width' => $info['width'], 'height' => $info['height']));
    
    $h = $info['height'] + variable_get('acidfree_extra_length',12);
    $w = $info['width'] + variable_get('acidfree_extra_length',12);
    
    $path = "node/{$node->nid}";
	
    $overlay = l('', $path, array('title' => $node->title), $p, NULL, true, true);
    $image = l($image, file_create_url($node->images[IMAGE_ORIGINAL]), array('title'=>$node->title, 'class'=>'thickbox', 'rel'=>'gallery'), $p, NULL, FALSE, TRUE);
    $title = l($node->title, $path, array('title' => $node->title), $p, NULL, true, true);

    $imagediv = '<div class="acidfree-cell"><div class="acidfree-item acidfree-image">';
    $imagediv .= "<div class='acidfree-thumbnail' style='width: {$w}px; height: {$h}px;'>";
    $imagediv .= $image . '<div class="acidfree-overlay">' . $overlay . '</div></div>';
    $imagediv .= "<p>$title</p></div></div>";
    return $imagediv;
}

Just replace:
function phptemplate_acidfree_print_thumb_image(&$node, $parent=null)
with whatever is appropriate for your theme.

I've coded it so you can navigate to the next and previous images via Thickbox. If you don't want this functionality, simply replace this line:

$image = l($image, file_create_url($node->images[IMAGE_ORIGINAL]), array('title'=>$node->title, 'class'=>'thickbox', 'rel'=>'gallery'), $p, NULL, FALSE, TRUE);

... with this ...

$image = l($image, file_create_url($node->images[IMAGE_ORIGINAL]), array('title'=>$node->title, 'class'=>'thickbox'), $p, NULL, FALSE, TRUE);

A-Ha!
just subscribing

It is possible to remove the image title altogether, so that there is no way to view the full sized image in the "normal" way. Just remove the <p> $title </p> from the function in comment #18. I described this here:

http://drupal.org/node/162257#comment-797344