Hello guys/gals,

I'm having some issues incorporating Couch Gallery with Salvatore CSS (check here for more info on Salvatore).

I'm trying to make images sort nicely when the client adds them. However, when I added the gallery option from Couch Gallery (tutorial found here) everything got messed up. I've tried working with show_repeatable (as shown here) without success.

Here's the CMS template:

Code: Select all

<cms:template title='Gallery' clonable='1' dynamic_folders='1' gallery='1'> 
   <cms:editable 
      name="gg_image" 
      label="Image" 
      desc="Upload your main image here"
      show_preview='1' 
      type="image"
      width="600"
   />
   <cms:editable 
      name="gg_thumb" 
      assoc_field="gg_image" 
      label="Image Thumbnail" 
      desc="Thumbnail of image above"
      width='500'
      type="thumbnail"
      enforce_max='1'
   />   
</cms:template>

And here's the application of the code within website:

Code: Select all

<div class="container-fluid" >
  <div class="intro-grid" data-columns>   
    <cms:pages masterpage="products.php" include_subfolders='0' >
       <div class="column size-1of3">
        <a href="<cms:show gg_image />"><img src="<cms:show gg_image />" class="img-responsive img-gallery"/></a>
      </div>
    </cms:pages>    
  </div> 
</div>

I've tried a bunch of different stuff, so this is just the nth iteration of what I'm trying to accomplish, I may have lost my way too many times up to this point, so any help is appreciated.

[KK]

Hi

From what I could gather seeing the documentation of Salvatore, you should *not* explicitly add the 'column' class to the list items - this will be done dynamically by Salvatore (and that is the very point of using this JS library).

You only need to output a linear list of elements e.g. as follows -

Code: Select all

<div id="grid" data-columns>
   <div>Item #1</div>
   <div>Item #2</div>
   <div>Item #3</div>
   …
   <div>Item #20</div>
</div>

.. and add the following rule in CSS file

Code: Select all

#grid[data-columns]::before {
   content: '3 .column.size-1of3';
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }

and that would make Salvatore divide our linear listing up in three columns (by *dynamically* creating the three columns and adding the class="column size-1of3" to them as follows

Code: Select all

<div id="grid" data-columns>
   <div class="column size-1of3">
      <div>Item #1</div>
      <div>Item #4</div>
      …
   </div>
   <div class="column size-1of3">
      <div>Item #2</div>
      <div>Item #5</div>
      …
   </div>
   <div class="column size-1of3">
      <div>Item #3</div>
      <div>Item #6</div>
      …
   </div>
</div>

Point is, we simply need to produce a straight listing of elements - it will get dynamically changed into the kind of code shown above.

So please try modifying your code to make it as follows -

Code: Select all

<div class="intro-grid" data-columns>   
<cms:pages masterpage="products.php" include_subfolders='0' >
  <div>
    <a href="<cms:show gg_image />"><img src="<cms:show gg_image />" class="img-responsive img-gallery"/></a>
  </div>
</cms:pages>   
</div>

I've removed the explicit class="column size-1of3" you were adding in your original code.
I think if your CSS declarations are as documented, that change should give you a dynamic three column listing.

Hope it helps. Do let us know.