Combining imagecache with views (to create output for looped slider jcarousel in this example)
You are browsing documentation for an older version of Drupal, which is not supported any longer, and the information may not be correct. See current documentation for Contributed modules
I recently wanted to create a loopedslider jcarousel and wanted to select the images from a view rather than hard coding them.
I thought this snippet of code might help anyone else trying to select images from views and output them at fixed sizes with imagecache.
(yes I know the output needs tidying up, and similar can be done with views theme, but in this case I wanted a self contained easy to move block)
Steps
1)Create a view with your image and any other fields you need (title and caption in my case)
2)Grab an array containg your view results (my view was named header_images)
$headerimages = views_get_view_result('header_view');
3)Find out your views field name by looking at the preview sql on the views page (node_data_field_main_image_field_main_image_fid in my case)
4)Select the image from its fid
$file = field_file_load($headerimage->node_data_field_main_image_field_main_image_fid);
5)Determine the file path
$filepath = $file['filepath'];
6)Generate image html with imagecache (replace banner_l with the name of your thumbnail)
$img = theme('imagecache', 'banner_thumb', $filepath);
Voila, full messy code below, for anyone struggling to achieve something similar
Jon
$headerimages = views_get_view_result('header_view');
$output = '<div id="loopedSlider">';
// Loop through the results and fill the options
// array with the province id and name.
// Thumnails
$output .= '<div class="jcarousel-skin-tango"> <div class="jcarousel-clip jcarousel-clip-vertical pagination"> <ul class="jcarousel-list jcarousel-list-vertical" id="third-carousel">';
foreach ($headerimages as $headerimage) {
// $node = node_load($headerimage->nid);
$file = field_file_load($headerimage->node_data_field_main_image_field_main_image_fid);
$filepath = $file['filepath'];
$img = theme('imagecache', 'banner_thumb', $filepath);
$output .= '<li><a href="#">'.$img.'</a>'."</li>";
};
$output .= '</ul></div></div>';
//big images
$output .= '<div class="container"><div class="slides">';
foreach ($headerimages as $headerimage) {
// $node = node_load($headerimage->nid);
$file = field_file_load($headerimage->node_data_field_main_image_field_main_image_fid);
$filepath = $file['filepath'];
$img = theme('imagecache', 'banner_l', $filepath);
$output .= '<div class="blocks">';
$output .= '<div class="img-big"><a href="#">'.$img.'</a>'.'</div>';
$output .= '<div class="title-gallery">';
$output .= '<h1>'.$headerimage->node_title.'</h1>';
$output .= '</div>';
$output .= '<div class="text-gallery">';
$output .= '<p>'.$headerimage->node_data_field_main_image_field_caption_value.'</p>';
$output .= '</div>';
$output .= '</div>';
};
$output .= '</div></div>';
$output .= '</div>';
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion