Displaying latest using snippets

[Ewan]

I want a page to show the 10 latest images submitted and have created on here:

http://www.oaktreephoto.co.uk/latest10.php

However, I'd like it to display the images over 2 rows rather than just 1 so the viewer doesn't need to scroll the page horizontally to see them all. I've tried creating a table fixed to 800 pixels wide to try and force some onto a new line but this didn't work.

Can anyone suggest a way to achieve my goal?

The code I've used to call the snippet is:

<?php
@include("snippets.php?get=latest_photos&amount=10&exhibitio n=all&border=2&hspace=10&vspace=20&bordercolor=666 666&viewas=image");
?>

Thanks,
Ewan

[okapi]

I've tried creating a table fixed to 800 pixels wide to try and force some onto a new line but this didn't work.


hi ewan,
if you really fix the table, it should work. the images could even be forced to be shown vertically!
on my site i have "two rows" of random images, which in fact is only one table with one single row and one table cell.

in the snippets code there is, exept for number, border and vertical and horizontal space, no other formatting element which defines how the images will appear.

[Ewan]

So what have I missed here:

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<?php
@include("snippets.php?get=latest_photos&amount=10&exhibitio n=all&border=2&hspace=10&vspace=2&bordercolor=6666 66&viewas=image");
?>
</td>
</tr>
</table>

I'm stumped :(

[mvrekum]

Make sure there is a "return" or "new line" between the </a> and <a> tag.

So:

<a>.....</a><a>.....</a>

wil display all images after eachother in one row

<a>.....</a> [new line]
<a>.....</a>

will adjust the rows to the width of the table.

Martin

[Ewan]

Sorry if I'm being a bit thick, but where are these tags?

[Ewan]

In the ee_print_thumbs function in snippets.php I added
print " ";
below line 95, just before the while loop closes.

Can't explain it, but it works :)

[okapi]

;)
right now i don't understand a word...
what about these <a> tags??

as far as i see, you haven't defined the width of the cell. maybe you try something like this:

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600">
<?php
@include("snippets.php?get=latest_photos&amount=10&exhibitio n=all&border=2&hspace=10&vspace=2&bordercolor=6666 66&viewas=image");
?>
</td>
</tr>
</table>

[mvrekum]

right now i don't understand a word...
what about these <a> tags??

You should check the html code that snippets.php generates. Each link for an image is put right after the previous one. So the end tag of one link </a> is put right before the start tag <a> of the next link. When you do this your browser will put all links, in this case the images, after eachother, no mather how you define your table.
When you put something inbetween those tags, a return or a space like Ewan did, your browser will break the line. So if an image does not fit within the tables width, it will start on the next line. You do not have to define any height. The height is controlled automaticly by the browser.

Hope you understand, if not, just try it yourself.

Martin

[mvrekum]

BTW Ewan, your idea pointed me to the latest images in the snippets.php code. I was looking for something like this and coded it into my index page. The latest 10 images are now shown below my galleries.

Anyway, I did not have your problem, it worked right away. So I wonder if your snippets.php file is still original, or have you been playing around with it?

Martin

[okapi]

hi martin,

what are you going to do with the html that the snippets code g e n e r a t e s ?
it's always the same php code, regardless whether you call 1 or 10 images. where do you want to place your "returns" or "spaces" in the snippets code?

for a table, a space is content like images or letters, and it behaves like content. linking content does not affect the way it will be displayed.
a "return" or a " " tag does not break content, but a the <br> tag does.

please correct me, if i'm wrong.

on my page i'm calling 12 thumbs. there are 2 rows, as i have defined the table with absolute width:
http://www.a-visual-notebook.at/photolog/photo.php?

michael

[mvrekum]

An example probably says more then 1000 words. Copy this code, past it into a text file and save it as "something.html"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>table test</title>
</head>

<body bgcolor="#ffffff">
Without spaces between the </a> and <a> tags
<table width="500" border="1" cellspacing="2" cellpadding="0">
<tr>
<td>
<a href="http://www.oaktreephoto.co.uk/photo.php?photo=237&exhibition=22&pass=public&lang =eng" style="color:#666666" TITLE="Poppy Head"><img src="http://www.oaktreephoto.co.uk/images/thumb/CRW_0516.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Poppy Head"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=236&exhibition=13&pass=public&lang =eng" style="color:#666666" TITLE="Waves Splashing on Sea Wall"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0426.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Waves Splashing on Sea Wall"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=235&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Gable Ends"><img src="http://www.oaktreephoto.co.uk/images/thumb/gable_ends.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Gable Ends"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=234&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Jedburgh Castle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_36.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Jedburgh Castle"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=233&exhibition=23&pass=public&lang =eng" style="color:#666666" TITLE="Nature's Cup"><img src="http://www.oaktreephoto.co.uk/images/thumb/waterdrops.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Nature's Cup"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=232&exhibition=19&pass=public&lang =eng" style="color:#666666" TITLE="Bubbles"><img src="http://www.oaktreephoto.co.uk/images/thumb/bubbles.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Bubbles"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=231&exhibition=31&pass=public&lang =eng" style="color:#666666" TITLE="Eider Duck (female)"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0405.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (female)"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=230&exhibition=31&pass=public&lang =eng" style="color:#666666" TITLE="Eider Duck (male)"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0396.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (male)"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=229&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Grazing Cattle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_34.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"></a><a href="http://www.oaktreephoto.co.uk/photo.php?photo=228&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Grazing Cattle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_33.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"></a>
</td>
</tr>
</table>
With spaces between the </a> and <a> tags
<table width="500" border="1" cellspacing="2" cellpadding="0">
<tr>
<td> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=237&exhibition=22&pass=public&lang =eng" style="color:#666666" TITLE="Poppy Head"><img src="http://www.oaktreephoto.co.uk/images/thumb/CRW_0516.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Poppy Head"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=236&exhibition=13&pass=public&lang =eng" style="color:#666666" TITLE="Waves Splashing on Sea Wall"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0426.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Waves Splashing on Sea Wall"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=235&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Gable Ends"><img src="http://www.oaktreephoto.co.uk/images/thumb/gable_ends.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Gable Ends"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=234&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Jedburgh Castle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_36.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Jedburgh Castle"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=233&exhibition=23&pass=public&lang =eng" style="color:#666666" TITLE="Nature's Cup"><img src="http://www.oaktreephoto.co.uk/images/thumb/waterdrops.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Nature's Cup"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=232&exhibition=19&pass=public&lang =eng" style="color:#666666" TITLE="Bubbles"><img src="http://www.oaktreephoto.co.uk/images/thumb/bubbles.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Bubbles"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=231&exhibition=31&pass=public&lang =eng" style="color:#666666" TITLE="Eider Duck (female)"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0405.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (female)"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=230&exhibition=31&pass=public&lang =eng" style="color:#666666" TITLE="Eider Duck (male)"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0396.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (male)"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=229&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Grazing Cattle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_34.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"></a> <a href="http://www.oaktreephoto.co.uk/photo.php?photo=228&exhibition=27&pass=public&lang =eng" style="color:#666666" TITLE="Grazing Cattle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_33.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"></a>
</td>
</tr>
</table>
<p></p>
</body>

</html>

I used Ewans code for this.
Open the file in your browser and see for yourself.
The only difference between the two tables is the space between the </a> and <a> tag.

Martin

[mvrekum]

In the ee_print_thumbs function in snippets.php I added
print " ";
below line 95, just before the while loop closes.

Can't explain it, but it works :)

Ewan,
In line 95 of my snippets code I read this:

print "</a> ";

There already is a space behind the tag.
This also answers Okapis question I hope :D

Martin

[Ewan]

There wasn't the space in my snippets.php file. Maybe it's an older version or perhaps I accidentally deleted it at some stage.

Simply adding the space is certainly a neater way of doing it than mine is!

Anyway, thanks for your input.

[okapi]

i see what you mean, martin, it's like writing words without spaces, this can stretch the table.
but this behaviour has nothing to do with <a> tags.
you just need to have spaces between the images (as between words).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>table test</title>
</head>

<body bgcolor="#ffffff">
Without spaces between the images
<table width="500" border="1" cellspacing="2" cellpadding="0">
<tr>
<td>
<img src="http://www.oaktreephoto.co.uk/images/thumb/CRW_0516.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Poppy Head"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0426.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Waves Splashing on Sea Wall"><img src="http://www.oaktreephoto.co.uk/images/thumb/gable_ends.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Gable Ends"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_36.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Jedburgh Castle"><img src="http://www.oaktreephoto.co.uk/images/thumb/waterdrops.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Nature's Cup"><img src="http://www.oaktreephoto.co.uk/images/thumb/bubbles.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Bubbles"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0405.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (female)"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0396.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (male)"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_34.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"><img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_33.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle">
</td>
</tr>
</table>
With spaces between the images
<table width="500" border="1" cellspacing="2" cellpadding="0">
<tr>
<td> <img src="http://www.oaktreephoto.co.uk/images/thumb/CRW_0516.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Poppy Head"> <img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0426.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Waves Splashing on Sea Wall"> <img src="http://www.oaktreephoto.co.uk/images/thumb/gable_ends.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Gable Ends"> <img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_36.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Jedburgh Castle"> <img src="http://www.oaktreephoto.co.uk/images/thumb/waterdrops.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Nature's Cup"> <img src="http://www.oaktreephoto.co.uk/images/thumb/bubbles.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Bubbles"><img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0405.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (female)"> <img src="http://www.oaktreephoto.co.uk/images/thumb/IMG_0396.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Eider Duck (male)"> <img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_34.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle"> <img src="http://www.oaktreephoto.co.uk/images/thumb/Jedburgh_33.jpg" border="2" style="border-color:#666666" hspace="10" vspace="20" alt="Grazing Cattle">
</td>
</tr>
</table>
<p></p>
</body>

</html>

[mvrekum]

i see what you mean, martin, it's like writing words without spaces, this can stretch the table.
but this behaviour has nothing to do with <a> tags.
you just need to have spaces between the images (as between words).

We both mean the same. The browser just needs some place to break up the line of images.
Indeed it has nothing to do with the <a> tags, but Ewan had his images clickable, so the best place for him was to put the space between the </a> and <a> tags (watch the order I put them in).

Martin