A quick trick to display a random image

calguy1000 · **Posted:** Fri Oct 05, 2007 5:12 pm

Given images named header_1.jpg, header_2.jpg, ... header_10.jpg this code will pick a random one
on every page load.

Code:

{capture assign='num'}{1|rand:10}{/capture}{* generate a random number between 1 and 10, assign it to 'num *}
<img src="uploads/header_{$num}.jpg" width='468' height='50'/>

KO · **Posted:** Sat Oct 06, 2007 6:37 am

I love these tips! And javascript alternatives like this.

Thanks,

K

Pierre M. · **Posted:** Sat Oct 06, 2007 12:20 pm

KO wrote:

I love these tips! And javascript alternatives like this.

The power of this tip is its server side non javascript nature. And shortness.
Pierre M.

KO · **Posted:** Sat Oct 06, 2007 4:31 pm

Yeah... that's the cool thing with it. It's just so easy for everyone copy javascript code from somewhere and stick it in wishing people don't have noscript enabled. It's amazing to see what kind of crap high profile companies and their web pages put out without javascript.

streever · **Posted:** Thu Oct 11, 2007 8:23 pm

Hi all,

I think the poster KO was saying, thanks for an alternative to using javascript

! You two are in agreement, maybe it is language barrier?

Pierre M. · **Posted:** Fri Oct 12, 2007 2:31 pm

Yes, my mistake. You are right : rereading KO, I understand now he means "an alternative to using javascript" as you say. Thank you for the language clarification.

Pierre

KO · **Posted:** Sat Oct 13, 2007 6:33 pm

No worries. No one's been offended. English is not my mother language and I write total garbage most of the time anyway.

Still nice solution and thanks to Calguy!

RonnyK · **Posted:** Tue Jan 15, 2008 6:42 pm

Based on this tip from Calguy1000, the variant to create the random background for the header-container....

This should be put in the template.

Replace the:

Code:

With:

Code:

{capture assign='num'}{1|rand:10}{/capture}
<div id="header" style="background-image: url(uploads/header_{$num}.jpg)">

And dont forget to remove the background image for the header, in the stylesheet, as it already is called here.

Ronny

cnymike · **Posted:** Wed Jan 16, 2008 2:52 am

OK, I'm a little dense, so I think I need a bit more information...

what is this 'capture'... php?

hexdj · **Posted:** Wed Jan 16, 2008 3:08 am

I haven't tried but I believe you just stick that {capture... } smarty tag in your page template and it should work.

cnymike · **Posted:** Wed Jan 16, 2008 3:36 am

Yes, it works...but why? What is it?

hexdj · **Posted:** Wed Jan 16, 2008 3:41 am

it displays the images (which you need to have somewhere in advance)

cnymike · **Posted:** Wed Jan 16, 2008 4:02 am

Guys, I know what it's supposed to do and I know that I just need to put the code in the template. What I want to know is what is 'capture'... is it a php function, or what?

calguy1000 · **Posted:** Wed Jan 16, 2008 4:24 am

see: http://smarty.php.net/manual/en

Required reading for CMS users.

cnymike · **Posted:** Wed Jan 16, 2008 3:59 pm

Thank you.

A quick trick to display a random image

Who is online