How to setup LISE as an Image Slider?

[FCazabon]

Hi, been away from CMSMade Simple for some years but have to bring an old 1.11 version site up to version 2.16 and want to display various image sliders. Couldn't get ShowTime to work and came across a reference that mentioned using LISE and some scripts to get this to work.

Unfortunately I am struggling to understand how to do this. Can anyone give me a hand or point me to some instructions anywhere?

[DIGI3]

You can generally use any slider script you want, and have LISE create the code it wants. Create a field for your image in LISE (in the below example I called it 'image'), and any others you need, then format the summary template to output what your script wants. A lot of slider scripts want a list, so in your LISE summary template you'd essentially do something like:

Code: Select all

<ul class="slider">
  {foreach from=$items item=item}
    {if $item->fielddefs.image.value}
      <li class="slide"><img src="{uploads_url}/images/slider/{$item->image}" alt="{$item->title}"></li>
    {/if}
  {/foreach}
</ul>

Note that this is a *very* simple example, and your requirements will vary greatly. There's hundreds of ways to do it, and all sorts of ways to make it more efficient. I often use SmartImage to create responsive image versions, and may do another foreach loop to create thumbnails etc.

[FCazabon]

Thanks, but can you help me through the basics?

I've installed LISE and created an instance called "Slider" with Mode set to "List" (what do the different modes mean?) This then appears in my Content section and I can edit it. I go into the Field Definitions tab and add a text input field, but when I save I get this warning/error:
Notice: Array to string conversion in C:\wamp64\www\footballiqacademy\lib\classes\internal\module_support\modform.inc.php on line 73

Did I do something wrong?

[DIGI3]

That's neither a warning nor an error, it's just a notice. On a production site you should supress those, and generally it's easier if you just log them rather than having them display. If it's a development site then you can have them show of course, if that's your preference. Chances are LISE just needs an update for the PHP version you're using, and I imagine that's on the way.

There are a number of LISE tutorials on Rolf's blog, perhaps start with https://cmscanbesimple.org/blog/the-lise-module, and of course read through the documentation (both in the main LISE module, and your instance).

[FCazabon]

Thanks, this is just in my development.

Unfortunately I have tried the documentation and the site you suggest but have not been able to actually understand what I am supposed to do to get going. Nowhere seems to give a step by step example of how to use this. I guess I'll have another go at both tomorrow and see if I can get any further.

[velden]

Try to setup a slider with some static images.
Choose a script (JS), proper stylesheets and the html needed to get it working.

Once that works setup a LISE Instance an add a field definition like 'File Upload' or 'File Select' (don't know the exact names by head).
Add a few LISE Items to the LISE instance and use the default (summary) action and template to output the html you need to get the images in your slider.

Side note: The Gallery module could be an alternative to LISE but the approach is about the same. (marked as stale but still working).

Later you may also consider adding smartimage to the summary template to resize the images as needed (Gallery has something built-in for that).

LISE is a generic module to list about anything you want.
Gallery is mainly used for photo galleries (an image slider could be considered a gallery too).
In the end you need a module which allows editors to upload/select images and outputs proper html. Both modules can do that.

[FCazabon]

I think I am getting a better understanding of this, but can't seem to get the script to actually run the slider. So I have the LISE set up like this:

Added a field definition of image as a text input.

Set the Summary default template to this:

Code: Select all

{if $items|@count > 0}

<ul class="rslides" id="slider1">
  {foreach from=$items item=item}
    {if $item->fielddefs.image.value}
      <li><img src="{uploads_url}/images/banner/{$item->image}" alt="{$item->title}"></li>
    {/if}
  {/foreach}
</ul>

{/if}

Added 3 items to the list setting the image property as the path to each of the images.

In the master template for my theme I have added the following within the head tags:

Code: Select all

  <__script__ src="{uploads_url}/scripts/responsiveslides.min.js"></__script>

{literal}<__script__>// You can also use "$(window).load(function() {"
    $(function () {

      // Slideshow 1
      $("#slider1").responsiveSlides({
        maxwidth: 800,
        speed: 800
      });

      // Slideshow 2
      $("#slider2").responsiveSlides({
        auto: false,
        pager: true,
        speed: 300,
        maxwidth: 540
      });

      // Slideshow 3
      $("#slider3").responsiveSlides({
        manualControls: '#slider3-pager',
        maxwidth: 540
      });

      // Slideshow 4
      $("#slider4").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });
</__script>
{/literal}  

I have also tried saving the script as a .js file and including it like this:

Code: Select all

  <__script__ src="{uploads_url}/scripts/rslider.js"></__script>

I have added the CSS necessary to the end of the main stylesheet:

Code: Select all

/* responsiveslides.com */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

The result is that I get the first image in the list displayed but nothing changes.

Any suggestions would be appreciated.

[velden]

If you have a url to the specific page it would probably help.

There can be multiple reasons why it doesn't work:

I don't see where the {LISExxx} in your template is.
You should check the html source of the page if it contains what you expect.

If so, check the browser's dev tool console if there are errors (e.g. javascript errors or 404's)

[FCazabon]

It's currently only on my local machine running wampserver so it's not available for the public to see.

I put the {LISESlider} in my page, not the template. The HTML does look like I expect it to. But there does seem to be an error somewhere, the console shows:

Uncaught SyntaxError: Unexpected end of input

So I guess there is a missing or an extra } somewhere. Thanks! I'll go digging.

[FCazabon]

Thanks for the help, I have got it working. Once I got past the syntax error it was still not working and I was getting an error:

Uncaught TypeError: $(...).responsiveSlides is not a function

It seems to be looking in jQuery for that and not the responsiveslides.js file. Some Googling told me to change it from

Code: Select all

$(function () {

to

Code: Select all

jQuery(function ($) {

and this works.