Updating picture on several pages

[raydona]

Hi,
I don't know if this is the right place to post this question but I think javascript might offer a solution. I have a 125 X 156 jpeg image with some text underneath in the right column of my home page and the same image and text in the right column of 47 other pages. When I alter the image and text in my home page I don't want to do the same 47 other times. How can I alter the image and text once and the alteration is reflected in all pages. Will be grateful for all help.

[astupidname]

Are your pages .html or .php? If .php you could just do an include in that part of the page, such as:

<?php
if (!defined('ROOT')) {
define('ROOT', preg_replace('/\/$/', '', $_SERVER['DOCUMENT_ROOT'])); //the root of the site
}
include(ROOT.'/file_with_img_and_text.php'); //<--could be a .html or .txt file as well
?>

If you're not already using php, you could setup your server to parse .html as php and then do the above.
Lastly, yes javascript can definitely offer a solution and I'm very good with javascript, but won't at this time give you a javascript answer as it's the wrong way to go in this case. If just using straight .html you might consider making the container of the image and text into an iframe. Of course you'll have to manually put the iframe in all pages one time, but after that any changes you make to the one page linked to by all the iframes will show up in all pages then.

[Fotiman]

it's the wrong way to go in this case

I agree. A JavaScript solution would not be the correct way to do this. Not all users (and search engines) have JavaScript enabled. A server side solution is the way to go (either PHP, ASP, server side includes, etc., depending on your server technology).

[topr8]

or without using a server side technology ... on only 48 pages it would be easy enough to use the search and replace function of whatever editor you are using to make your website with.

[raydona]

Hi,
Thanks for all the replies. Taking up the points made by "astupidname" I couldn't setup my server to parse .html as php. I contacted my service provider, they sent me a line of code to put in the .htaccess file. Did as they suggested but it didn't work, wrote back to them, they sent the same line of code, and it went around in circles. Incidentally, would it be possible to explain the meaning of the line of code:
define('ROOT', preg_replace('/\/$/', '', $_SERVER['DOCUMENT_ROOT']));
I especially want to know what '/\/$/' means and what is being replaced from where.
As for iframe they're really hard to configure, you specify no scroll bars, yet that's what appears on the iframe. Besides they don't look good on the page. Therefore, it looks javascript might be my only solution. I am using javascript already, to show current date and time, bookmark the page, etc. So using javascript wouldn't be a problem. As for "search and replace function" it's alright for 47 pages. What if the number of pages continues to grow? Don't fancy having to do it on a regular basis.
I wonder if "astupidname" might feel it is a good time to give a javascript solution to my problem. Would be very grateful.

[rocknbil]

Some servers define the environment variable "DOCUMENT_ROOT" with a trailing slash. It's often done using php's rtrim. Doesn't matter though, PHP doesn't work for you.

Even if it did, PHP is a rich server side programming language, overkill for something as simple as an include. I'd use SSI instead.

Add this to your .htaccess at root:

AddHandler server-parsed .html

Test it like so. Create a file "test.txt"

hello world

In any html file, add
You should see hello world below:<br>
<!--#include virtual="/test.txt" -->

Upload both to your server, request the html file. If it works and you indeed see "hello world" below the first line, you have enabled SSI's for .html files.

note: if you're using .htm, not .html, use that extension in the AddHandler directive.

So from there you just do this in your files. Create your include - "rotating-img.txt"

<div id="rotating image">
<p><img src="/images/myimage.jpg?cachebust=1234" alt="My Image"></p>
<p id="caption">This is my caption</p>
</div>

Style it appropriately in your CSS.

In your 47 files, and any forward, add

<!--#include virtual="/includes/rotating-img.txt" -->

Assuming you've put it in the /includes directory.

Now you only have to modify the single file, rotating-image.txt, to update all pages.

A note about this bit,

myimage.jpg?cachebust=1234

An image is a static resource, the browser will throw away the query string and it won't affect it's display - but when the image changes, it may not "recognize" it's a new image if you use the same file name. So when you modify the image, you change the parameter,

myimage.jpg?cachebust=5678

... and the browser is forced to download a fresh copy of the image. Hence, "cachebuster."