0

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

  • In your slider channel, you created an entry to upload your slider images to... does that entry have a status set to open? – jrothafer Jun 10 '15 at 16:35
  • Hrm, well this is the correct code line to set that url as a background-image for those <li> tags (<li style="background-image: url('{slider_image1}{url}{/slider_image1}');"></li>)... Can you post the valid URL that came out? Wink wink, nudge nudge, is dat a relative URI or a full URL? – jrothafer Jun 10 '15 at 18:05
  • ^^ As JChrono is eluding too, i may be somethink funky with your site_url. Also, can you try with this line <div style="width:100%;height:100%; background-image: url('{slider_image1}{url}{/slider_image1}')">&nbsp;</div> This is basically applying the background-image as style to an empty div. if this works you'll need to debug the styling on your <li> elements (have you used the background: short hand CSS rule with !important ergo forcing the ignore of your inline style? also make sure you at least have an &nbsp; in your <li>'s to avoid collapsing stuff. – Blatant Jun 10 '15 at 18:09
  • A new tact, do you have a development web address we can see? if so we can look at the result and maybe help inspect and CSS issue. If at all possible you could let JChrono or myslef log in and we can have a go at fixing it for you. Only we're in danger of makingtoo many edits and comments here! – Blatant Jun 10 '15 at 18:11
  • Blatant, lol, I am seeing this going on: background-image: url('<p><img alt="" src="financialadvisorycorp.com/uploads/home/slide1.jpg" title="Partnering to Focus on Your Financial Best Interests" /></p>'), lol did 2.6.1 have a weird bug outputting file urls with a formatting? – jrothafer Jun 10 '15 at 18:26
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>
| improve this answer | |
  • argh!! Tag Pair, Face Palm, upvoting this. @JChrono what ya doing following me around correcting my answers, stealing my points?!?! LOLOL I kid, good spot man. – Blatant Jun 10 '15 at 17:12
  • Thank you very much for trying to help. Unfortunately that does not work either :( – Samantha Jun 10 '15 at 17:14
  • see my Edit 2, that should have worked... – Blatant Jun 10 '15 at 17:16
  • Yeah I dumbed and didn't add single quotes, the w3c spec says they are required if your url has certain special characters. w3.org/TR/CSS21/syndata.html#uri – jrothafer Jun 10 '15 at 17:18
  • I just blanket add them as best practice, I think (memory fail) I've seen older IE's in standards mode fail the rule if it isn;;t quoted too. could be wrong though... – Blatant Jun 10 '15 at 17:24
0

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.

| improve this answer | |
  • You are correct I had written my channel name incorrectly. It should read {exp:channel:entries channel="slider_test"} not {exp:channel:entries channel="{slider_test}"} I only have the one entry to pull in from the slider_test channel. And yes, I have made the entries in the channel slider_test for the images. <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> – Samantha Jun 10 '15 at 16:14
  • I still cannot get the channel fields, {slider_image1}, {slider_image2}, {slider_image3}, {slider_image4} to display as background images – Samantha Jun 10 '15 at 16:19
  • Hi Sam, your code won't work in a comment (you can edit the OP if you wish). if this got you working please mark as the answer, otherwise I would recommend adding the dynamic and entry_id or limit attributes just to ensure that a mistaken entry does not get used and you end up with multiple uls! If its still not working, please do post your new code (and whats getting output) in your OP (ps. code blocks can be done by indenting with 4 spaces) :) – Blatant Jun 10 '15 at 16:20
  • also, instead of pushing the slider_imageX values into a style tag, to start with can you output these in the li's so we can see whats coming out?? You may have issues with the file upload path, the site_index setting, the site URL setting or the file manager, posting the output you're getting might help narrow it down :) Also {slider_imageX} will just output the file path (according to settings) so your code should work (hence asking for output) but I always put single quotes in a url rule for safteys sake background-image: url('{silder_imageX}'); – Blatant Jun 10 '15 at 16:22
  • Thank you for your help and patience I am new to stackexchange. I've never used it before. – Samantha Jun 10 '15 at 16:27
0

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.

| improve this answer | |
  • Glad you got it sorted Sam, This is why I asked what type of field these slider_imageX fields where, as all the above solutions assumed you where usingthe file field! Makes sense as in a WYSIWYG your storing the HTML of your editor so with just an image the wysiwyg content will always be <img src="..." alt="..." /> you would literally have to parse the HTML and extract the image path! Not the right way to go, file field will give you just the file, not the HTML. Anyway, happy days! – Blatant Jun 15 '15 at 8:48

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.