How to theme views fields template to display a gallery?

Question

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.

Answer 1

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.

Answer 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.