By jonahruh on

Hi,

I am trying to put my imagecache thumbnail preset into a views slideshow. I am using the slideshow as a gallery page with thumbnails and a main image area. I can't figure out how to make my imagecache thumbnails the thumbnails used in the view. i have tried adding a field and selecting the image cache thumbnail but it just displays below the main image area as another field. I also went into the slideshow settings but the only choice i found for the pager was pager or thumbnail and the thumbnail was the default which distorts images. Please help. Thanks!

⋅ Categories: Drupal 6.x

Comments

roger.ajith’s picture

roger.ajith commented

use this views_galleriffic module you use thumbnail image and the original image.

schajee’s picture

schajee commented

I ran into the same issue with my site where thumbnails for views_slideshow were distorted because the original image was not square. What I ended up with is the following.

Note: This option is for the default slideshow styling of a view.

  1. Add an imagecache thumbnail to the fields and place it as the first item in the list (my field sequence was thumbnail, image, title, body).

    Since slideshow uses the first image as the thumbnail, the paging thumbnails are now smaller in size and propotional. You can adjust the size of your thumbnails through the imagecache preset and then via CSS.

  2. Now in order to hide the thumbnail from the main slideshow, you will have to target the image either through
    • div#whatever div.whatever img.whatever in your CSS
    • Or my preferred method of overriding themeable functions and then using a cleaner div#ID img:first-child targeting with CSS

      In order to override, copy the functions theme_views_slideshow_singleframe_no_display_teaser() and theme_views_slideshow_singleframe_no_display_section() from modules/views_slideshow/contrib/views_slideshow_singleframe/views_slideshow_singleframe.theme.inc to your template.php and then fix the IDs and Classes for the DIVs or remove them altogether if you want.

      Note: You can safely remove all classes but DO NOT remove the ID of the immediate parent. You can rename it however.

jonahruh’s picture

jonahruh commented

So cool! Thanks! I have stepped foot in a php doc only twice in my life once to set me zen sub theme and then just now to try you preffered override. But i had to run away and use plain old CSS.

Thanks so much!!!!

jonahruh’s picture

jonahruh commented

Perhaps you know this too:

My gallery images are different widths. By default they expand to the right when going from a narrow to a wide image. I keep my thumbnails on the right of the image. When there is a vertical image there leaves a big white space between the image and the thumbnails. What i'd like to do is align the main image right up to the left of the thumbnail block and have the main image expand to the left for wider images.

Is this possible?

Thanks so much!!!

texas-bronius’s picture

texas-bronius commented

THANKS!

--
http://drupaltees.com
80s themed Drupal T-Shirts

pabben’s picture

pabben commented

Same issue different solution, I forget to set permissions into a newly created ImageCache Preset.

elshae’s picture

elshae commented

Following schajee's approach I then edited the Node:TeaserThumbnail configuration by clicking on "Rewrite the output of this field" and placing the field in a DIV I created so I can easily identify it:

http://i52.tinypic.com/rjf885.png

and then in my style.css:

#teaser-thumbnail{
	display: none;
}

*Where teaser-thumbnail is the id you give your DIV

Hope this serves as an alternative way to do the second half of this and thanks schajee, your post was so useful :)

zincdesign’s picture

zincdesign commented

Hi I have a similar solution but I don't remove the the thumbnail from the main slideshow with css or the template file, I load the thumbnail into the view (so I load the image twice into the view, once as the main image and again as thumbnails) and then for the thumbnail I select "Exclude from display". I can then select the pagers as the thumbnail images.

jonahruh’s picture

jonahruh commented

enables you to use your own thumbnail, no fuss.

lucabarbetti’s picture

lucabarbetti commented

Hi Zincdesign,
could you explain how you select the pagers as the thumbnail images? I believe I was able to follow your suggestion up to that last step and then I selected thumbnails as pagers but those are as squared and distorted as before, they are not the thumbnails that I loaded into the view, which are rectangular and well scaled.
Thank you!

P.S. I use Drupal 6 and views slideshow 6.2

mattcasey’s picture

mattcasey commented

In Views Slideshow 6-2.3, install the module "Views Slideshow: ThumbnailHover". You can then choose "Thumbnail Hover" in Slideshow Mode, and select exactly which fields are in the 'main frame' vs 'breakout' (thumbnails). One recent change i noticed is that you should not click 'Exclude from display' on the field setting or it won't show up in slideshow settings.

lucabarbetti’s picture

lucabarbetti commented

thanks Matt,
actually I was looking for a solution regarding singleframe views slideshow, so far I haven't been able to make the slideshow to load my imagecache preset as thumbnails, but I'll check out your solution.
Thanks again

designate’s picture

designate commented

I'm looking for a custom pager image solution as well. The thumbnail hover module looks promissing, will check that out. In meantime if anybody gets a solution for single frame option let us know.

Designate web development
www.designate.nl
+31 (0)229 708 000

texas-bronius’s picture

texas-bronius commented

Folks.. Check the issue queue for views_slideshow. You'll see that SingleFrame is one solution and that Thumbnail is another: What you are describing is the Thumbnail solution. Once you try it, you won't look back.

--
http://drupaltees.com
80s themed Drupal T-Shirts

knalstaaf’s picture

knalstaaf commented

A solution for D7 can be found here.