Hi,

I am not sure if the Thubnail Previews can be responsive, i have created a Video Gallery view and used Video Embed field (the simplest solution ive found).

The size of the Thumbnail remains same irrespective of viewport. Is there a way we can make the preview images responsive ?

Or are there any chances of integrating Picture module for responsive Thumbnail images ?

I am already using https://drupal.org/project/fitvids to make responsive Video Embeds in Node and ColorBox, and that works perfectly.

Thanks.

Comments

snaushads’s picture

Issue summary: View changes

Tried to explain issue in detail.

designerbrent’s picture

Title: Responsive Thumbnail Preview support » Picture module integration
Issue summary: View changes

I would second the request for picture module integration.

atiba’s picture

Same here, I really would like to see this integrated.

candelas’s picture

Same here. Thanks for the module.

candelas’s picture

There is a module that works with Picture 7.x-1.5. I just reported that it doesn't with 7.x-2.4
https://www.drupal.org/project/vef_picture

andros’s picture

Is there any progress in this? Is there an alternative module for video thumb intergration with picture module?

candelas’s picture

@andros, at the end I wrote that the image had a width and max-width 100%. I hope someone with more Knowledge fixes this :)

candelas’s picture

Component: User interface » Code

I have found a solution with the Views field to make thumb as Picture. I put it here, just in case is useful to someone.

  1. Copy views-view-field.tpl.php to your theme templates folder and rename to the convenient name
  2. In the view, in the field params, rewrite the output to [field_YOURFIELD-thumbnail_path]
  3. In the tpl:
if(!empty($row->field_field_video)){
        //load image from path
	$imatge = image_load($output);
       // Load picture mapping from mapping name in the example : home_noticia
	$picture_mapping = picture_mapping_load('home_noticia');
	// Load breakpoints for picture mapping.
	$breakpoints = picture_get_mapping_breakpoints($picture_mapping);
	$picture_array = array(
	  'style_name' => 'home_noticia',
	  'uri' => $output,
	  'width' => $imatge->info['width'],
	  'height' => $imatge->info['height'],
	  'breakpoints' => $breakpoints,
	  'attributes' => array(
	      'data-picture-mapping' => 'home_noticia',
	   ),
	  // Set timestamp to prevent notice.
	 'timestamp' => NULL,
	);
       //print picture mapping
	print theme('picture', $picture_array);
}
candelas’s picture

Also a very interesting module that can work if you have images and videos in the same node and you want to choose one only.
https://www.drupal.org/project/views_ifempty