Realizing a List of Galleries on Page
Content of the lesson:
- Principle of Image Gallery
- HTML Code of Page with List of Galleries
- Exercises
Principle of Image Gallery
The next part of our web will be a page containing image galleries. We will add a few images into each gallery. User will see a list of all available galleries in the page and will be able to choose any of them and browse through the images inside.
Dynamic galleries are usually realized using a database. We will not deal with databases now so we have to create a gallery without using a database. We should find a way to define our gallery:
- Gallery - every gallery must have a unique identifier, a name (additionally a description) and must contain a group of images which belong to it.
- Images in gallery - every image has to belong to one gallery only and you should prepare two variants of images at least.
- Preview - image in low resolution (for example 150x100 pixels). These images will be displayed in the list of images inside each gallery. The resolution is low because these images are informative only. A user can use this preview to decide if he wants to open the image in high resolution or not. In case he wants to open the full resolution of this image, he will click on it and the larger version will appear.
- Image - the single image resized to be used on web. The resolution usually does not exceed 700 pixels (the longer side).
- Original resolution - a link to the image in full resolution (for example from a camera). You can add an option to display your images in full resolution - this is usually solved by adding one more link below the image which can be clicked to display the full resolution of you images.
Functionality of Our Gallery
Take a look at the single steps which describe the functionality of our gallery using images from the web GJŠ Zlín.
1. List of galleries - this page contains a headline "Photogallery" and a list of all galleries. Each gallery from the list contains a headline, a description and a preview image from the gallery.
2. List of preview images from the gallery - when a user clicks on the name of gallery or on the preview image, he should get into the section where he will see all preview images from the selected gallery.
3. Detail of one image from gallery - after clicking on a concrete preview image inside the list of preview images a new page which contains the original image should open. You can add an additional link to the full resolution version of this image. It is common to add links to the previous and the next image. You can also realize this section using a JavaScript popup window.
HTML Code of Page with List of Galleries
We have to invent a way how to insert information about galleries to be able to use unlimited number of galleries and to add them in the future. For a large number of galleries you would have to use a database but we will consider having a smaller web with a universal solution.
Think about the way how to create the page which contains the list of all galleries. Take a look on the final appearance once again and try to suggest the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>List of Photogalleries</h1>
<h2><a href="galerie.php?cislogalerie=1">Gallery 1</a></h2>
<p><img src="path to preview image of gallery 1">description of gallery 1</p>
<h2><a href="galerie.php?cislogalerie=2">Gallery 2</a></h2>
<p><img src="path to preview image of gallery 2">description of gallery 2</p>
...
</body>
</html>
The structure of this HTML code is clear. However, the exact appearance of the link to the single gallery is not clear. We should answer a simple question: "Which page will be linked from the headline of the gallery?".
This link must contain the name of script which will solve writing the list of images from the selected gallery. The link must contain information about the fact which gallery should be displayed. You have to add a variable inside the URL which will represent the unique name of this gallery. Consider having our gallery inside the file galerie.php.
The link to single galleries will look like this one: galerie.php?identifier=valueofidentifier.
The name of variable used to store the identifier can be whatever you want. It would be good idea to use a name indicating the function of this variable. You can use a name like: galerie, idgalerie, idg or just g.
We will select the name according to the fact what will be stored inside the variable. What should we use as a unique identifier of every gallery? When thinking about this problem do not forget to use such values to be able to automatically generate the list of all galleries (you can use many galleries for example). In other words: our PHP script has to be able to create a page with list of galleries (all their names and links to them).
A sequence of values which can be easily created is for example an integer sequence 1,...,n. Every gallery will have its unique number which will identify it. The name of our variable can be cislogalerie and the value for the first gallery will be 1, 2 for the second one etc. The final HTML code can look like the following one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>List of Photogalleries</h1>
<h2><a href="galerie.php?cislogalerie=1">Gallery 1</a></h2>
<p><img src="path to preview image of gallery 1">description of gallery 1</p>
<h2><a href="galerie.php?cislogalerie=2">Gallery 2</a></h2>
<p><img src="path to preview image of gallery 2">description of gallery 2</p>
...
</body>
</html>
Individual Task
To be able to generate the HTML code for our page we need a cycle. This cycle will generate a link to one gallery in each step and will run until all galleries are written to the list. Consider which type of cycle is the best one and find the way how to use it in PHP (use the Internet). Create a PHP file and try to use it to create a HTML page with the same structure as we suggested for our list of galleries (use 5 galleries for example).
Additional Texts
Questions
- How can you send variables into a PHP script?
- Do you know any cycle in PHP?