| Project: | Views Gallery |
| Version: | 6.x-1.3 |
| Component: | Documentation |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
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.
Comments
#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.
#25
Just wanted to add a way to achieve this with a patch to views, using the path alias to the gallery rather than the nid.
The patch can be found here. It adds a Node: Path field to views. Add that field above the image field, exclude it from display, and use the gallery relationship. Now you can rewrite the output of the image field as a link to the gallery path alias!
I wish this was possible without a patch, but that's the easiest way I've found to do this.
#26
Thank you all for your contribution
I finally made it to work... Had done everything done but somewhere along the way i missed
node/[nid] for replacement patter along the way...
oh yeah and the NID field should be above the image field like stated in #15 for the new nid replacement patter to appear.
thank you
#27
Making this to work requires the Latest Image display. I just installed Views Gallery 6.x-1.2 and there is no Latest Image display in the view.
VG 6.x-1.2 has the following displays available:
- Defaults
- Full gallery
- Gallery image
- Gallery block
- Slideshow block
Looking at the Releases page it looks like the Latest Image display has been added in 6.x-1.1. Has the display been removed in the 6.x-1.2 version?Can someone please share instructions on how to link the thumbnail directly to gallery node using the 6.x-1.2 version of views Gallery?
I would very much appreciate any suggestions regarding this usability issue.
#28
re #27 - not sure what you mean. The "Gallery Image" display is the one used on used on teasers and the comments above describe how to get the image to link to the node. I just recently did it with a new site and it works perfectly.
#29
@ weka Gallery image is the latest image display.
see Node content settings its build mode is Teaser
#30
Thanks guys, all sorted now.
#31
Ditto #14, but particularly Ditto #15.
It is absolutely critical that the "Node: Nid" field in the Fields list is positioned at the "top" of the Fields list. Otherwise instead of linking to the actual gallery node, you will literally link to "node/[nid]" which does not exist because the Nid field is not yet been made available as a Replacement Pattern.
This was the key piece of information that was missing for many of us.
#32
#27 - you need to install the Image Module
#33
Tried to follow the directions posted by #1 (with additions of #2). As a newbie, here's what I figured out along the way to get this working:
1) The "Latest Image view" referred to in #1 is called "Gallery image" in my version (I'm using 6.x-1.3). The Gallery relationship already exists and there is no need to add another one.
2) You need to re-order the Fields so that Node:Nid is above Content:Image so that the url node/[nid] is valid. Then, since I'm using Lightbox2, I also needed to change the "Format" of Content:Image to "short image" from "Lightbox: short->reg"
As a hint if you're new to Views and use Path for pretty URLs, you can figure out what to put in the Preview box by editing a gallery and looking at the URL that is displayed in the edit mode. For example, the URL for my gallery may be mysite.com/photos/my_gallery, but when I click edit it says mysite.com/node/133/edit. I just type 133 into the Preview box and then I can check my work as I go in Views.
#34
Refer to #23.
I was sorting this issue out today, and there's a simple fix to getting the thumbnail image to show up next to the text (actually before it, but visually next to it). I simply edited the fields order for the Gallery content type and moved both of the Attached view fields above the Description field. Then the thumbnail floats ahead of the text instead of after it. I then edited the CSS to tweak the spacing.
Here's my adjusted CSS for those two rules:
div.view-display-id-node_content_2 {
float: left;
padding-right: 10px;
padding-top: 2px;
margin-bottom: 6px;
}
div.view-display-id-node_content_2 div.view-empty {
border: 1px solid #0c586a;
font-size: 0.9em;
padding: 5px;
text-align: center;
width: 140px;
}
#35
I want to leave a comment on this issue so that the detailed instructions for doing this are clear.
I'm using version 2.0-beta of the module. These are the steps that I used, based on a few comments here and some trial and error.
You must be working in the "Gallery image" display (tab) of the "gallery" view.
Node: Nid.Node: Nidfield (it will actually look like this: "(Gallery) Node: Nid"). You want this field above the other field ("Content: Image (field_gallery_image)").Content: Image (field_gallery_image).In the end, the Fields section of the view will look like this:
(Gallery) Node: Nid Nid
Content: Image short image
#36
@David D: Regarding your comment (#34), looks like some of the properties there are already part of the module (at least they are with the 2.0-beta1 release), but thanks for the ones you added. They were a nice touch and worked well. :)
#37
#35 - Nice, but how to create a view with all galeries represented by its latest image thumbnail? Mentioned procedure provide only one thumbnail for one gallery.
PS: I mean - provided Gallery_list view is pretty ugly. How to put only latest image gallery thumbnail to this output?
#38
#25 - Thanks for this. For those of us who know views must be used, but are not sure exactly what needs to be done, this was very helpful.
Now to work out how to organise the images in a gallery in a way other than by upload date!
#39
true #37 gallery is ugly because of the title.
Since its node view not fields title is large since its content type title
Is there any way we can eliminate the title for the gallery view thumbs?
One option is to go to content-type-manage and change from there but the title
does not show up there.
Is there any way we can make the gallery view better through this node type view?
#40
Views > Edit > Gallery Image > Fields > Content:Image > Output this field as link > Link path > node/!1
And that's all... It worked perfectly for me
#41
Any thoughts on how this might work for View Gallery for Organic Groups? What would the group tab fields look like?
Thanks.