I am using a slider for one of my pages.. that has 7 images, I would like to give my client the option to change those images of the slider through the couch back end... using the

Code: Select all

<img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />">

feature, however.. when I try to add more than one of these, only 1 appears in the back end. Ive tried to repeat feature as well, however it doesnt work for how I would like it to incorporate with my slider.. this is how my code looks now without image feature..

Code: Select all

   <ul class="rslides rslides1" style="text-align:center;">
  
     <li><img src="img/philosophy/cauli.jpg" alt=""></li>
      <li><img src="img/philosophy/marmalade.jpg" alt=""></li>
     <li><img src="img/philosophy/babyfaces.jpg" alt=""></li>
     <li><img src="img/philosophy/bike.jpg" alt=""></li>
     <li><img src="img/philosophy/strawberries.jpg" alt=""></li>
     <li><img src="img/philosophy/greenlanterns.jpg" alt=""></li>
     <li><img src="img/philosophy/cookbooks.jpg" alt=""></li> 

    </ul>

Id like it to look something like this

Code: Select all

   <ul class="rslides rslides1" style="text-align:center;">
  
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
      <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li>
     <li><img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
  width='960'
  crop='1'
  type='image' />" alt=""></li> 

    </ul>

That way, when my client logs in they can change whiche slider image they would like to change -- and the slider is still intact and in working order because the html code has not been broken (alas the 7 <li></li> sections)

for example: http://bohemiabarrie.com/menu.php

[KK]

Hi,

You are redefining the same region multiple times so we'll end up with just one (the last definition).

The proper way of implementing the slider would be to define the image region as 'repeatable'.

Somewhere on the top of your template, declare a cms:template block (if there isn't one present already)

Code: Select all

<cms:template>

</cms:template>

We can define our editable regions at one place by within the cms:template block.
Let us do so with the image region -

Code: Select all

<cms:template>

    <cms:repeatable name='slides' >
        <cms:editable name='prop_image' label='Image' desc='Upload main image of property here'
            width='960'
            crop='1'
            type='image' 
        /> 
    </cms:repeatable>
    
</cms:template>

Notice how we have declared the image as repeatable.

Refresh the template as super-admin.
Come back to the panel and add all images required for the slider.

Now on the front-end, change the UL code to include just one LI

Code: Select all

<ul class="rslides rslides1" style="text-align:center;">

    <li><img src="img/philosophy/cauli.jpg" alt=""></li>

</ul>

Finally wrap the LI within cms:show_repeatable tag to make it repeat as many times as there are images

Code: Select all

<ul class="rslides rslides1" style="text-align:center;">
    <cms:show_repeatable 'slides'>
        <li><img src="<cms:show prop_image />" alt=""></li>
    </cms:show_repeatable>
</ul>

That should create the slider.

Hope this helps.

YOU ROCK!

thanks!

[KK]

You are welcome