Passing and receiving query strings

[giraffoto]

I'm very new to HTML, and I'm using it to put together a website to show off my photographs. What I currently have is a page with thumbnails which, when clicked, just scrolls sown the page to the relevant large picture: I'd like a more elegant solution, and I hope someone can provide it . . .

There will be a single HTML document called pictureframe.html. When a link on the thumbnail page is clicked, I want it to go to pictureframe.html instead of just scrolling down the page, so instead of

<a href="#G">
<img src="picture_08_07_thumbs.JPG"
width="300" height="200" border="5" />
</a>

it will read

<a href="pictureframe.html?image=08_07">
<img src="picture_08_07_thumbs.JPG"
width="300" height="200" border="5" />
</a>

All very easy, I just need to edit the thumbnail page to do this. What I really need to know is, how do I get the value in the query string out of the URL in pictureframe.html, and how do I then insert it into the <img> line? The logic I want is

1. Retrieve the value after "image=" in the query string
2. Concatenate it into a file name - so
- variable xyz holds the value from the query string
- the file name becomes "image" + xyz + '.JPG'
3. use the new file name variable in the <img> line, so if the variable is called "filename", the line says something like
<img src=filename>

In summary,
How do I retrieve that single value into a variable, and
How do I use that variable?

All help and suggestions will be gratefully received!

[lucy24]

Short and bitter: you can't. That is: you can, but not using html alone. You're looking at php, or javascript, or asp, or any of several other methods. Pick your poison. But html by itself doesn't "do" query strings. The nearest you can get is opening a new window with <target = "_blank"> to hold just the larger image-- which you have to name explicitly. Not awfully elegant, but will work in any and all browsers.

[giraffoto]

Thanks for that - I had a vague suspicion it would be impossible using HTML alone. Can you give me an example of doing it using one of the scripting languages such as Java?

[g1smd]

You don't need Java, or Javascript (they are two VERY different things) for this.

You need PHP - and there are tens of thousands of PHP Gallery scripts out there on the web to experiment with.

[giraffoto]

Thank you lucy24 and g1smd, PHP looks like the way to go! There's just one piece of the puzzle missing now (at least, I hope it's only one piece - I'm new to this) . . .

I can have the first page pass a reference in the query string, using the <a></a> tags in html:

<a href="pictureframe.html?image=08_07">Click here</a>

. . .and I can get this passed reference in the second page, pictureframe.html, using PHP:

<?php
if (isset($GET["image"])
{$qsvar = $GET["image"];
$imagename = "image_{$qsvar}.JPG";}
?>

which will, I hope, make the value of $imagename

image_08_07.JPG

(if I'm wrong so far, please let me know)

The missing piece is using the variable $imagename: I want pictureframe.html to load straight away with the referenced image displayed right in the middle. So, instead of saying

<div align="center">
<img src="image_08_07.JPG" border="2" />
</div>

I'd like it to say something like

<div align="center">
<img src=$imagename border="2" />
</div>

So my final question to make it work, apart from, "is that right so far?" is what do I put between 'src=' and 'border=2' to use the variable that I've created in the PHP part?

[g1smd]

<img src="<?php print $imagename; ?>" border="2" />

Make sure that all of the logic that sorts out the image name (and checks that the file exists) is placed BEFORE the point where the script sends the HTML DOCTYPE.

You will want to send a 404 HTTP header if there is no image to serve on the current page. It is too late to send such a header after any part of the HTML page has been sent.

[giraffoto]

Thank you for your help and for your patience with an HTML/PHP newbie - I'll give this a try.

[giraffoto]

Very disappointingly, it didn't work: and when I tried a cut-and-paste Hello World in PHP, that didn't work either. Is there some setup that needs to be done for PHP to work?

On a happier note, I've managed to get Javascript working with variables, and (since this is only one page) wondered if it would be possible to do something similar with Javascript - is there an equivalent to

<img src="<?php print $imagename; ?>" border="2" />

using Javascript? Alternatively, I can already get it to output a text variable on the page using

document.write(imagename);

Is there some sort of "document.show a picture" function available in Javascript?

[g1smd]

The problem is that Javascript runs in the browser and PHP runs inside the server. You need it running in the server.

Did your PHP filename end with .php or not?

[lucy24]

The problem is that Javascript runs in the browser and PHP runs inside the server. You need it running in the server.

Why? (That was a request for information, not an expression of belligerence.)

It's definitely possible to do it with javascript. I have something analogous, using js because I don't speak a word of php but can manage javascript with the aid of a dictionary.

Mine-- which is obviously not cut&paste!-- currently looks like this.

function popupWindow(source,wintitle,pictitle,width,height)
 {
 if (!pictitle)
 { pictitle = wintitle }
 newWindow = window.open("", wintitle, "width=" + width + ", height=" + height +",left=100,top=50,scrollbars=yes");
 newWindow.document.write("<title>" + pictitle + "</title>\n");
 newWindow.document.write("<img src = '" + source + "'>");
 newWindow.document.close();
 newWindow.focus();
 picInfo[artnum][picnum][1] = newWindow;
 }

with of course a preliminary function that loads up the variables. (The array is global, as javascript interprets "global".) The document.close line is necessitated by a quirk in Camino. It has no effect on any other browser. I started out with an even more simplistic version but that form didn't allow for window titles.

[g1smd]

You need the links "on the page" in HTML so that search engines can follow them.

Constructing links "in the browser" from javascript code will block most searchengines, and the site will fail in some broswers too.

[lucy24]

Well, in my case I don't want search engines to follow them-- in fact they're blocked from the whole directory containing the page ;) So far only in robots.txt, but I should probably add a rewrite along the lines of "if you've got 'spider' in your name, get lost".

I rarely use <noscript>, but this time it contains a link to another page explaining how you can look at the enlargements if you don't have javascript.

Giraffoto, I don't know who your target audience is. For the one I'm talking about here, it's aimed at people who know the organization and/or its members in real life. That can make a big difference, so think about who will be looking at your pictures.

Tangentially: Hasn't it been established in assorted other threads that g### can and does read javascript? A quick detour to Search confirms that, where there is a difference, google displays the <noscript> version of text. Or possibly the version for people who have font A but not font B-- it's the same text-- but I kinda doubt this, for several reasons.