Welcome to the Geeks & God Static Archive. Read more »

Can't Make "swapping images" work

Joined: 11/28/2008

Hi,

I am new to this forum, and fairly new to being a webmaster. My main site is www.maranathaglobal.com (I also invite critiques, of course!). The site has been active for a few years, but until recently I was merely writing content and making layout suggestions, and someone else was doing the technical stuff for me. But now I am doing the technical stuff myself, sort of learning as I go. (My friend became too busy with other important things in his life, so I am working on it alone).

One thing I really wish I could have is SWAPPING IMAGES on reload - like the sites where the main graphic on the home page is different each time I log in or hit "refresh". Mouse-over swaps are nice, too, but I am mostly interested in swapping when people return to the website for a new session. The sites I've seen do this rotate between a few images - usually less than ten - and this is what I want to do as well.

(For example, I like how the Yale Law School site changes the images along the bottom on each re-load).

I am using Dreamweaver software (clumsily), and I tried to follow its instructions, but I just cannot get it to work. My problems start when it tells me to "insert" repeated images that I want to swap - I just end up with all of them appearing in a row or sequence in the page, not stcked on top of each other like I think they should be.

I understand the need for having the images be te same dimensions, etc. I just can't figure out how to set up the multiple images so they actually change. Please explain it without lots of abbreviations of jargon - I am not that familiar with web design terminology, sorry.

By the way, if there is a way to do this within MS WORD, which is my main workplace for my webpages (I try to make only minimal corrections inside Dreamweaver), I'd prefer to do it that way.

Thanks! Pardon my ignorance about all this!

I am also open to being convinced that swapping images is somehow undesirable in the first place. I should add a postscript that my site is used a LOT by pastors in third-world countries, who are accessing it from bamboo Internet cafe's with very slow connections (and per-minute charges). I suspect no more than half the people using my site have computers in their homes or workplaces.

Joined: 11/28/2008
Hello, Dru! Welcome to CWM,

Hello, Dru! Welcome to CWM, first of all /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Well, what you're trying to do isn't too difficult to do being "hand held" through it -- we should be able to walk you through it pretty easily, but it'll require a little bit of wading through code and not looking at MS Word or the Dreamweaver "layout" view. We'll actually need to work with some of the source code. Don't let that scare you off -- it's just a bunch of characters... mostly randomly placed (well, at least mine are! haha!)

As for image swapping being useless: you seem to have a fairly good idea as to why it would be discouraged. If you think that the people using your site would like the images to be swapped, then go for it. You know your own users better than we do! When I was in the jungle using a very slow / pay-per-meg connection, I turned off all images. Probably most of your viewers won't know how to do that (or won't even have the option!). I would, therefore, recommend making a "lo-fi" version of your site. A plain-text, very simple version of your site that excludes all needless graphics and keeps a very simple structure. That's my recommendation.

For the image swapping...

You've posted this in the PHP section of CWM, so I'm assuming you know you have PHP available on your server to use. That's a great first step!

Next, we need to know where you're storing your images. Gather a list of the links to your images that you're going to want to have swapped out. For the sake of this example, I'll use "domain.com" as the dummy domain.

Let's say you have 5 images at these links:
http://www.domain.com/images/header1.jpg
http://www.domain.com/images/cool_pic.jpg
http://www.domain.com/images/some_image.jpg
http://www.domain.com/images/wow.jpg
http://www.domain.com/images/header2.jpg

(this can very easily be expanded for however many images you have)

Okay, here's the code, after the code, I'll tell you a little more on how to place it on your site to get it to work.

CODE
<?php

$image = array();
$image[] = 'http://www.domain.com/images/header1.jpg';
$image[] = 'http://www.domain.com/images/cool_pic.jpg';
$image[] = 'http://www.domain.com/images/some_image.jpg';
$image[] = 'http://www.domain.com/images/wow.jpg';
$image[] = 'http://www.domain.com/images/header2.jpg';

$image_source = $image[array_rand($image)];

echo '<img src='.$image_source.' alt="this is my cool image" heigh="XX" width="XX" />';

?>

You can modify the last line as you need. And obviously the sources for your images! (as I said, you can add more or detract as you need -- it won't effect the opperation of this code).

Okay, so, take all that code and save it in a file called random_image.php. I would recommend copy/pasting it into Notepad (or TextEdit on a Mac) and be sure that you don't accidentally save it with a .txt extention. Then upload it to your server using your FTP software (I think Dreamweaver has some FTP software built in).

So far so good, right? Nothing too complicated /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Now to actually get it to work in your site. Wherever you need a "random image" to show up, put this code:

CODE
<?php
  require_once('/random_image.php');
?>

Now comes the possibly tricky part... Your files will have to be .php files in order for the PHP code inside of them to be read by the server correctly. If you're including this random image in a lot of pages, it might be a lot of work because you're going to need to update all the links to those pages. For example, if you have three pages: index.html about.html and contact.html all of which you want to have random images, you'll need to rename them all to index.php about.php and contact.php AND then you'll have to modify all the links to those pages -- so if at the bottom of each page you have links, they'll need to be updated on every page. That can be a major pain. If this is the case on your site, let me know and we can work on a simple solution that can help. There is a way of telling the server to read .html pages as though they were .php pages -- but if you're only talking about doing this on one page that doesn't have any links to it, then simply renaming it to have a .php extention is the easiest way to go.

Disclaimer: above code has not been checked or tested in any way. Typos are my life. Sorry. If you get it uploaded and it's not working, post the link and I'll check it as quickly as I can!

God bless,
- Luke

--
iLuke