array with all images ids

pexman · 2016-03-05 19:49:21

My beautiful saturday is gone but I get no solution.
I have build a css-slider with changing background-images. This image-adresses are referenced in stylesheets. Now I want change this adresses. I have put this part of css into the slidertemplate and try to script with php and txp an array so that this functionally code can work.
It puts one random item of the array $fotos and write it in the url of the background-image stylesheet.

<txp:php>
$fotos=array("bild1.jpg","bild2.jpg",
"bild3.jpg");
mt_srand ((double)microtime()*1000000);
$zahl = mt_rand(0,(count($fotos) - 1));

echo '.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/'.$fotos[$zahl].'.jpg);
}';

</txp:php>

the rendered page cods for example:
…

.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/bild1.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/bild3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

…

How I can put the image-ids, or image-names in this f*cking array????

Moderator’s annotation:
Added Textile markup for better readability.
– Uli –

Last edited by uli (2016-03-05 21:34:09)

uli · 2016-03-05 21:42:28

Hi pexman, and welcome to the Textpattern forums!

You can use TXP tags here, probably txp:images (or one of the article tags) to do all this.

In my example code I’m using the images tag, assuming your images are uploaded via TXP:

<txp:rvm_counter name="nth-child" reset="1"  offset="0" />

<txp:images id="226,227,228,229" sort="rand()">
.cb-slideshow li:nth-child(<txp:rvm_counter name="nth-child" />) span { 
    background-image: url(<txp:image_url />);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}  
</txp:images>

Put this code onto your page template where you want your slider styles to appear. If you want all images use auto_detect="" instead of id="226,227,228,229" in the images tag or, for restrictions, e.g. category="YOUR_IMAGE_CATEGORY", for other options have a look at the images page or ask here.

Edit: Ah, I missed one thing: the counter for changing the nth-child-#. For that you install the rvm_counter plugin and replace its code (on the plugins’ panel) with this one. (Mind the superfluous c.. at the beginning, delete it.) I’ve corrected the code above to contain the necessary counter tags. Actually, it should do its magic, it’s copied from a working example.

Last edited by uli (2016-03-05 22:00:22)

pexman · 2016-03-06 10:52:50

Textpattern is what I`m always were looking for, thank you. It works fine. My code is:

<txp:rvm_counter name="nth-child" reset="0"  offset="0" />
<txp:rvm_counter name="seconds" reset="0" offset="6" />

<txp:images category="my_category" break="" sort="rand()">
.cb-slideshow li:nth-child(<txp:rvm_counter name="nth-child" />) span { 
    background-image: url(<txp:image_url />);
    -webkit-animation-delay: <txp:rvm_counter name="seconds" />s;
    -moz-animation-delay: <txp:rvm_counter name="seconds" />s;
    -o-animation-delay: <txp:rvm_counter name="seconds" />s;
    -ms-animation-delay: <txp:rvm_counter name="seconds" />s;
    animation-delay: <txp:rvm_counter name="seconds" />s; 
}  
</txp:images>

But, always this “but”

I get out:


<style>0
6


.cb-slideshow li:nth-child(1) span { 
    background-image: url(http://arteurope.frank-olsowski.de/images/127.jpg);
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 4s;
    animation-delay: 5s; 
}  

.cb-slideshow li:nth-child(2) span { 
    background-image: url(http://arteurope.frank-olsowski.de/images/135.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 9s;
    animation-delay: 10s; 
}

…. so much pictures you have in this category.

I can try with <txp:variable/>because it has go with 6second-steps each picture, like:

.cb-slideshow li:nth-child(1) span { 
    background-image: url(http://arteurope.frank-olsowski.de/images/127.jpg);
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s; 
}  

.cb-slideshow li:nth-child(2) span { 
    background-image: url(http://arteurope.frank-olsowski.de/images/135.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

But not this sunday, and it works in this kind realy fine. Thank you.

EDIT: added bc.. for code display

pexman · 2016-03-06 11:32:33

Sorry for the style, I will learn the textile.

Last edited by pexman (2016-03-06 11:34:39)

jakob · 2016-03-06 14:06:48

How about using step="6" instead of the offset attribute?:

<txp:rvm_counter name="nth-child" reset="0" />
<txp:rvm_counter name="seconds" reset="0" />

<txp:images category="my_category" break="" sort="rand()">
.cb-slideshow li:nth-child(<txp:rvm_counter name="nth-child" />) span { 
    background-image: url(<txp:image_url />);
    -webkit-animation-delay: <txp:rvm_counter name="seconds" step="6" offset="-6" />s;
    -moz-animation-delay: <txp:rvm_counter name="seconds" step="0" />s;
    -o-animation-delay: <txp:rvm_counter name="seconds" step="0" />s;
    -ms-animation-delay: <txp:rvm_counter name="seconds" step="0" />s;
    animation-delay: <txp:rvm_counter name="seconds" step="0" />s; 
}  
</txp:images>

According the plugin help using step="0" shows the current counter value without advancing the counter. Also, if you want to start with 0s, I think you’ll need to add offset="-6" because in the first time iteration of the loop, the counter should advance to 6.

If that won’t work, try only advancing the counter once in a variable and then use that in each loop:

<txp:variable name="nth_child"><txp:rvm_counter name="nth-child" reset="0" /></txp:variable>
<txp:variable name="second_count"><txp:rvm_counter name="seconds" reset="0" /></txp:variable>

<txp:images category="my_category" break="" sort="rand()">
<txp:variable name="second_count"><txp:rvm_counter name="seconds" step="6" offset="-6" /></txp:variable>
.cb-slideshow li:nth-child(<txp:rvm_counter name="nth-child" />) span { 
    background-image: url(<txp:image_url />);
    -webkit-animation-delay: <txp:variable name="second_count" />s;
    -moz-animation-delay: <txp:variable name="second_count" />s;
    -o-animation-delay: <txp:variable name="second_count" />s;
    -ms-animation-delay: <txp:variable name="second_count" />s;
    animation-delay: <txp:variable name="second_count" />s; 
}  
</txp:images>

If you don’t want the initial counter to display, you can put it in a variable. Even if you don’t use that variable (like in the nth_child variable, the counter should still advance. Alternatively, you could output that into an html commment ahead of your style tag.

uli · 2016-03-06 14:22:37

jakob wrote #298168:

If you don’t want the initial counter to display, you can put it in a variable.

Yup, after some years now, I’ve not recognised that as a part of the necessary code.

pexman · 2016-03-07 15:47:05

Perfect, scripting with <txp:variable> is the exact solution, thank to all.

Textpattern CMS

Textpattern CMS support forum

#1 2016-03-05 19:49:21

array with all images ids

#2 2016-03-05 21:42:28

Re: array with all images ids

#3 2016-03-06 10:52:50

Re: array with all images ids

#4 2016-03-06 11:32:33

Re: array with all images ids

#5 2016-03-06 14:06:48

Re: array with all images ids

#6 2016-03-06 14:22:37

Re: array with all images ids

jakob wrote #298168:

#7 2016-03-07 15:47:05

Re: array with all images ids

Board footer