Sortable portfolio/gallery

Hi Jesus,

So for the first question you have drop down list field that contains categories,  and you want to be able to filter them? The is probably the easiest way to do this:

<ul id="filtrable">
  <li><a href="?">All</a></li>
  <?php foreach (getListOptions("myTable", "category") as $value => $label):?>
    <li><a href= "?category=<?php echo $value;?>"><?php echo $label;?></a></li>
  <?php endforeach ?>
</ul>

This is just example code, so you'll need to change the variables to get it to work (specifically those highlighted in green). 

The getListOptions function will retrieve the possible list options for a field in an array. Then the foreach loop cycles through them, then links are created for each item.

To use these links as filters, you would need to retrieve your records using the getRecords function, and have allowSearch set to true:

  list($campaign, $campaignsMetaData) = getRecords(array(
    'tableName'   => 'blogs',
    'loadUploads' => true,
    'allowSearch' => true,
    'limit'       => '1',
  ));

Your close on what you need to do to cycle through your uploaded images for each record, I think you need to do something like this:

<?php foreach ($paquetes_lunamielerosRecords as $record): ?>
  <article data-id="<?php echo htmlencode($record['num']) ?>" data-type="<?php echo $record['categoria'] ?>" class="span3">
      <?php foreach ($record['imagen_paquete'] as $index => $upload): ?>
        <img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
      <?php endforeach; ?>
      <div>
        <?php foreach ($record['imagen_promo'] as $index => $upload): ?>
          <a href="<?php echo $upload['urlPath'] ?>" class="p-view" data-rel="prettyPhoto"></a>
        <?php endforeach; ?>
          <a href="<?php echo $record['_link'] ?>" class="p-link"></a>
      </div>
  </article><!--END: latest blog col 1 -->
<?php endforeach ?>

So each of the $paquetes_lunamielerosRecords records will have two arrays of images associated with it; imagen_promo and imagen_paquete. So I'm cycling through each image using a foreach loop. Then outputting the contents of the URL path of each upload.

If you would like, you can attach/post your code into a post and I can take a look over it for you and make some quick suggestions.

Let me know if you have any questions. 

Thanks!

Greg

Hi Greg.

Awesome!!! Let me work during the afternoon on this and will et you know how it goes!

Jesus

Hi Greg,

So far so good, we're almost there.

Just something its not working fine with the Sortable option, it displays perfectly the categories but, while checking the generated code it looks like this:

<!--BEGIN: top filtrable-->
<ul id="filtrable">
  <li><a href="?">All</a></li>
      <li><a href= "?categoria=Exóticas">Exóticas</a></li>
       <li><a href= "?categoria=Romance">Romance</a></li>
       <li><a href= "?categoria=Eco Aventura">Eco Aventura</a></li>
       <li><a href= "?categoria=Tradicionales">Tradicionales</a></li>
       <li><a href= "?categoria=Circuitos">Circuitos</a></li>
       <li><a href= "?categoria=Cruceros">Cruceros</a></li>
       <li><a href= "?categoria=Cultural">Cultural</a></li>
</ul><!--END: top filtrable-->


and the code to call each article looks like this:

<!--BEGIN: latest blog col 1 -->
    <article data-id="5" data-type=" Romance " class="span3">
      <img src="/paquetes-lunamieleros/images/uploads/v_puntacana.jpg" width="270" height="200" alt="" />
       <div>
        <a href="/paquetes-lunamieleros/images/uploads/p_puntacana.jpg" class="p-view" data-rel="prettyPhoto"></a>
        <a href="/paquetes-lunamieleros/verArticulo.php?Paquete-de-luna-de-miel-en-Punta-Cana-5" class="p-link"></a>
       </div>
    </article><!--END: latest blog col 1 -->

    <article data-id="4" data-type=" Exóticas " class="span3">
      <img src="/paquetes-lunamieleros/images/uploads/v_islasmaldivas.jpg" width="270" height="200" alt="" />
        <div>
         <a href="/paquetes-lunamieleros/images/uploads/p_islasmaldivas.jpg" class="p-view" data-rel="prettyPhoto"></a>
         <a href="/paquetes-lunamieleros/verArticulo.php?Paquete-de-luna-de-miel-Islas-Maldivas-4" class="p-link"></a>
        </div>
     </article><!--END: latest blog col 1 -->

    <article data-id="3" data-type=" Tradicionales " class="span3">
       <img src="/paquetes-lunamieleros/images/uploads/v_orlando.jpg" width="270" height="200" alt="" />
         <div>
          <a href="/paquetes-lunamieleros/images/uploads/p_orlando.jpg" class="p-view" data-rel="prettyPhoto"></a>
          <a href="/paquetes-lunamieleros/verArticulo.php?Paquete-de-luna-de-miel-en-Orlando-3" class="p-link"></a>
        </div>
     </article><!--END: latest blog col 1 -->

    <article data-id="2" data-type=" Exóticas " class="span3">
       <img src="/paquetes-lunamieleros/images/uploads/v_isladehamilton.jpg" width="270" height="200" alt="" />
          <div>
           <a href="/paquetes-lunamieleros/images/uploads/p_isladehamilton.jpg" class="p-view" data-rel="prettyPhoto"></a>
           <a href="/paquetes-lunamieleros/verArticulo.php?Paquete-de-luna-de-miel-en-la-Isla-de-Hamilton-2" class="p-link"></a>
        </div>
     </article><!--END: latest blog col 1 -->


The sortable thing its not working. What I'm seeing its that the category name on the sortable area looks like this: ?categoria=Exóticas and on the article looks like this  Exóticas (with some spaces too).

Any ideas on how to remove the ?categoria= part from the sortable area and/or to remove the spaces below?

Thanks for pointing me to the right direction!

Jesus

I found the way to remove the ?categoria= from the code, so now that's fixed.

Still trying to get the sort to work as I'm still seeing some spaces and probably that's causing the issue. Checking....

ok, I found something on the sortable code, which needs to be like this:

<!--BEGIN: top filtrable-->
<ul id="filtrable">
  <li class="current all"><a href="#">Todos</a></li>
  <?php foreach (getListOptions("paquetes_lunamieleros", "categoria") as $value => $label):?>
   <li class="<?php echo $value;?>"><a href="#"><?php echo $label;?></a></li>
   <?php endforeach ?>
</ul><!--END: top filtrable-->

But still no luck... I'm displaying properly the categories on the sortable buttons but, when I click on each bitton, it doesn't do the sort.

I can confirm now that the problem exists because spaces or blanks on this lines:

    <article data-id="5" data-type=" Romance " class="span3">

    <article data-id="4" data-type=" Exóticas " class="span3">



As you can see there're spaces between the 1st letter and the " and the last letter and the close ".

I need to remove those spaces and I don't know why can I do this.

Thanks for your help!

Morning Jesus, 

I think your category links might not be filtering the categories because you don't have allowSearch set to true in your getRecords function. I would check that allowSearch is set to true in it: 

    'allowSearch' => true,


You can remove the white spaces from your data tags using the PHP trim function:

 <article data-id="<?php echo htmlencode($record['num']) ?>" data-type="<?php echo trim($record['categoria']) ?>" class="span3">

The trim function (http://php.net/manual/en/function.trim.php) is used to remove any white spaces at the beginning and end of strings.

Thanks!

Greg