Drupal 7 Snippet: Photoswipe: Only output first image of image field, but show the rest in swipe gallery

Simple snippet to only output the first image of an imagefield in a view and show the rest of the gallery in the photoswipe overlay.

Hint: Don't forget to add the photoswipe-gallery class on the field wrapper in views settings: http://cgit.drupalcode.org/photoswipe/tree/README.txt?h=7.x-2.x

  1. /**
  2.  * Implements hook_views_pre_render().
  3.  */
  4. function MYMODULE_views_pre_render(&$view) {
  5.   // #webksde#JP20171215: Only show the first image and the rest only in the gallery
  6.   if ($view->name == 'YOUR_VIEW_NAME') {
  7.     if(!empty($view->result)){
  8.       foreach($view->result as $row_key => $row){
  9.         if(!empty($row->field_field_galerie)){
  10.           foreach($row->field_field_galerie as $galerie_item_key => $galerie_item){
  11.             if($galerie_item_key > 0){
  12.               $item = $galerie_item['rendered']['#item'];
  13.               $settings = $galerie_item['rendered']['#display_settings'];
  14.               $alt = !empty($item['alt']) ? $item['alt'] : '';
  15.               $title = !empty($item['title']) ? $item['title'] : '';
  16.  
  17.               if (empty($alt) && !empty($item['field_file_image_alt_text'][LANGUAGE_NONE])) {
  18.                 $alt = $item['field_file_image_alt_text'][LANGUAGE_NONE][0]['value'];
  19.               }
  20.               if (empty($title) && !empty($item['field_file_image_title_text'][LANGUAGE_NONE])) {
  21.                 $title = $item['field_file_image_title_text'][LANGUAGE_NONE][0]['value'];
  22.               }
  23.               if ($style_name = $settings['photoswipe_image_style']) {
  24.                 $path = image_style_url($style_name, $item['uri']);
  25.                 $dimensions = array(
  26.                   'width' => $item['width'],
  27.                   'height' => $item['height'],
  28.                 );
  29.                 image_style_transform_dimensions($style_name, $dimensions);
  30.               }
  31.               else {
  32.                 $path = file_create_url($item['uri']);
  33.               }
  34.  
  35.               $view->result[$row_key]->field_field_galerie[$galerie_item_key]['rendered'] = array(
  36.                 '#theme' => 'link',
  37.                 '#text' => '',
  38.                 '#path' => $path,
  39.                 '#options' => array(
  40.                   'html' => TRUE,
  41.                   'attributes' => array(
  42.                     'class' => 'photoswipe',
  43.                     'data-size' => $item['width'] . 'x' . $item['height'],
  44.                     'data-overlay-title' => $item['title'],
  45.                   )
  46.                 )
  47.               );
  48.             }
  49.           }
  50.         }
  51.       }
  52.     }
  53.   }
  54. }

Comments

wunderbar

this is a great solution, thank you! I actually planned to do this with 'display:none' for images 2–x in the css, I think this way I also could 'un-display' the 1st image (preview image) in the photoswipe overlay. But your solution is better, I guess. A newbie question: do I have to add your code in the photoswipe.js?

By the way, I had massive problems and time-loss to figure out if it is possible to add (or "activate") the image caption + photo credit also on the gallery page next to each thumbnail. Also others were searching for this feature with no success (tried also on github/photoswipe), do you think there could be a 'simple' solution?

Hi and thank you.My code is

Hi and thank you.
My code is for a custom Drupal 7 module with Drupal views.

style="display:none;" should work for all following images or to be correct: photoswipe links within the gallery. Pswp doesn't care if the links are hidden, it just cares if the link with the given class exists. That depends on initialization.

EVA Views Field

Hallo Julian,
vielleicht kannst Du mir helfen. Ich habe mehrere EVA Fields in einem View, was muss ich an deinen Snippet ändern, so dass alle EVA Fields angesprochen werden?

Grüße Pschem

thanks!

I need to learn creating such little helper-modules soon Wink

Currently the pswp view is a formatted list, li hidden, li.first block – works well. But the pswp images in the overlay have no 'first' nor any kind of numbering which would make it possible to hide the 1st image... I think that's why you've written the snippet ;D

Post new comment

The content of this field is kept private and will not be shown publicly.

More information about formatting options