0

My question is generic because the solution will allow me to use various jquery gallery as bxslider, galleria or flexslider. My need is about creating a gallery with thumbnail nav, for that I need to create a views display that provide this kind of code (ex from bxlsider):

<ul class="bxslider">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="/images/thumbs/tree_root.jpg" /></a>
  <a data-slide-index="1" href=""><img src="/images/thumbs/houses.jpg" /></a>
  <a data-slide-index="2" href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
</div>

The list creation is easy for mu but I don't find a way to produce the thumbnail part..the views PHP module seem to be the path (to add data attributes and create the thumbnail "list") but I don't find the right way.

If someone can help me.All of this come from that actually using Drupal 6. :/

Thanks

EDIT: use case with data from $row views object.I don't know how to print field data settings in my view as in the template to override the output. Here I would to add the "data-thumb" attribute dynamically, provided by views data.

<ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
    </li>
    <li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
    </li>
    <li data-thumb="slide3-thumb.jpg">
      <img src="slide3.jpg" />
    </li>
    <li data-thumb="slide4-thumb.jpg">
      <img src="slide4.jpg" />
    </li>

No difficulty to build the list in views.

EDIT2: back on my second example, I improve my code and I'm near the goal.In a views field tpl I put actually:

<?php 

    $imgurl = file_create_url($field->uri);  
    $img_filepath = $fields['filepath']->content;
    $img_slide_size = $fields['field_galerie_image_vdl_fid']->content;
    $img_caption = $fields['field_galerie_image_vdl_data']->content;
    print '<li data-thumb='.$img_filepath.'><img src="'.$img_slide_size.'" />'
            . '<p>'.$img_caption.'</p>'
            . '</li>';

?>

Naturally when it'll be ok, a foreach loop will needed.But I need to clean the provided views code, because actually I put off all HTML things via the Views UI but I think it's possible to that by PHP code.

EDIT 3: my new base code to continue looking for theming my views output from unformatted content.

<ul class="bxslider">
<?php foreach ($fields as $id => $field): ?>
  <?php if (!empty($field->separator)): ?>
    <?php print $field->separator; ?>
  <?php endif; ?>

  <?php print $field->wrapper_prefix; ?>
    <?php print $field->label_html; ?>
<!-- TEMPLATE DE VIEWS FIELDS CUSTOM BX SLIDER -->
<?php 
//création des variables utiles pour la mise en forme de la sortie de la vue
  $imgurl = file_create_url($field->uri);  

    $img_thumb_filepath = strip_tags($fields['field_galerie_image_vdl_fid_1_value']->content);
    $img_slide_size = strip_tags($fields['field_galerie_image_vdl_fid_value']->content);
    $img_caption = strip_tags($fields['field_galerie_image_vdl_data_value']->content);
    $img_delta = strip_tags($fields['delta']->content);
    ?>


 <?php
               foreach ($fields as $key => $lien) {

                    print '<li>'.$img_slide_size.'</li>';
               }
      ?> 

  <?php print $field->wrapper_suffix; ?>
<?php endforeach; ?>
</ul>

actually my variables doesn't return the right content, but I don't know how to find the right syntax.

2

I would recommend going via Views Templates, take a look at views-view-fields.tpl.php template. From there you should be able to duplicate and modify the views content for the thumbnail part.

  • good idea, will test ;) – webmaster pf Nov 3 '15 at 13:04
  • I'm better familiar with the views-view-list.tpl.php but views-view-fields.tpl.php look more complete to use different data of an imagefield.Do you know about examples to override this file ? – webmaster pf Nov 3 '15 at 13:14
  • finally I need to use both type of tpl : the fields one to organise fields display, and the views display to add the data-thumb attribute to the <li> element. This last point is my actual difficulty because $fields is not available in this tpl. – webmaster pf Nov 5 '15 at 16:11
  • I'm back on it. So if someone can tell me how to find out the right syntax for CCK fields.Actually I work on a unformatted content from Views and add my desired HTML markup like this (see first post update) – webmaster pf Mar 9 '16 at 11:18
2

Yeah, ok you are using the views-view-list.tpl.php, then maybe try it like this if your list is exactly as you shown above:

<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $classes[$id]; ?>"><?php print $row; ?></li>
    <?php endforeach; ?>
  <?php print $list_type_suffix; ?>
  <div id="bx-pager">
  <?php for ($i=0;$i<count($rows);$i++): ?>
  <a data-slide-index="<?php print $i; ?>" href=""><?php print str_replace('/730_200/', '/thumbs/', $row[$i]); ?></a>
  <?php endfor; ?>
  </div>
<?php print $wrapper_suffix; ?>

Sure there might be a more elegant solution possible, but maybe as a starting point or for a simple case this could work.

  • thanks for the example. but I would to use row datas to do something like : <li data-thumb="slide2-thumb.jpg"> <img src="slide2.jpg" /> </li> ; then I try : data-thumb="<?php print $row['field_galerie_image_vdl_fid_1']->content ?>" without success.. – webmaster pf Nov 3 '15 at 14:49
  • Hm ok, maybe you should put the example like you want to have it. – Stefan Korn Nov 3 '15 at 15:01
  • Are you using devel module? This can give you hints about what is in $row. – Stefan Korn Nov 3 '15 at 15:01
  • See my edit for an output code example. Yes I use Devel but I don't know how can I use theses informations – webmaster pf Nov 3 '15 at 15:07
  • take a look in $row with dpm($row) and see if there is something you can use, i. e. the image url. Where do you take slidex-thumb.jpg from? Do you derive it from the original image or do you upload it in a separate field or manually? – Stefan Korn Nov 3 '15 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.