0

I have a channel named Projects, and within that channel i have a 'channel images' field (p_feature). It allow the user to upload one image, and if they do so that image will appear on the Home page as part of a carousel slider. ..So a 'feature' image is not uploaded for every Project entry, but only the ones the user wants featured on the home page.

Below is how the html looks:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>

 <div id="slider" class="nivoSlider">
  <img src="1.jpg" data-thumb="1.jpg" alt="" title="#htmlcaption1"  />
  <img src="2.jpg" data-thumb="2.jpg" alt="" title="#htmlcaption2"  />
 </div>

 <div id="htmlcaption1" class="nivo-html-caption">Title 1 <a href="#">Link 1</a></div>
 <div id="htmlcaption2" class="nivo-html-caption">Title 2 <a href="#">Link 2</a></div>

</div>

The Captions appear below the slider div, and also link to the Project.
So my code produces the image, but i'm not sure how to produce the caption (project title & url) that relates to the feature image uploaded.

Plus because the captions (have to) appear outside of the slider div, do i have to open the channel entries tag again?

So something like this:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">
 {exp:channel:entries channel="project"}
    {if p_feature}
    {exp:channel_images:images channel="project" entry_id="{entry_id}"}
      <img src="{image:url:carousel}" data-thumb="{image:url:carousel}" alt="" title="#htmlcaption{entry_id}" />
    {/exp:channel_images:images}
    {/if}
 {/exp:channel:entries}
</div>


 {exp:channel:entries channel="project"}
  {if p_feature}
    {exp:channel_images:images channel="project" entry_id="{entry_id}"}
        <div id="htmlcaption{entry_id}" class="nivo-html-caption">{title} <a href="/projects/{url_title}">Read More</a></div>
    {/exp:channel_images:images}
  {/if}
 {/exp:channel:entries}

</div>

Plus is there a way to 'automatically' add ascending numbers? I would need that for the #htmlcaption1, #htmlcaption2, #htmlcaption3 etc.

Any help is greatly appreciated!


UPDATE: Code has been updated with working solution.

1

Yup, that's the way. I hope someone can post a better answer, but I have nivoSlider live on several sites, and here is my implemented code off of one of them:

<div class="slider-wrapper theme-light">
    <div class="ribbon"></div>
    <div style="width: 100%;" class="nivoSlider" id="slider" style="overflow: hidden">
        {exp:channel:entries channel="homepage_slider"}
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
                    <img src="{image}" title="#nivo_htmlcaption{entry_id}"/>    
                </a>
            {if:else}
                    <img src="{image}" title="#nivo_htmlcaption{entry_id}"/>
            {/if}
        {/exp:channel:entries}
    </div>
    {exp:channel:entries channel="homepage_slider"}
    <div id="nivo_htmlcaption{entry_id}" class="nivo-html-caption ">
        <div class="nivo-html-caption-headline slider-title">
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
            {/if}
            {headline}
            {if link}
                </a>
            {/if}
        </div>
        <div class="nivo-html-caption-subtitle slider-subtitle">
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
            {/if}
            {subtitle}
            {if link}
                </a>
            {/if}
        </div>
    </div>
    {if link}
        </a>
    {/if}
    {/exp:channel:entries}
</div>

It's basically what you already thought of. Two channel entry loops really doesn't cause a huge performance hit. Complicated parsing does but that isn't a big deal (especially if you use something like CE-Cache or CloudFlare, which you should if it's a heavy site with a lot of hits). As for ID's, just wing the entry_id tag like I did, since it's unique anyways!

Edit:

That's a broken way to do that conditional, friend. Do this:

{if p_feature}
    <div>{p_feature} goes here</div>
{/if}

Here:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
    {exp:channel:entries channel="project" dynamic="no" limit="1"}
        {exp:channel_images:images entry_id="{entry_id}"}
        <img src="{image:url:carousel}" data-thumb="{image:url:carousel}" alt="" title="#htmlcaption-{entry_id}" />
        {/exp:channel_images:images}
    {/exp:channel:entries}
</div>

{exp:channel:entries channel="project" disable="categories|category_fields|member_data|pagination|trackbacks" limit="1"}
{if p_feature}
{exp:channel_images:images entry_id="{entry_id}"}
    <div id="htmlcaption-{entry_id}" class="nivo-html-caption" title="slide-{entry_id}">
        Dump whatever channel:images tags you want here.
        {title}
        <a href="/projects/{url_title}">
            Read More 
        </a>
    </div>
{/exp:channel_images:images}
{/if}
{/exp:channel:entries}

Please refer to:

http://www.devdemon.com/documentation/tag/images/

| improve this answer | |
  • Thanks for the response. The way i posted it doesn't work for me though as i need to work out the 2nd part. In my example i have put {if "{p_feature}"!=""} but that produces nothing. Plus how does it work out the related details/caption (title/url) for the image..? – ZEDG May 5 '15 at 18:43
  • ? Your result will have a batch of slider divs, and a batch of caption divs. If you use {entry_id} in the div ID, nivoSlider looks at the correct divs... – jrothafer May 5 '15 at 18:48
  • Thank a lot. I have updated my code above. I also just noticed your extended post with the code i required (worked it out myself before i saw it!). I was requiring the entry_id="{entry_id}" within the CI tag, plus i needed to use the CI tag for the caption aswell since it did not recognise p_feature without it. THANK YOU. – ZEDG May 5 '15 at 19:28
  • My pleasure! Happy coding! – jrothafer May 5 '15 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.