4

I'm currently trying (without much luck) to properly integrate the Allinone Thumbnail Banner into an EE template. I use CE Img with Matrix to feed the images.

The original Allinone Html looks like the following:

    <div id="containingDiv">


        <div id="allinone_thumbnailsBanner_simple" style="display:none;">
            <ul class="allinone_thumbnailsBanner_list">
                <!-- IMAGES -->
                <li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
                <li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
                <li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>

           </ul> 



            <!-- TEXTS -->


           <div id="allinone_thumbnailsBanner_photoText1" class="allinone_thumbnailsBanner_texts">
                <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive" data-initial-left="0" data-initial-top="60" data-final-left="0" data-final-top="305" data-duration="0.5" data-fade-start="0" data-delay="0">&nbsp;&nbsp;&nbsp;UP TO <a href="http://codecanyon.net/user/LambertGroup" target="_blank">4 TYPES</a> OF SLIDERS<br />&nbsp;&nbsp;&nbsp;Each with multiple SKINS</div>
           </div>       

           <div id="allinone_thumbnailsBanner_photoText2" class="allinone_thumbnailsBanner_texts">
                <div class="allinone_thumbnailsBanner_text_line textElement21_simpleResponsive" data-initial-left="200" data-initial-top="60" data-final-left="45" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="font-weight:bold;">16 TRANSITION EFFECTS<br /> FOR IMAGES</span><br />optional can set the transition<br /> for each image</div>   
           </div>  


    </div>

--Where the Images are the thumbs and displayed image. And the Texts are the subtitles for each image.

This is as far as I could get

   <div id="containingDiv">


        <div id="allinone_thumbnailsBanner_simple" style="display:none;">

          <ul class="allinone_thumbnailsBanner_list">
            <!-- IMAGES -->
            {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

           {article_images} 

             <li data-bottom-thumb="{image_matrix_image}" data-text-id="#allinone_thumbnailsBanner_photoText1">

              {exp:ce_img:single src="{image_matrix_image}" disable_xss_check="yes" width="960" height="500" allow_scale_larger="yes" crop="yes" quality="60"}" alt="" /></li>






                        <div id="allinone_thumbnailsBanner_photoText1"     class="allinone_thumbnailsBanner_texts">
                        <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive"  <a href="{site_url}{channel_short_name}/view/{url_title}"  "{image_matrix_cutline}"</a> </div>
                   </div>

                {/article_images} 

     {/exp:channel:entries}
    </li>





       </div>




    </div>  

But I still can't display the subtexts for the images properly or at all. And I know I've heard something about using the {row_count} variable along with the div classes but I haven't had any luck with that either. I would appreciate any hints as how to go about EE'ing up jquery Html and the classes. Thanks in advance.

  • Have you gotten it to work without CE Img yet? I'd suggest getting that far, and then adding CE Img to the mix. – Tim Feb 15 '13 at 18:43
  • Yes, I've been able to get it to work using straight HTML. Or are you referring to HTML with EE tags? Sorry, I'm fairly new at ExpressionEngine as well and learning new things daily with it's power. – Cedric Feb 15 '13 at 18:50
  • I think your issues are more likely related to the HTML output rather than CE Image (see my answer), but if you are more specific about the results you are getting in the rendered template I can try to help. – Alex Kendrick Feb 15 '13 at 19:20
7

It's a little tricky to help since I can't find a documentation page for the Allinone Thumbnail Banner jQuery plugin. But if I had to guess based on what the HTML output is supposed to look like, then these are the issues you are likely to be having:

The first issue is that you are not closing your ul tag. It needs to be closed before you output your thumbnails and captions. The simplest solution, at least to get started, is to use two channel:entries loops. One to create the list of images, the other to create the associated captions.

The second issue relates to uniquely identifying your captions. Since your channel:entries loop is pulling multiple entries, and thus multiple Matrix fields, {row_count} will not uniquely identify your captions. You'd end up outputing a row count of "1" up to eight times. This is because your channel:entries limit is set to 8 and I'm guessing all of your Matrices have at least one row.

So instead, try using {row_id} which will be unique.

Other HTML errors: It also looks like you're missing a closing bracket on the opening tags of div.allinone_thumbnailsBanner_text_line and its nested a tag.

Definitely view source and/or inspect the HTML that is generated by your template and compare the actual output to your desired output. In addition, running it through an HTML validator can help you catch basic errors that are easy to overlook.

If I understand your setup this should do the trick:

<div id="containingDiv">

  <div id="allinone_thumbnailsBanner_simple" style="display:none;">

    <ul class="allinone_thumbnailsBanner_list">
      {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

         {article_images} 

            <li data-bottom-thumb="{image_matrix_image}" data-text-id="#allinone_thumbnailsBanner_photoText{row_id}">
              {exp:ce_img:single src="{image_matrix_image}" disable_xss_check="yes" width="960" height="500" allow_scale_larger="yes" crop="yes" quality="60"}" alt="" />
            </li>

          {/article_images} 

      {/exp:channel:entries}
    </ul>

    {exp:channel:entries channel="top_photos|gallery|recent" limit="8" offset="1" status="Open|fixed"}

      {article_images}

        <div id="allinone_thumbnailsBanner_photoText{row_id}"     class="allinone_thumbnailsBanner_texts">
          <div class="allinone_thumbnailsBanner_text_line textElement11_simpleResponsive">
            <a href="{site_url}{channel_short_name}/view/{url_title}"> "{image_matrix_cutline}"</a> 
          </div>
       </div>

      {/article_images} 

    {/exp:channel:entries}

  </div>

</div>  

If this doesn't get you where you need to go, I'd recommend simplifying your template first, then build up from there. This will ensure all your EE tags are working as expected and you don't have typos in your custom field names, syntax errors, or other errors of that nature.

  • Alex, this look like it works! Sorry about the easy mistakes. Yes, great point about {row_count} vs {row_id} and opening the 2nd entries channels // like I said I'm still learning and greatly appreciate your detailed answer! Thanks! – Cedric Feb 16 '13 at 18:09
  • Glad I could help! – Alex Kendrick Feb 17 '13 at 15:03

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.