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

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