Unexpected behaviour order of images in slideshow

[pwired]

Hi I have unexpected behaviour of images shown in the right order in a slideshow. Everything was working well in the beginning, that is, the first image entered in the page image field came up as the first image in the slideshow, the second as the second, the third as the third, etc. etc. But when I started to enter text in each description bar under each image in the page image field, as caption text over the thumbs in the slideshow, now the first image no longer comes up as the first image in the slideshow. All images are suddenly shuffled. What can cause this ? I have to say that I changed the number of lines for the description bar a couple of times. Can I solve the right order of the images by cleaning some kind of cache ?

I am using the description text entered under each image in the image field as caption text over each thumb in the slideshow. How can I get a second description text as caption text over the big images in the slideshow ?

This is the code used for the slideshow accessing the images in the database.

foreach($page->images as $image) {
echo "<li>\n";
echo "<div class='thumb'>\n";
$thumb = $image->size(72, 54);
echo "<img src='$thumb->url' alt='$image->description'>\n";
echo "<p><span class='cap-title'>$image->description</span></p>\n";
echo "</div>\n";
echo "<a href='$image->url'></a>\n";
echo "<a href='' target='_blank'></a>\n";
echo "</li>\n";
}

[pwired]

Bumb - - - anyone ? 

[Soma]

Sorry but I can't reproduce this. Image are always rendered the same order as in the admin.

It's not possible to add another text field unless you modify the module (make a copy to site folder and rename all relevant names and add more text fields) or use ImagesManager where you can have as much custom fields a page can hold.

[pwired]

I found it ! Inside a java script file preview.js that is part of the slideshow I found a lot of configuration settings.

One of the settings I found there is shuffle:true, changed it into shuffle:false, and now everything is ok.

Man, when it comes to webbuilding/design there's just soooo many things you have to keep your eye on.

Now that you mention it Soma, it would be very handy to not only have a single but a second description bar standard under each image in the images field. Many slideshows show thumbs and pictures where caption text is needed over both the thumbs and the pictures. I will have a look at the ImagesManager.

[diogo]

To debug this kind of things the best thing is to look at the markup without javascript to know if the problem is with php or js. Sometimes it's enough to just remove the slideshow class or ID.

[pwired]

Sometimes it's enough to just remove the slideshow class or ID.

Simple and Clever trick, thanks!

[Lance O.]

This happened to me when using the jQuery Cycle 2 plugin. If I remember correctly, the images were displaying in the same order they were loading into the page, so the order was different for different users. A simple script setting adjustment fixed the problem.

The great thing about problems like this is that once you've spent time discovering the solution, you at least know what to look for if you manage to make the same mistake! 

[mosravo]

Hi i have an issue with my slide show display. i am using a plugin called cssSlider, though am new to process wire, the slide code was generated and i embedded it in my main.inc page. The problem i am having is that  i am able to see the slide container 'rectangle box' but cant see the images ' the images are not displaying' but the slide process effect is sliding without images, what do you think is the problem. may be am not doing the right thing, below is the code generated by my cssSlider Plugin.

Please i need your advise,i need possible solutions, from there i guess i can figure out the problem too. Thanks is advance

1. Is the main.inc not the right page to insert the sliding code?
2. Is the image tag refrence the not supported in this format?

<!-- Start cssSlider.com -->
    <!--[if IE]><link rel="stylesheet" href="engine1/ie.css"><![endif]-->
    <!--[if lte IE 9]><script type="text/javascript" src="engine1/ie.js"></script><![endif]-->
<link rel="stylesheet" href="engine1/style.css">
    <div class='csslider1 autoplay '>
        <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_4' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_5' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_6' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_7' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
        <input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor' >
        <ul>
            <div style="width: 100%; visibility: show; font-size: 0px; line-height: 0;">
                <img src="cssSlider/data1/images/enter10ment_sd.jpg" style="width: 100%;">
            </div>
            <li class='num0 img'>
                <img src='cssSlider/data1/images/enter10ment_sd.jpg' alt='enter10ment_sd' title='enter10ment_sd' />
            </li>
            <li class='num1 img'>
                <img src='cssSlider/data1/images/img2013122100548.jpg' alt='IMG-20131221-00548' title='IMG-20131221-00548' />
            </li>
            <li class='num2 img'>
                <img src='cssSlider/data1/images/llllll.jpg' alt='llllll' title='llllll' />
            </li>
            <li class='num3 img'>
                <img src='cssSlider/data1/images/logooo.jpg' alt='logooo' title='logooo' />
            </li>
            <li class='num4 img'>
                <img src='cssSlider/data1/images/mc_alleluya_entertainment.jpg' alt='mc_alleluya_entertainment' title='mc_alleluya_entertainment' />
            </li>
            <li class='num5 img'>
                <img src='cssSlider/data1/images/mchead.png' alt='mchead' title='mchead' />
            </li>
            <li class='num6 img'>
                <img src='cssSlider/data1/images/tellybronzelarge1.jpg' alt='tellybronzelarge-1' title='tellybronzelarge-1' />
            </li>
            <li class='num7 img'>
                <img src='cssSlider/data1/images/ughelli2013121502808.jpg' alt='Ughelli-20131215-02808' title='Ughelli-20131215-02808' />
            </li>
        
        </ul>
        
        
        <div class='cs_arrowprev'>
            <label class='num0' for='cs_slide1_0'></label>
            <label class='num1' for='cs_slide1_1'></label>
            <label class='num2' for='cs_slide1_2'></label>
            <label class='num3' for='cs_slide1_3'></label>
            <label class='num4' for='cs_slide1_4'></label>
            <label class='num5' for='cs_slide1_5'></label>
            <label class='num6' for='cs_slide1_6'></label>
            <label class='num7' for='cs_slide1_7'></label>
        </div>
        <div class='cs_arrownext'>
            <label class='num0' for='cs_slide1_0'></label>
            <label class='num1' for='cs_slide1_1'></label>
            <label class='num2' for='cs_slide1_2'></label>
            <label class='num3' for='cs_slide1_3'></label>
            <label class='num4' for='cs_slide1_4'></label>
            <label class='num5' for='cs_slide1_5'></label>
            <label class='num6' for='cs_slide1_6'></label>
            <label class='num7' for='cs_slide1_7'></label>
        </div>
        
        <div class='cs_bullets'>
            <label class='num0' for='cs_slide1_0'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/enter10ment_sd.jpg' alt='enter10ment_sd' title='enter10ment_sd' /></span>
            </label>
            <label class='num1' for='cs_slide1_1'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/img2013122100548.jpg' alt='IMG-20131221-00548' title='IMG-20131221-00548' /></span>
            </label>
            <label class='num2' for='cs_slide1_2'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/llllll.jpg' alt='llllll' title='llllll' /></span>
            </label>
            <label class='num3' for='cs_slide1_3'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/logooo.jpg' alt='logooo' title='logooo' /></span>
            </label>
            <label class='num4' for='cs_slide1_4'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/mc_alleluya_entertainment.jpg' alt='mc_alleluya_entertainment' title='mc_alleluya_entertainment' /></span>
            </label>
            <label class='num5' for='cs_slide1_5'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/mchead.png' alt='mchead' title='mchead' /></span>
            </label>
            <label class='num6' for='cs_slide1_6'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/tellybronzelarge1.jpg' alt='tellybronzelarge-1' title='tellybronzelarge-1' /></span>
            </label>
            <label class='num7' for='cs_slide1_7'>
                <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssSlider/data1/tooltips/ughelli2013121502808.jpg' alt='Ughelli-20131215-02808' title='Ughelli-20131215-02808' /></span>
            </label>
        </div>
        
        </div>
        <!-- End cssSlider.com -->

[kongondo]

Mosravo

A couple of requests/pointers before I attempt an answer

1. If your question does not relate to the specific issue in an existing thread, please start your own topic. This way, the conversation remains clear...
2. Not everybody uses the same templating approach in ProcessWire. Not everybody will know what main.inc is, let alone know what sort of code it contains. Please, be as specific as possible in your questions. I am assuming your are talking about the main.inc in the Blog Profile
3. Please, enclose all code within the code tags provided in the post editor when you are making a post (see the icons)

Now that we have the niceties out of the way..

First, I would suggest to test your code in a standalone test page using its own template file rather than something as complicated as the Blog Profile. This way, it might be easier to debug....

Second, your image paths look like this: img src='cssSlider/data1/images/img2013122100548.jpg'. That's definitely not a ProcessWire page image path.

• Using web developer tools, have you confirmed that the images are actually being served? Are they missing?
• If not, how are you generating those paths? I am assuming you are not hard coding them, or are you?

You have at least two choices with respect to serving the images to your slider plugin:

1. You can create either 1 page with multiple images that you can loop through and output the html that is required by your slider plugin or you can have each image be its own page and loop through them outputting the html the plugin needs.
2. You can save your images in your own folders somewhere in your /site/..e.g. /site/assets/myfolders/ and use PW API to get the relative path to your custom folder and serve your images from there

I would go for #1. 

It will help you to read up on the PW image fieldtype API here: http://processwire.com/api/fieldtypes/images/

Also have a look at the $config API here: http://processwire.com/api/variables/config/

Btw, I don't know about cssSlider but its code looks overly complicated? There's a ton of jQuery slider plugins that would produce much cleaner code...just saying

[mosravo]

Mosravo

A couple of requests/pointers before I attempt an answer

1. If your question does not relate to the specific issue in an existing thread, please start your own topic. This way, the conversation remains clear...
2. Not everybody uses the same templating approach in ProcessWire. Not everybody will know what main.inc is, let alone know what sort of code it contains. Please, be as specific as possible in your questions. I am assuming your are talking about the main.inc in the Blog Profile
3. Please, enclose all code within the code tags provided in the post editor when you are making a post (see the icons)

Now that we have the niceties out of the way..

First, I would suggest to test your code in a standalone test page using its own template file rather than something as complicated as the Blog Profile. This way, it might be easier to debug....

Second, your image paths look like this: img src='cssSlider/data1/images/img2013122100548.jpg'. That's definitely not a ProcessWire page image path.

• Using web developer tools, have you confirmed that the images are actually being served? Are they missing?
• If not, how are you generating those paths? I am assuming you are not hard coding them, or are you?

You have at least two choices with respect to serving the images to your slider plugin:

1. You can create either 1 page with multiple images that you can loop through and output the html that is required by your slider plugin or you can have each image be its own page and loop through them outputting the html the plugin needs.
2. You can save your images in your own folders somewhere in your /site/..e.g. /site/assets/myfolders/ and use PW API to get the relative path to your custom folder and serve your images from there

I would go for #1. 

It will help you to read up on the PW image fieldtype API here: http://processwire.com/api/fieldtypes/images/

Also have a look at the $config API here: http://processwire.com/api/variables/config/

Btw, I don't know about cssSlider but its code looks overly complicated? There's a ton of jQuery slider plugins that would produce much cleaner code...just saying

 Kongondo thanks a lot for your correction and your detail explanation, i guess i will have to try what you just said in your post and see the outcome. thanks a million. i do appreciate all.

[Lance O.]

I highly recommend jQuery Cycle 2. I've been using it and the earlier version for years and absolutely love it. And I can easily integrate slides into ProcessWire.

http://jquery.malsup.com/cycle2/

[mosravo]

So Lance how do i implement this in process wire, i just need a basic step and i believe i can achieve the rest, i want to implement this jQuery Cycle 2 slide thing in the home page of this site i am working on lately www.mcalleluyashow.mil.nf. i will be very grateful if you can help. thanks in advance

[Lance O.]

Depending on the project, I'll set up slides in one of two ways:

1. I'll create a repeating field named "slideshow" that contains an image, a text field, and a link field. This repeating field resides in a tab on templates that use a slideshow, such as the Home page.
2. Or, I'll create a parent template named "slideshow," then create a child template named "slide" that contains an image, a text field, and a link field.

The text and link fields are optional and only need to be included if each slide contains HTML text and/or is linked.

Once the slides are populated in the CMS, I'll use Cycle2's API to set the slideshow options for that particular project in my template. http://jquery.malsup.com/cycle2/api/

Here is a simplified example of the code. You'll need to set your own options for the slideshow based on your project requirements.

$items = $page->slideshow_repeater; // if using repeater field
// $items = $page->children("template=slide,sort=sort"); // if using pages

echo "<div id='slideshow'>";
    echo "<div class='cycle-slideshow'";
    echo " data-cycle-fx='fade'";
    echo " data-cycle-loader='wait'";
    echo " data-cycle-slides='> .slide'";
    echo " data-cycle-speed='500'";
    echo " data-cycle-swipe='true'";
    echo " data-cycle-timeout='4000'";
    echo ">";
    foreach ( $items as $item ) {
        echo "<div class='slide'>";
            echo "<a href='{$item->link}'>";
            echo "<img src='{$item->image->url}' alt='{$image->description}'>";
            echo "</a>";
        echo "</div>"; // slide
    }
    echo "</div>"; // cycle-slideshow
echo "</div>"; // slideshow

Here is a site I developed earlier this year that uses different implementations of the Cycle2 plugin and ProcessWire: http://prcss.in/rosendale

[mosravo]

Depending on the project, I'll set up slides in one of two ways:

1. I'll create a repeating field named "slideshow" that contains an image, a text field, and a link field. This repeating field resides in a tab on pages that use a slideshow, usually the Home page.
2. Or, I'll create a parent template named "slideshow," then create a child template named "slide" that contains an image, a text field, and a link field.

The text and link fields are optional and only need to be included if each slide contains HTML text and/or is linked.

Once the slides are populated in the CMS, I'll use Cycle2's API to set the slideshow options for that particular project in my template. http://jquery.malsup.com/cycle2/api/

Here is a simplified example of the code. You'll need to set your own options for the slideshow based on your project requirements.

$items = $page->slideshow_repeater; // if using repeater field
// $items = $page->children("template=slide,sort=sort"); // if using pages

echo "<div id='slideshow'>";
    echo "<div class='cycle-slideshow'";
    echo " data-cycle-fx='fade'";
    echo " data-cycle-loader='wait'";
    echo " data-cycle-slides='> .slide'";
    echo " data-cycle-speed='500'";
    echo " data-cycle-swipe='true'";
    echo " data-cycle-timeout='4000'";
    echo ">";
    foreach ( $items as $item ) {
        echo "<div class='slide'>";
            echo "<a href='{$item->link}'>";
            echo "<img src='{$item->image->url}' alt='{$image->description}'>";
            echo "</a>";
        echo "</div>"; // slide
    }
    echo "</div>"; // cycle-slideshow
echo "</div>"; // slideshow

Here is a site I developed earlier this year that uses different implementations of the Cycle2 plugin and ProcessWire: http://prcss.in/rosendale

MY Question is which of the pages will i embed the slide code.?

[Lance O.]

Include the slideshow code in the template where you want the slideshow to display.

[kongondo]

MY Question is which of the pages will i embed the slide code.?

Technically, it doesn't really matter actually because with ProcessWire you can adapt that code to pull in pages from anywhere ($pages) or stuff related to the current page being viewed ($page). This is an important concept to be grasped. And yeah, of course the code is to be placed in a template file and not really a page ;-)...but back to the issue if using pages, to reiterate my point the most important line in the code shown by Lance is this:

$items = $page->children("template=slide,sort=sort"); 

If getting stuff from other pages, that could just as well be this...

$items = $pages->get(1234)->children("template=slide,sort=sort"); 

The above will return arrays that you can do lots of stuff with. What I am trying to say is that PW has a very powerful API that you can take advantage of anywhere . Once you wrap your head around that, you can build anything Happy coding!

[SoccerGuy3]

Lance - You mention putting the repeating field on its own tab in the template. How do you do that? I don't see any settings in the template or field setup to allow this.

marc

Depending on the project, I'll set up slides in one of two ways:

1. I'll create a repeating field named "slideshow" that contains an image, a text field, and a link field. This repeating field resides in a tab on templates that use a slideshow, such as the Home page.
2. Or, I'll create a parent template named "slideshow," then create a child template named "slide" that contains an image, a text field, and a link field.

[LostKobrakai]

You can create tabs with FieldsetTab. Instead of just grouping fields this fieldset will additionally create a new tab, where fields will reside.

[Lance O.]

My preferred approach is to create a high level "Slideshows" page. Then I will create a parent "Slideshow" page and add individual slides as child pages. On the page where a slideshow needs to be assigned, I create a Page field that allows for a single slideshow selection.

Using repeater fields is a bit limited in that you have to completely delete the slide from the slideshow if you no longer want to use it. Some of my clients want to unpublish a slide and then use it again in the future. Using pages as individual slides provides them more flexibility, and using pages as slideshows allows them to create a variety of slideshows that can be swapped out. For example, a client may want to change Home page slideshows on a seasonal basis.

[EyeDentify]

Just adding my two cents here. Or "kronor" in my case cause i am from sweden.

Anyways... 

I have allways made my own Slider implementation using the excellent Flickity slider from
http://flickity.metafizzy.co/

It´s really great and easy to work with. Many config options and great support.

I would just render out each image from the image field type and then use the built in crop or resize methods for thumbnails.