node_image: link directly to the image and display with thickbox
GiorgosK - February 11, 2007 - 17:03
| Project: | Node Images |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
instead of having a javascript call open the images
if the user does not have javascript enabled then they can't see the larger image
this way it would be simple to let thickbox (jquery addon / and drupal module) if its installed to handle the displaying of the larger image
its kind of user non friendly to open up images in a new browser window (IMO)
#1
I have hacked the node_image.module to display the images using thickbox
If anybody needs it
I have replaced line 578 of node_image.module
$output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.file_create_url($image->filepath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
with
$output .= '<a href="'.file_create_url($image->filepath).'" class="thickbox" title="'.$description.'">'.$thumb.'</a> ';AND have to downloaded and enable the thickbox.module
For the maintainer:
it would be nice if there was a choice in the configuration whether to display images in a new window or with thickbox.
#2
Thanks for your suggestion, I'll install thickbox and play with it.
As for your first issue, if the user doesn't have Javascript enable he wouldn't be able to use thickbox as well.
#3
I know he would not be able to use thickbox but at least the direct link to the image would let him see the image in a window by itself
#4
Thanks alot, it was nice to search and find just what i needed.
#5
To create a thickbox gallery I've made this little function
<?php
function node_images_gallery_thickbox($node) {
if (empty($node->node_images)) {
drupal_set_message(t('No images uploaded for this content.'));
if (user_access('create node images') && node_access('update', $node)) {
$output = t('Click <a href="!url">here</a> to upload new images.', array('!url' => url('node/'.$node->nid.'/images')));
}
return '<p>'.$output.'</p>';
}
$node->node_images = (count($node->node_images) > 1) ? array_slice($node->node_images, 1) : array();
foreach ($node->node_images as $id=>$image) {
$output .= '<a href="'.file_create_url($image->filepath).'" class="thickbox" rel="'.$node->title.'" title="'.$image->description.'"></a>';
}
return '<div id="thickbox_image_gallery" style="display:none;">'.$output.'</div>';
}
?>
I have this function in the node_images.module file, but if you don't want to hack the module you can place it in your template.php file. After that you have to add to your theme_node_images_view function (also if you don't want to hack the module copy that function to template.php and replace "theme" with your theme name) where you read
<?phpif ($format == 'thumbs') {
$output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.
file_create_url($image->mediumpath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
}
?>
change to:
<?phpif ($format == 'thumbs') {
$output .= '<a href="file_create_url($image->filepath)" title="'.$description.'" class="thickbox" rel="'.$node->title.'" >'.$thumb.'</a> '.' '.node_images_gallery_thickbox($node).' ';
}
?>
Note: If you want to use this in an "altered" version, all you have to take care is to place the thickbox calling link
before the node_images_gallery_thickbox call. If you fail to do so the first image will be considered as last in the gallery so you'll face a previous link instead of a next one.
If you have any problems feel free to tell me, cause I hacked a little the node_images module to allow me an additional image size and so i can batch resize images, I also call the gallery from a text link, so the code it's a little different and I might have missed something.
#6
Tic,
This is an awesome mod. I love it. Looks much nicer than the original javascript.
I have one problem though with the gallery.
When two pictures are uploaded to the node, the thickbox gallery says "1 out of 4"
When three are loaded it says "1 out of 9"
When four "1 out of 16"
etc. etc..
Its essentially taking the number of pictures uploaded to the node, multiplying by itself, and uses that value as the total amount of pictures.
I used your code exactly as the way you described and everything seems to be working normally except that.
Do you have any idea what could be going wrong?
Here is a screenshot of a node with only 4 pictures uploaded. It says there are a total of 16:
http://img402.imageshack.us/img402/8872/nodeimageshackzv4.jpg
Thanks,
Lloyd
#7
Probably because you display all the images on the node. I only use one and link that to the gallery. I'll make a patch so you use the images like node_images intend it (to display the larger image) and the image gallery link to open the thickbox.
#8
Here is a patch to make the Open Image Gallery link open a thickbox. I hope it works, cause I have this module heavily "hacked" and maybe I missed something so you are strongly encouraged to back up the file before applying the patch.
#9
Thanks for the patch. It generates a thickbox gallery upon clicking the link, but there seems to be one bug.
I'm getting extra pipe characters "| | |" as if empty links were being generated. They appear after the gallery link.
Is this just due to my theme? Do you know of a solution to fix it?
Here is a screenshot of the problem:
http://img252.imageshack.us/img252/8585/thickboxpatchbugbi0.jpg
#10
Just another note, the extra ||| pipes show up in Firefox only. IE6 and IE7 looks fine.
#11
There are actually empty links. You should get the id's of those links and define in the css file do be hidden.
#12
hello tic,
did you ever figure out to do this with D6?
there is another thread here that touches on the thumbs, but I am really trying to get the gallery link to open in thickbox.
see other thread here: http://drupal.org/node/342963
#13
If you want to use thickbox with D6, the solution posted by GiorgosK works fine (the line you need to change is #767, not #578)
#14
Thanks super, I went with Tic's way of just using the hook in the template file but I am still trying to get it to open in thickbox when you click the image gallery link (for D6) if anyone has figured that out :)
#15
I now use lightbox module, not thickbox, but the idea is almost the same.
In node_images.module change
node_images_linkfunction to:<?php
function node_images_link($type, $node = null, $teaser = false) {
$links = array();
if ($type == 'node' && $node->nid && variable_get('node_images_position_'.$node->type, 'hide') != 'hide') {
if (node_access('update', $node) && user_access('create node images')) {
$links['node_images_edit'] = array(
'title' => t('Edit node images'),
'href' => "node/$node->nid/images",
);
}
if (count($node->node_images) && variable_get('node_images_gallery_link_'.$node->type, TRUE)) {
$qry = db_query_range("SELECT filepath, description FROM {node_images} WHERE nid = %d ORDER BY weight", $node->nid, 0, 1);
while ($s = db_fetch_object($qry)) {
$image = $s;
}
$links['node_images_gallery'] = array(
'title' => t('Open the image gallery'),
'href' => file_create_url($image->filepath),
'attributes' => array('rel' => "lightshow[$node->nid][$node->title]"),
);
}
}
return $links;
}
?>
In
template.phpin your theme folder add:<?php
/**
* Show node images in the node view.
*/
function garland_node_images_view($node, $teaser, $page, $block = FALSE, $count = NULL, $format = NULL) {
if (arg(2) == 'image_gallery' || empty($node->node_images)) return;
$output = '';
$i = 0;
// set maximum number of images for teaser/body
$view = ($teaser ? 'teaser' : 'body');
if (!$count) {
$count = variable_get('node_images_'.$view.'_images_'.$node->type, 2);
}
if (isset($count) && $count == '0') return;
// set image format
if (!$format) {
$format = variable_get('node_images_'.$view.'_format_'.$node->type, 'thumbs');
}
foreach((array)$node->node_images as $id => $image) {
$description = check_plain($image->description);
$pattern = '<img src="%path" alt="%description" />';
$thumb = strtr($pattern, array('%path'=>file_create_url($image->thumbpath), '%description'=>$description));
$fullsize = strtr($pattern, array('%path'=>file_create_url($image->filepath), '%description'=>$description));
if ($info = @getimagesize($image->filepath)) {
$width = $info[0] + 36;
$height = $info[1] + 36;
}
else {
$width = 420;
$height = 315;
}
if ($format == 'thumbs') {
if ($teaser) {
$output .= l($thumb, "node/$node->nid", array('html' => TRUE));
}
if ($page) {
if ($i != 0) {
$output .= l('', file_create_url($image->filepath), array('html' => true, 'attributes' => array('rel' => "lightshow[$node->nid][$description]", 'title' => $description, 'class' => 'node-images-hidden')));
}
}
}
else {
$output .= $fullsize.' ';
}
if ($count>0 && ++$i >= $count) break;
}
if ($block && $count < count($node->node_images)) {
$output .= '<div class="node_images_block_link">'.l(t('View all images'), 'node/'.$node->nid.'/image_gallery').'</div>';
}
return $output;
}
?>
Note that "garland" is the theme name and should be replaced with whatever your theme is.
You have to choose in content types option to manually place the images and add after $links in node.tpl.php
<?phpprint $node->node_images
?>
This will work only in full view. If you want it to work on teaser change the output for teaser to be like the one for page.
But the needs depend from site to site and the code has to adapt for the needs.
#16
Thanks for posting this tic!
First off, I disabled thickbox and installed and enabled Lightbox2 to try your method.
- changed the node_images_link function in the node_images.module
- added the code to my template.php file (after i deleted the old function you made for thickbox)
- changed garland to my theme name (also tried phptemplate with same results)
- for the content type under node images I set it to "Manually set in node template by variable $node->node_images"
- added the print $node->node_images line after $links in node.tpl.php (since I have custom tpl file for my content type called node-MYCONTENTTYPE.tpl.php I also added the line to it as well)
- created class in my css file called node-images-hidden and set the visibility: hidden
So here are my problems:
1) On my content type page now, the node images thumbnails are now gone. I cant get them to show up anymore.
2) If I click on View All Images it does come up in Lightbox (yay!) - but it shows image 4 of 4 first instead of 1 of 4. On another node it only shows one image and there supposed to be 2 in the gallery.
Are there any other steps I am missing?
Thanks again
**EDIT** - I took out the visibility:hidden on the class above and I changed the line:
$output .= l('', file_create_url($image->filepath), array('html' => true, 'attributes' => array('rel' => "lightshow[$node->nid][$description]", 'title' => $description, 'class' => 'node-images-hidden')));to this:
$output .= l($thumb, file_create_url($image->filepath), array('html' => true, 'attributes' => array('rel' => "lightshow[$node->nid][$description]", 'title' => $description, 'class' => 'node-images-hidden')));for both $teaser and $page and now the thumbnails show up. However its only displaying 3 of the 4 that its supposed to. The first image is missing. When I click on one of the 3 it shows all 4 images in Lightbox but on the actual content type page itself, there are only 3 thumbnails when there used to be and supposed to be 4. The other problem (#2 above still exists)
#17
What the code does is to take the first image and link the "gallery" link to it (I think you use the "View all image" instead"). After that to $node->node_images it only adds the rest of the files, but just the links. If you want your link to be thumbnails instead you have to add $thumb like you did.
If you don't display $links in your teaser view that's why you don't see the first image in the lightbox gallery. The thumbnail image in teaser it's a link to the page view and not a lightbox link.
Use my contact form to send me your files and a desired layout and I'll try to help.
As I already stated, all changes are a per site basis, depending on the layout and functionality desired.
#18
Need lightbox2 patch too!
#19
Which patch? Lightbox2 dev snapshot or you mean something else?