PHP: Updating image on page

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

Cryo
Posts: 2
Joined: Tue Apr 29, 2008 8:52 pm UTC

PHP: Updating image on page

Postby Cryo » Tue Apr 29, 2008 9:00 pm UTC

Hey, first post but i have a problem that im hoping you can all help with.

Im currently building a website, using dreamweaver and with PHP, CSS.
The site will have to contain a large amount of images, and im curious about how exactly to update them on a page.

Basically i want an image container on a page, that updates when ever the NEXT, PRVIOUS buttons are pressed. Origionally what i had done was to have each image on a seperate page then simply link the next to whatever page was next on the server containing the image. However if i suddenly had 100+ pages and needed to update the pages i would have to do each one individually.

So, i need your help/opinions on other ways to achieve the same effect.
What i was thinking was a MySQL database where the NEXT, PREVIOUS buttons simply updated the image container with the appropriate imge from the database. Is this the best idea? Is there anything slightly more simple i could do to get the same result?

I appreciate any help as its the only thing holding me back currently.

User avatar
molly
Posts: 1
Joined: Tue Apr 29, 2008 2:05 am UTC
Location: Brisbane, Australia

Re: PHP: Updating image on page

Postby molly » Tue Apr 29, 2008 10:06 pm UTC

I'm a little confused about exactly what you're trying to achieve. I think your use of the word 'update' is throwing me. If you're looking to create a simple image gallery where previous/next just point to the record before and after the current one, you might want to look into tutorials on php/mysql pagination.

centaurboi2
Posts: 4
Joined: Mon Mar 03, 2008 7:21 pm UTC
Location: Nevada
Contact:

Re: PHP: Updating image on page

Postby centaurboi2 » Tue Apr 29, 2008 11:13 pm UTC

I think I understand your question.

This is psuedo code FYI, if i get a chance to test later i will.

To do this you would need to create a table named pictures(or whatever you want), and then make two rows, one called ID(int(11)), it would be wise to do this by hand but if you want and don't plan on deleting any photos from the database you can make it auto_increment, then the other one should be called location or something.

Code: Select all

<?

if(!$id || $id=='#')
   header ("Location: pictures.php?id=1")

/*connection data*/
$dbhost = 'HOSTNAME';
$dbuser = 'USERNAME';
$dbpass = 'PASSWORD';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');

$dbname = 'pictures';
mysql_select_db($dbname);


$pic = $_GET['id'];//variable the pic number

/*fetch id checker*/
$mysql = mysql_query("SELECT ID FROM pictures WHERE ID=$pic");
$mysql = mysql_fetch_array($mysql);



if(!$mysql)
{
   $pic = $pic+1;//if there is no pic with that id go up one until you find it, this is only needed if you delete photos
}
else
{
   /*get the picture*/
   $picurl = $mysql = ("SELECT location FROM pictures WHERE ID=$pic");
   $picurl = mysql_fetch_array($picurl);

      echo "<img src=".$picurl." />";//show it
   /*set the link locations*/
   $next = $pic+1;
   if($pic!="1")//if the photo is the first one we don't want them to hit a blank page
   $previous = $pic-1;
   else
   $previous = "#"
      /*echo the links*/
      echo "<br /> <a href=\"pictures.php?id=".$previous.">Previous</a>&nbsp;<a href=\"pictures.php?id=".$next.">";
}


Now I haven't tested this code so it's probably a little buggy, and need to be modified by you, plus the part that checks to see if the id works only goes up, not quite sure how to fix that, I'm not the best coder obviously :D, but hopefully you can use this as a base. Hope this helps!

~Nick
Last edited by centaurboi2 on Wed Apr 30, 2008 4:36 pm UTC, edited 1 time in total.

Cryo
Posts: 2
Joined: Tue Apr 29, 2008 8:52 pm UTC

Re: PHP: Updating image on page

Postby Cryo » Wed Apr 30, 2008 12:07 am UTC

appreciate the quick replies....

Suppose i should have given more details, basically its a comic/art site, will contain aload of web comics.
There will be many different series's each with numourous episodes.
So basically once you navigate to the series main page, you can just skip through the episodes using a the NEXT, PREVIOUS buttons, and then clicking either would simply update the image(episode) in the image place holder.

I was origionally using a new web page for each episode so clicking NEXT would simply change to the selected page, but thats a completely unrealistic way of doing it if i ever wanted to update the main template of the site etc.

I'll try the above suggestions anyway, thanks again guys :D

centaurboi2
Posts: 4
Joined: Mon Mar 03, 2008 7:21 pm UTC
Location: Nevada
Contact:

Re: PHP: Updating image on page

Postby centaurboi2 » Wed Apr 30, 2008 12:24 am UTC

hmm, well if only the updating you are worrying about use includes, include(). You can use it to include a nav bar, a header, a footer, or whatever file you want. That way when you want to update the site you just fix up a couple files and everything else is changed.

something like this for the index page;

Code: Select all

<?

include('header.php')

<h2>Todays Comic</h2>

<img src="comic.gif" />

include('footer.php')
?>


Header looks like this

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Comics Name</title>
</head>
<body>
include('nav.php')


Then you can though in you style info too, like <div>'s that go over the whole body

footer just contains maybe a copyright line and some links or something and then </body></html>

Hope this helps too :D

~Nick

jameslao
Posts: 4
Joined: Wed Apr 30, 2008 4:33 am UTC
Location: Oregon

Re: PHP: Updating image on page

Postby jameslao » Wed Apr 30, 2008 5:06 am UTC

There is existing code on the web for this, so if you're not doing this for educational purposes, I would search around the web for an existing solution. A friend of mine wrote a little script called ImageGal that sounds perfect.

Now, if you are doing this for the sake of learning, I see two ways of doing this efficiently. One way is to have a directory of images with some sort of numerical naming scheme (e.g. comic###.jpg). Use the scandir() function to get a list of all the available images. Then use a GET variable to specify which image to show based on the numerical ID specified by the image file name. The next and previous links should be pretty easy to construct as well.

The other way you can do it is to have a database which allows you do name the files whatever you want. But the drawback is that you'll probably have to build an admin page... Or I guess you could have a script that checks for new images in a specified directory and updates the database automagically. You have a little more flexibility doing it this way, but it adds an extra layer of complexity.

User avatar
Arancaytar
Posts: 1642
Joined: Thu Mar 15, 2007 12:54 am UTC
Location: 52.44°N, 13.55°E
Contact:

Re: PHP: Updating image on page

Postby Arancaytar » Wed Apr 30, 2008 9:10 am UTC

On principle, I disagree with storing images in a database. It may seem "cleaner", but there is absolutely no reason not to place images in static files in a designated folder - binary data doesn't need to be indexed, they don't need to be selectively changed with transactional safety, etc. On a small site, it makes no difference whether you're linking to a static file, reading and echoing a static file in PHP, or reading and echoing a database blob.

But the database solution is a performance cost that scales horrendously. Every single image view consists of a PHP initialization, parsing, connecting with and querying the database. If you don't take care to send the proper modification headers, the browser won't cache the image either. Basically, you're getting fast search and transactional safety on the binary blob (which you don't need) at the cost of performance (which you do need).

----

You're best off with something like this:

Code: Select all

<img src="/archive/images/<?=$_GET['id']?>.png" />


or, if you absolutely need to dynamically echo the image:

Code: Select all

header("Content-type: image/png");
readfile("archive/images/". $_GET['id'] .".png");
exit;


(Taking care to do input sanitation on the parameter, of course!)
"You cannot dual-wield the sharks. One is enough." -Our DM.
Image

User avatar
Emu*
Posts: 689
Joined: Mon Apr 28, 2008 9:47 am UTC
Location: Cardiff, UK
Contact:

Re: PHP: Updating image on page

Postby Emu* » Wed Apr 30, 2008 1:30 pm UTC

AJAX, anyone?
Cosmologicon wrote:Emu* implemented a naive east-first strategy and ran it for an hour, producing results that rivaled many sophisticated strategies, visiting 614 cells. For this, Emu* is awarded Best Deterministic Algorithm!

jameslao
Posts: 4
Joined: Wed Apr 30, 2008 4:33 am UTC
Location: Oregon

Re: PHP: Updating image on page

Postby jameslao » Wed Apr 30, 2008 1:58 pm UTC

Arancaytar wrote:On principle, I disagree with storing images in a database. It may seem "cleaner", but there is absolutely no reason not to place images in static files in a designated folder - binary data doesn't need to be indexed, they don't need to be selectively changed with transactional safety, etc. On a small site, it makes no difference whether you're linking to a static file, reading and echoing a static file in PHP, or reading and echoing a database blob.


I agree. I didn't make it clear in my last post, but I was thinking storing the image URLs and not the images themselves. Mea culpa.

User avatar
Pobega
Posts: 103
Joined: Sun Jul 29, 2007 1:50 am UTC
Location: Staten Island, NY
Contact:

Re: PHP: Updating image on page

Postby Pobega » Fri May 02, 2008 12:53 am UTC

You could always do what I do and take the lazy way out.

I usually have a MySQL table with two entries: number and filename. The filename would obviously be the filename, and the number would be the comic number (Starting at 1). So my page would be like this:

Code: Select all

<pre-HTML>
<?php
   mysqlConnect($user, $pass, $db);
   echo 'Comic {$number}';
   echo '<img src="{$filename}" />';
   echo '<a href="{$number-1}">previous</a> &nbsp;<a href="{$number+1}">next</a>';
?>
<post-HTML>


You should use the number as GET data and automatically grab the filename from the SQL database using it...So if the page is archive.php?num=4 it should grab the fourth filename, and link to the third and fifth.

(obviously the function calls won't be the same for you...I just tend to try to keep my code concise and easy to change)

squark
Posts: 36
Joined: Mon Jul 23, 2007 6:37 am UTC
Location: Washington

Re: PHP: Updating image on page

Postby squark » Fri May 02, 2008 7:31 am UTC

Seems like a little JavaScript is going to be necessary too, if you only want to be updating the image and not the entire page (which sounds like what you want).

So if you have a div to hold the images:

Code: Select all

<div id="container"></div>

you could have some JavaScript in the header:

Code: Select all

<script type="text/javascript">
files = [ "comic1.png", "comic2.png", ... ]; // dynamically printed via PHP when page loads
index = 0;

function newImg( inc )
{
   index += inc
   document.getElementById( "container" ).innerHTML = '<img src="' + files[ index ] + '"/>';
}
</script>


and previous/next buttons on the page that call newImg(-1) and newImg(1), respectively, onclick. If you have images in a folder, you could have PHP print the directory listing into the 'files' array. This seems like it might work all right, but I don't know how unwieldy it would get with a huge number of image files. I would think you'd have to have an absurdly high number of images before it broke, though. Obviously you'd throw in some kind of checks to make sure the index didn't run outside the array bounds (and you could even disable the previous/next buttons when you were currently viewing the first/last comic)

Or, you could use AJAX to grab the image you want, and avoid having the files all printed out in an array. That would require a bit more JavaScript, though.

User avatar
Emu*
Posts: 689
Joined: Mon Apr 28, 2008 9:47 am UTC
Location: Cardiff, UK
Contact:

Re: PHP: Updating image on page

Postby Emu* » Fri May 02, 2008 4:42 pm UTC

squark wrote:

Code: Select all

files = [ "comic1.png", "comic2.png", ... ];



if your files are all of the form [common-text]id-number[common-text], why are you building an array instead of generating?

Keep the current ID in an int.

Pseudocode:

Code: Select all

"Next".onclick{
     id++;
     image.set("comic"+id+".png");
     history.add(url) //ensuring AJAX doesn't break the back button
}
Cosmologicon wrote:Emu* implemented a naive east-first strategy and ran it for an hour, producing results that rivaled many sophisticated strategies, visiting 614 cells. For this, Emu* is awarded Best Deterministic Algorithm!

squark
Posts: 36
Joined: Mon Jul 23, 2007 6:37 am UTC
Location: Washington

Re: PHP: Updating image on page

Postby squark » Sat May 03, 2008 5:34 am UTC

They wouldn't necessarily have to be in that form. They could be labeled by date -- comicYYYYMMDD.png, for example, which would allow that information to be parsed and displayed on page -- and then an auto-numbering scheme wouldn't work. But I do agree that if the files were just numbered, yours would be a much cleaner solution.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 7 guests