Link teaser thumbnail to gallery node - NOTE: SEE #1 FOR BETTER SOLUTION - NO CODE REQUIRED
| Project: | Views Gallery |
| Version: | 6.x-1.0 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
I've finally come up with a way to link the thumbnails in the Gallery overview page to the gallery node instead of to the image node. It's very tweaky and involves some coding so may not be suitable for everyone.
1. I use pathauto to create automated gallery and image urls. This is important as I'll be using this information to replace the image url with the gallery url in my code. Gallery urls have the pattern gallery/[title-raw] and image urls have the pattern gallery/[field_gallery-title-raw]/[title-raw].
2. Edit the gallery view and change the Row style of the Latest image display from Fields to Node. Now the full teaser will be displayed in the Gallery overview page instead of just the thumbnail.
3. Edit the display settings for the teaser at yoursite.com/admin/content/node-type/image/display. For the Teaser, select short image linked to node for the Image display.
4. Create a node-image.tpl.php file in your theme so that you can strip out the teaser fields you don't want displayed, and just leave the thumbnail image. To do this make a copy of node.tpl.php and rename it.
5. We only want to change the teaser view, so you can add code to the top of node-image.tpl.php to handle just the teaser, and leave the rest of the file as it is. I added the following code:
<?php if ($teaser): ?>
<?php
// get the url of the gallery overview page by stripping off the image part of the node_url, i.e. remove everything after the 3rd forward slash
$gallery_url = substr($node_url, 0, strposnth($node_url, '/', 3));
// Replace the node_url with the gallery url you've just created
$img_markup = str_replace($node_url, $gallery_url, $node->field_gallery_image[0][view]);
// display the image
print $img_markup;
?>
<?php else: ?> .... the rest of the file remains the same6. The strposnth() function used above is as follows:
/**
* just like strpos, but it returns the position of the nth instance of the needle
*/
function strposnth($haystack, $needle, $nth = 1)
{
// Fixes a null return if the position is at the beginning of input
// It also changes all input to that of a string ^.~
$haystack = ' '.$haystack;
if (!strpos($haystack, $needle))
return false;
$offset=0;
for($i = 1; $i < $nth; $i++)
$offset = strpos($haystack, $needle, $offset) + 1;
return strpos($haystack, $needle, $offset) - 1;
}7. Clear your cache and everything should work just fine. You may need to change your css to beautify the new markup.
This is very convoluted and I'm sure there has to be an easier way to do this, so please share if you have a better solution.
#1
By no means was this easy for me, I'm new to Drupal/Views and struggled with this for a while. BUT ...
I created a relationship with gallery in the Latest Image view and then added a new NID field, which is actually the Gallery NID. Then edited the content:image field to "output as a link" to "node/[nid]" (with [nid] being the replacement pattern for new field I just created). The "latest image" thumbnail is now linked to the gallery node.
Course I'm assuming the teaser view of gallery is what you mean by overview page.
#2
Wonderful! This works beautifully. I don't claim to understand why, but I had to do the following things to make it work:
1. When I added the Node: Nid field I selected Relationship: Gallery. I also selected "Exclude from display".
2. For the Content: Image field I selected Relationship: Do not use a relationship.
Thank you for this short and sweet solution
#3
Could you do an export of the view so I could test it? I am having no luck duplicating it.
Thanks,
Eric
#4
Here's what I have ...
UPDATED 2009-08-13 : Ignore attachment here, users have not been able to import. Use Mirsent's file below instead.
#5
Hm.. would not import. May need to wipe my test setup tho.
E
#6
Bernardine,
may be I don't understand something. And I failed to import your exported view. Can you explain again about steps of "Views Gallery" view editing?
Second question: description of gallery in teaser is above the thumb, how can I move it on the right side, for example?
#7
Try my exported view. It might work for you. Note that I have added a Photographer text field (field_photographer) to the Image content type, so you may have to do the same to successfully import my version of the view.
#8
Big thank, mirsent.
Do somebody know something about second question?
#9
For more simple question form I uploaded some images:
1. Result of Lullabot lesson. I want to have something like this.
2. My present result.
#10
sorry all, not sure what may have been wrong with my export. The positioning of the divs (image and description) are controlled by the css. Did you use the css from the lullabot tutorial? (he recommends and uses css injector module to implement).
#11
I was trying to use it, but may be I don't understand how css injector works or I wrongly edited css from tutorial. In tutorial Image type calls Photo. I fix exported css, but I don't know css at all, so I could make mistake. =(
#12
Khm. In views_gallery.module there is
/*** Implementation of hook_init().
*/
function views_gallery_init() {
drupal_add_css(drupal_get_path('module', 'views_gallery') .'/views_gallery.css');
}
And there're css-file, like in lesson. But it doesn't work. Is it bug?
#13
It looks (from your image) that you may have applied the styles, but maybe there's some other theme mark-up overriding some others. If you're not already developing in Firefox with the Web Developer add-on (https://addons.mozilla.org/en-US/firefox/addon/60) I would recommend that to you. It will allow you to see exactly what styles are being applied where, and hopefully allow you to troubleshoot your layout (under Information for example, you can display "Div Order" and "ID and class details").
#14
Not sure if I'm missing something here. I just edited the "gallery image" display, added a relationship for the gallery field, added the gallery nid field to the view as the first field, set the 'exclude from display' option, edited the image field, selected the output field as link option, and used "node/[nid]" for the path. No hacks, no code, no muss, no fuss.
#15
Ditto #14.
You don't need code to do this. Add a relationship using the gallery field, and be sure that you have the "Node: Nid" field in the Fields list, positioned at the /top/ of the Fields list. This way the Node: Nid field will be available as a Replacement pattern when you select the "Output this field as a link" option for the thumbnail image field. You'll probably also want to set the "Node: Nid" to "Exclude from display" so it doesn't show in the output.
#16
Yes, using a relationship is the answer. I considered adding that to the default view, but I don't think this is a common use case. You are looking at the gallery node when you view the thumbnails, why would you want the images to link to the gallery node?
But anyway, this is how you can do it.
#17
Thank you for #14, #15 and #16. Way back in #1 an alternative solution using relationships was suggested by Bernardine, and this superseded the code in the original post. I would like to be able to edit the original post to highlight the fact that the code is not needed, but there doesn't seem to be any way to do this. I've changed the title of the post to make it clearer that code is not required.
#18
Doesn't work. the [nid] replacement pattern is not working for me. I can't understand why. The only replacement patterns I saw are the %1 and [field_image_fid]
The [nid] just isn't replaced.
#19
Its working for me ... node/[nid]
follow the instructions in http://drupal.org/node/540600#comment-1891808
#20
The [nid] replacement pattern doesn't work. The only one I saw was %1 (which gets the first url variable - the title of the gallery). If the title of the gallery is for example "gallery", that will work, BUT if the title of the gallery is "gallery title", it will not work because of the space character. the pattern [nid] is not an option. I'm using d6.x. I'm still trying to make this work, but if anyone gets it to, I'd really appreciate your input.
#21
Yes, it does work.
Then you've probably not followed the instructions completely-- you need to add the "node: nid" field, exclude it from display, and make it appear before the field to which you want to add the token (i usually just make it first so it's always available).
#22
Working. Thank you. The problem was as you pointed out. I didn't place the nid field BEFORE the image field. Works like a charm now. Thanks to all.
#23
Refer to #9
I also have the same problem,
this pice of CSS:
div.view-display-id-node_content_2 {
float: left;
padding-right: 10px;
}
div.view-display-id-node_content_2 div.view-empty {
border: 1px solid black;
font-size: 0.9em;
padding: 5px;
text-align: center;
width: 40px;
}
doesn't work for me.
the image is below the text, not next to it.
Anybody knows how to fix this ?
#24
Automatically closed -- issue fixed for 2 weeks with no activity.