Problems, need help? Have a tip or advice? Post it here.
25 posts Page 1 of 3
Hi guys,

I have a tricky question here and not even sure if this will be possible.

I've built a responsive website which is now live and the client needs certain sections to be editable and two pages to be cloneable. I have read the tutorials and a realise how to create editable sections of HTML code and how to create cloneable pages.

However my issue is somewhat more complicated; I have used a responsive image carousel where the images are called in the CSS. Each one is linked to a specific <li class=""> in the HTML. With each of the list items is a <p> tag creating the white title within the dark blue block below each image. Please refer to the attached image which clearly shows the images within the carousel and the blue title blocks sitting below.

The URL for the site is: http://www.magicalquests.com

Here's a sample of the HTML code for one list item in the carousel:

<li class="jessica-elf"><a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust"><div class="label"><p class="jessica-elf">The Emerald Elf's Quest</p></div></a></li>

And here's the corresponding CSS:

/* ---------------------------------------------
Image carousel party theme list images
------------------------------------------------- */
li.jessica-elf {background-image:url(../img/emerald-elf-party-image.jpg);}

/* --------------------------------------
Label text styles
----------------------------------------- */
p.jessica-elf {font-family: times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size:17px;
color:#fff; padding-top: 10px;}

My question is, if these items (image, blue block and white title text) sit in the same unit but are populated using both HTML and CSS, is it possible to create these as a repeatable unit for this page, effectively allowing the client to add new units (uploading their own images and creating their own titles) as and when necessary?

Thanks in advance.

Marc

Attachments

Hi,

I think seeing the markup for atleast two slides in the carousel will put things in perspective in a better way -
Code: Select all
<div class="list_carousel responsive">
    <ul id="foo4">
        <li class="jessica-elf">
            <a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust">
                <div class="label"><p class="jessica-elf">The Emerald Elf's Quest</p></div>
            </a>
        </li>
       
        <li class="superhero">
            <a href="drama-party-themes/superhero-parties.html" title="Calling all Supers!  We need a Hero!">
                <div class="label"><p class="superhero">Superhero Parties</p></div>
            </a>
        </li>
        <!-- more slides -->
    </ul>
</div>

The relevant styles for the elements in the CSS file are -
Code: Select all
p.jessica-elf {
    font-family: times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size: 17px;
    color: #fff;
    padding-top: 10px;
}

p.superhero {
    font-family: times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size: 17px;
    color: #fff;
    padding-top: 10px;
}

li.jessica-elf {
    background-image: url(../img/fairytale-parties-emerald-elf.jpg);
}

li.superhero {
    background-image: url(../img/superhero-parties-spiderman.jpg);
}

As can be seen, the style for 'p' is identical for all slides.
The style for 'li' defines only the image used.

With this info in hand, I think this would be perfect case where in-line styling suits us best.
This is how we can proceed -
Define a repeatable region (I am assuming the name to be 'my_carousel') with following 4 fields
slide_image
slide_link
slide_title
slide_label
where 'slide_image' is of 'image' type with the appropriate width and height while the rest are of type 'text' or 'textarea'.

The following code then can be used to output the carousel -
Code: Select all
<div class="list_carousel responsive">
    <ul id="foo4">
    <cms:show_repeatable 'my_carousel' >
        <li style="background-image: url(<cms:show slide_image />);">
            <a href="<cms:show slide_link />" title="<cms:show slide_title />">
                <div class="label"><p class="jessica-elf"><cms:show slide_label /></p></div>
            </a>
        </li>
    </cms:show_repeatable>   
    </ul>
</div>

Please note that we are using inline styling for the LI images and the same styling for all P elements.

Does this help? Please let us know.
Thanks.
Hi KK,

thanks for your reply, it looks logical, I'll give it a go in the morning.

One other question though, as you can see I've already built the carousel which works perfectly, I just need to create the facility for the client to be able to repeat those units populated with their own data.

Does your solution mean that would have to apply those inline styles to all of the other slides as well? Or does adding that one extra slide at the end of the unordered list with the definable areas do the trick?

Thanks, your help is greatly appreciated.

Kind regards,

Marc
If you output the contents of the repeatable regions in the following manner, your existing hard-coded slides in the carousel will stay the same as before and the ones added from the admin-panel will get appended to them -
Code: Select all
<div class="list_carousel responsive">
    <ul id="foo4">
        <!-- the following two slides are static -->
        <li class="jessica-elf">
            <a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust">
                <div class="label"><p class="jessica-elf">The Emerald Elf's Quest</p></div>
            </a>
        </li>
       
        <li class="superhero">
            <a href="drama-party-themes/superhero-parties.html" title="Calling all Supers!  We need a Hero!">
                <div class="label"><p class="superhero">Superhero Parties</p></div>
            </a>
        </li>
       
        <!-- following are dynamically added slides -->
        <cms:show_repeatable 'my_carousel' >
        <li style="background-image: url(<cms:show slide_image />);">
            <a href="<cms:show slide_link />" title="<cms:show slide_title />">
                <div class="label"><p class="jessica-elf"><cms:show slide_label /></p></div>
            </a>
        </li>
        </cms:show_repeatable> 
    </ul>
</div>

However, is that really what you want? I think it'd be better to allow the clients to manage *all* slides - even those hard-coded right now.

I'd suggest you replace your existing code with our new code.
It should take very little time to input data about the existing slides into the dynamic version so as to make the solution completely user manageable.
Ok cool, yeah I agree with you I'll do that.

I've added the code you've suggested but in the first instance I added it as an extra slide, in other words it became the last in the list. When I refreshed the page it was just displaying a blank grey box and blue label box (where the elements would go) at the end of the carousel.

I then cut the hard coded list items leaving just the dynamic code. When I refreshed the page there was nothing in the carousel at all. I've refreshed the super admin pane as well and no editable regions are showing at all.

So, I placed the following code at the top of the page just below the opening php string:

<cms:editable name='slide_link' type='richtext' />
<cms:editable name='slide_title' type='richtext' />
<cms:editable name='slide_label' type='richtext' />

<cms:editable name='slide_image'
crop='1'
width='291'
height='187'
type='image'
/>

but alas, still no editable regions in the admin panel. Not really sure what I'm doing wrong:

Here's the revised HTML:

<!-- PARTY THEME LINKS SLIDER -->
<div class="list_carousel responsive">
<ul id="foo4">
<cms:show_repeatable 'my_carousel' >
<li style="background-image: url(<cms:show slide_image />);">
<a href="<cms:show slide_link />" title="<cms:show slide_title />">
<div class="label"><p class="jessica-elf"><cms:show slide_label /></p></div>
</a>
</li>
</cms:show_repeatable>
</ul>
</div>

Thanks,

Marc
The way editable regions are being defined in the code, it will only create single (i.e. the regular) instances of those editable regions. To convert these to repeatable regions, we'll have to enclose the group of regions with the cms:repeatable tag like this -
Code: Select all
<cms:repeatable name='my_carousel' >
    <cms:editable name='slide_link' type='text' />
    <cms:editable name='slide_title' type='text' />
    <cms:editable name='slide_label' type='text' />

    <cms:editable name='slide_image'
        crop='1'
        width='291'
        height='187'
        type='image'
    />
</cms:repeatable>

Please notice that 'richtext' cannot be made repeatable so I am using plain 'text' You can use 'textarea' or 'nicedit' instead.

I think you'll also need to use the col_width and input_width parameters to fine-tune the widths of the four columns. Please see http://www.couchcms.com/docs/concepts/r ... gions.html where repeatable regions are discussed in detail.

Please let me know if this helps.
I just tried that last idea and the admin panel is still showing "No Editable Regions defined" with just the 'save' and 'view' buttons beneath.

I don't think reading the documentation again is going to help in this situation since it's quite a specific issue.

This is perplexing :-(

Regards,

Marc
Are you sure you made the mandatory visit to the template as super-admin after making the changes? (as 'super-admin' is the key here - please use the same browser that has the admin-panel open).
OK this is what the admin panel is showing now (please refer to the attached screenshot), clearly this isn't right is it? I've tried populating the text field and uploading an image but nothing changes on the page view.

I would have thought the following would be displayed in this order:

image upload field
hypertext link text field
title text field
label text field

and obviously if I converted all of the existing hard coded list items to the dynamic code the above four fields for each would be displayed vertically in the admin panel.

Thanks,

regards,

Marc

Attachments

Please modify the code for defining the repeatable regions to this -
Code: Select all
<cms:repeatable name='my_carousel' label='Carousel' >
    <cms:editable name='slide_image'
        crop='1'
        width='291'
        height='187'
        label='Image'
        show_preview='1'
        preview_width='100'
        input_width='155'
        type='image'
    />
    <cms:editable name='slide_link' label='Link' type='text' />
    <cms:editable name='slide_title' label='Title' type='textarea' />
    <cms:editable name='slide_label' label='Caption' type='textarea' />
</cms:repeatable>

Visit the template as super-admin for the changes to be picked up by Couch.
Once back in the admin-panel, this is what you should see -
1.png
1.png (8.33 KiB) Viewed 3634 times


I added two rows of info and this is what it looked like -
4.png
4.png (21.25 KiB) Viewed 3633 times


I used the following code to display the output -
Code: Select all
<div class="list_carousel responsive">
    <ul id="foo4">
    <cms:show_repeatable 'my_carousel' >
        <li style="background-image: url(<cms:show slide_image />); width: 292px;">
            <a href="<cms:show slide_link />" title="<cms:show slide_title />">
                <div class="label"><p class="jessica-elf"><cms:show slide_label /></p></div>
            </a>
        </li>
    </cms:show_repeatable>   
    </ul>
</div>

and this is what the generated HTML looked like -
Code: Select all
<div class="list_carousel responsive">
    <ul id="foo4">
   
        <li style="background-image: url(http://www.test.com/couch/uploads/image/fairytale-parties-emerald-elf.jpg); width: 292px;">
            <a href="drama-party-themes/fairy-pixie-parties.html" title="With storytelling, music, puppetry, party games and a pinch of pixie dust">
                <div class="label"><p class="jessica-elf">The Emerald Elf&#039;s Quest</p></div>
            </a>
        </li>

   
        <li style="background-image: url(http://www.test.com/couch/uploads/image/superhero-parties-spiderman.jpg); width: 292px;">
            <a href="drama-party-themes/superhero-parties.html" title="Calling all Supers!  We need a Hero!">
                <div class="label"><p class="jessica-elf">Superhero Parties</p></div>
            </a>
        </li>
       
    </ul>
</div>

This is all tried and tested code so I don't think you should have any problem now.
You can tweak the CSS styling if needed.

Hope this helps.
25 posts Page 1 of 3