Trying to use the bxSlider by setting the <li> as fields as background images in expressionengine

Question

I am using the bxSlider in full screen (filling entire browser window) mode. To have the images become full screen I set the images in the list as background-image: url images. I created this in html and it worked out fine. The images reach full width. Here is an example of what my HTML looks like:

<ul class="bxslider">
  <li style="background-image: url('slide1.jpg');"></li>
  <li style="background-image: url('slide2.jpg');"></li>
  <li style="background-image: url('slide3.jpg');"></li>
  <li style="background-image: url('slide4.jpg');"></li>
</ul>

Now, I want to incorporate it into expressionengine by allowing the admin to upload the slider images in the backend in the corresponding channel entry. I have created the channel fields labeled "slider_image1", "slider_image2", "slider_image3", "slider_image4" in the channel named, "slider_test." I am using expresionengine v2.6.1

I have been struggling for the correct markup and have tried the following which has not worked:

<ul class="bxslider">
  {exp:channel:entries channel="{slider_test}"}
    <li style="background-image: url({slider_image1});"></li>
    <li style="background-image: url({slider_image2});"></li>
    <li style="background-image: url({slider_image3});"></li>
  {/exp:channel:entries} 
</ul>

Any help would be appreciated. I also would like to include an if statement so that if the user only uploads two images the third one won't display.

I also would like to see if its also possible to incorporate the title="" element which the bxSlider uses as the captions. I know that the title element is meant for the html element so would love some ideas as to how this can be done.

I have changed the code to

<ul class="bxslider">
  {exp:channel:entries channel="slider_test" dynamic="no"}
    <li style="background-image: url({slider_image1});"></li>
    <li style="background-image: url({slider_image2});"></li>
    <li style="background-image: url({slider_image3});"></li>
  {/exp:channel:entries} 
</ul>

this still isn't working

My title for my channel entry is, "slider images" I have changed it to

<ul class="bxslider">
  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    {slider images}
    <li style="background-image: url({slider_image1});"></li>
    <li style="background-image: url({slider_image2});"></li>
    <li style="background-image: url({slider_image3});"></li>
  {/exp:channel:entries} 
</ul>

Still isn't working. Thank you again for your patience. The status of the entry is open, The URL title for the channel entry is "slider-images"

It works this way but this isn't what I want because I am trying to set the images as backgrounds:

<ul class="bxslider">
  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    {slider images}
    <li>{slider_image1}</li>
    <li>{slider_image2}</li>
    <li>{slider_image3}</li>
  {/exp:channel:entries} 
</ul>

This just sets the images inside the li. How do I set the li as background images while still allowing the user to choose what image to upload?

Can anyone help me figure this out?

As suggest for debugging I used:

  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    <pre>{slider_image1}{url}{/slider_image1}</pre>
  {/exp:channel:entries} 

I am getting a valid URL for the file in the PRE tag by removing setting the image as background. But I want them set as background.

Again, thank you all so much for helping me out with this. I really do appreciate it. As I'm sure you can tell by now I am still fairly new with expressionengine.

So, I have removed the ul li all together and tried using a div and setting the background image as suggested with the following markup:

  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    {slider images}
    <div style="width:100%;height:100%; background-image: url('{slider_image1}{url}{/slider_image1}')">
  {/exp:channel:entries} 

The output is rather strange. The image does not appear as a background image rather in the css says this: background-image: url( '< p > < img alt= ;

This url:

http://www.financialadvisorycorp.com/slider_full_width

contains this code:

  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    <div style="width:100%;height:100%; background-image: url('{slider_image1}{url}{/slider_image1}')">
  {/exp:channel:entries} 

And This url:

http://www.financialadvisorycorp.com/slider_full_width_image

contains this code:

  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    <pre>{slider_image1}{url}{/slider_image1}</pre>
  {/exp:channel:entries} 

I would love to figure out how to set the slider images as backgrounds

Answer 1

Will this work for you? You don't need to put the {slider images} tag, it doesn't do anything.

<ul class="bxslider">
    {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
        <li style="background-image: url('{slider_image1}{url}{/slider_image1}');"></li>
        <li style="background-image: url('{slider_image2}{url}{/slider_image2}');"></li>
        {if slider_image3}
        <li style="background-image: url('{slider_image3}{url}{/slider_image3}');"></li>
        {/if}
    {/exp:channel:entries} 
</ul>

Answer 2

and welcome!

The issue looks to be within your channel entries tag.

Can I ask what channel did you post your entry in?

Also, how many entries are you trying to pull in?

your code {exp:channel:entries channel="{slider_test}"} seems incorrect, hence why I ask your channel name, assuming your channel is called 'Banners' [banners] your channel entries tag will look like this

{exp:channel:entries channel="banners" dynamic="no"}

Adding dynamic="no" tells EE not to try and work out what you want from the URL. Of course the above will iterate each and every entry in the channel. You mention you've crated the channel fields but have you made an entry in your channel yet? Do this. From here you will be able to assertain the entry_id of your first entry, for example I'm gonna say "5". In order to bring the image URL's in you will need to specify the entry ID you want (or you'll get a <ul> for every entry!) like so :

{exp:channel:entries channel="banners" dynamic="no" entry_id="5"}

This will load one entry in the channel, and will product your <ul> properly. Remember Channels are containers for many entries. each entry in a specific channel will have the field you describe.

Doing it this way, if you wanted to create a different banner/slider set, you can just publish a new entry to the channel, and update entry_id in your Channel Entries loop.

Edit 1 Following comments...

Please try this :

<ul class="bxslider">
  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    {title}
    <li style="background-image: url('{slider_image1}');"></li>
    <li style="background-image: url('{slider_image2}');"></li>
    <li style="background-image: url('{slider_image3}');"></li>
  {/exp:channel:entries} 
</ul>

We're adding the {title} to check it is finding and displaying your entry (check the status of the entry as Closed would cause it not to show!) if this works correctly, then we'll look into your fields...

Edit 2

Try this for debugging :

{exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    <pre>{slider_image1}{url}{/slider_image1}</pre>
{/exp:channel:entries} 

This will show us if the problem is in your entry/file manager, as it takes the ul, li and bxslider out the equasion! If you're not getting a valid URL for the ffile in the PRE tags we need to review (a) your entry and (b) your File Upload Settings. Here's a list of questions for ya :

1. (relivent to a.the entry) When you Edit the entry, are the files thumbnails appearing correctly (in the CP)?
2. (relivent to b.file upoad settings) In File Manager, can you see and view the images you uplaoded?
3. For the file field you've put in your channel fields, what is the file upload directory?
4. In Content . File Upload Preferences, for the destination you answered in step 3, what is the 'Server Path to Upload Directory' setting and waht is the 'URL of Upload Directory' setting
5. What TYPE of field is {slider_image1}, {slider_image2} and {slider_image3}, a File field right?

Edit 3 Some more progress

Ok, so we've solved the channel issue, and we've determined the right path is coming out of the tags, but it's not going in as a background image, therefor can you try this code :

<ul class="">
  {exp:channel:entries channel="slider_test" dynamic="no" limit="1"}
    <li style="background-image: url('{slider_image1}{url}{/slider_image1}');"></li>
    <li style="background-image: url('{slider_image2}{url}{/slider_image2}');"></li>
    <li style="background-image: url('{slider_image3}{url}{/slider_image3}');"></li>
  {/exp:channel:entries} 
</ul>

And most importantly please post the resultant HTML, as a copy from source please. Note I've taken bxslider class out to see if its the bxslider loader JS wiping the images.

Answer 3

So the problem ended up being that I was using Wygwam in my channel field for {slider_image1}. Wygwam aslo has a file upload area where the user can upload the file. However the code only seems to be accepted with the channel field being set to type: file even though the image uploaded via Wygwam does normally show up as an image source and is another way to upload the file.

By using:

{exp:channel:entries channel="slider_test" dynamic="no" limit="1"}

< div style="width:100%;height:100%; background-image: url('{slider_image1}')">

{/exp:channel:entries}

The image does display as a background image only when the channel field is set to file. Thank you again for all of those who helped.