I'm using a php script to get all of the images from a folder and paginate them and everything works fine, however I'd like to use the actual photo name (filemname) as the alt tag but I'm finding it difficult to get the name. Any way that this can be done with the following code:
<?php
//The directory to your images folder, with trailing slash
$dir = "cms/gallery/photo/";
//Set the extensions you want to load, seperate by a comma.
$extensions = "jpeg,jpg,gif,png";
//Set the number of images you want to display per page
$imagesPerPage = 3;
//Set the $page variable
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
//Load all images into an array
$images = glob($dir."*.{".$extensions."}", GLOB_BRACE);
//Count the number of images
$totalImages = count($images);
//Get the total pages
$totalPages = ceil($totalImages / $imagesPerPage);
//Make sure the page you are on is not greater then the total pages available.
if($page > $totalPages){
//Set the currnet page to the total pages.
$page = $totalPages;
}
//Now find where to start the loading from
$from = ($page * $imagesPerPage) - $imagesPerPage;
//Now start looping
for($i = $from; $i < ($from + $imagesPerPage); $i++){
//We need to make sure that its within the range of totalImages.
if($i < $totalImages){
//Now we can display the image!
echo "
<div class='galleryCellHolder'>
<div class='galleryCell'>
<a class='fancybox' rel='group' href='{$images[$i]}'><img class='galleryPhoto' src='{$images[$i]}' alt='I NEED THIS TO BE THE FILE NAME'></a>
</div>
</div>
";
}
}
//Now to display the page numbers!
for($p = 1; $p <= $totalPages; $p++){
if($p == $page){
$tmp_pages[] = "<strong class='pagination'>{$p}</strong>";
}else{
$tmp_pages[] = "<a class='pagination' href='?page={$p}'>{$p}</a>";
}
}
?>
use basename().
$filename = explode('.', basename($images[$i]));
echo "
<div class='galleryCellHolder'>
<div class='galleryCell'>
<a class='fancybox' rel='group' href='{$images[$i]}'><img class='galleryPhoto' src='{$images[$i]}' alt='" . $filename[0] . "'></a>
</div>
</div>
";
Do it inside Your loop:
var_dump(basename($totalImages[$i]));
Or You can also check:
var_dump(pathinfo($totalImages[$i]));
There will be also basename, with dirname, extension etc.
Related
I'm trying to build a site that has a photo gallery and rather than build a database CMS I'm trying it with the use of PHP and folders. At the moment I have a script to get all of the images in a folder and display them on a page, however as there are going to be probably in excess of 100 photo's I'd like to use pagination to spllit this over several pages but I have no idea how to do this.
Here is the script I'm currently running:
<?php
$folder = 'cms/gallery/photo/';
$filetype = '*.*';
$filename = HOW DO I GET THE NAME WITHOUT FILE TYPE
$files = glob($folder.$filetype);
foreach ($files as $file)
{
echo '
<div class="galleryCellHolder">
<div class="galleryCell">
<a class="fancybox" rel="group" href="'.$file.'"><img class="galleryPhoto" src="'.$file.'" alt="'.$filename.'"></a>
</div>
</div>
';
}
?>
Q1 - How do I extract the file name without the file extension?
Q2 - How do I paginate this for say 24 images per page?
For paging you must calculate the total items to page , capture the parameter of the current page and iterate over the respective range.
<?php
$folder = 'cms/gallery/photo/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$total = count($files);
$per_page = 6;
$last_page = (int)($total / $per_page);
if(isset($_GET["page"]) && ($_GET["page"] <=$last_page) && ($_GET["page"] > 0) ){
$page = $_GET["page"];
$offset = ($per_page + 1)*($page - 1);
}else{
echo "Page out of range showing results for page one";
$page=1;
$offset=0;
}
$max = $offset + $per_page;
if($max>$total){
$max = $total;
}
You can use the function pathinfo to get the file name without extension.
//print_r($files);
echo "Processsing page : $page offset: $offset max: $max total: $total last_page: $last_page";
show_pagination($page, $last_page);
for($i = $offset; $i< $max; $i++){
$file = $files[$i];
$path_parts = pathinfo($file);
$filename = $path_parts['filename'];
echo '
<div class="galleryCellHolder">
<div class="galleryCell">
<a class="fancybox" rel="group" href="'.$file.'"><img class="galleryPhoto" src="'.$file.'" alt="'.$filename.'"></a>
</div>
</div>
';
}
show_pagination($page, $last_page);
Using the following function you can create the navigation links
function show_pagination($current_page, $last_page){
echo '<div>';
if( $current_page > 1 ){
echo ' <<Previous ';
}
if( $current_page < $last_page ){
echo ' Next>> ';
}
echo '</div>';
}
?>
I am using the following script to display all my images on a page. I am looking to have about 12000 images in this folder, hence the need for pagination. The files names are numbers in ascending order 1 - 12000 and must be displayed in order.
<?php
$dir = "../image/thumb/";
//Set the extensions you want to load, seperate by a comma.
$extensions = "jpeg,jpg";
//Set the number of images you want to display per page
$imagesPerPage = 20;
//Set the $page variable
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
//Load all images into an array
$images = glob($dir."*.{".$extensions."}", GLOB_BRACE);
//Count the number of images
$totalImages = count($images);
//Get the total pages
$totalPages = ceil($totalImages / $imagesPerPage);
//Make sure the page you are on is not greater then the total pages available.
if($page > $totalPages){
//Set the currnet page to the total pages.
$page = $totalPages;
}
//Now find where to start the loading from
$from = ($page * $imagesPerPage) - $imagesPerPage;
//Now start looping
for($i = $from; $i < ($from + $imagesPerPage); $i++){
//We need to make sure that its within the range of totalImages.
if($i < $totalImages){
//Now we can display the image!
echo "<img src='{$images[$i]}' alt='{$images[$i]}' />";
}
}
//Now to display the page numbers!
for($p = 1; $p <= $totalPages; $p++){
if($p == $page){
$tmp_pages[] = "<strong>{$p}</strong>";
}else{
$tmp_pages[] = "<a href='?page={$p}'>{$p}</a>";
}
}
//Now display pages, seperated by a hyphon.
echo "<br />" . implode(" - ", $tmp_pages);
?>
I need to have the filenames echo below each image how can I achieve this?
Many thanks in advance.
===== EDIT =====
This script now works with thanks to SuperScript The complete code is:
<?php
//The directory to your images folder, with trailing slash
$dir = "../image/thumb/";
//Set the extensions you want to load, seperate by a comma.
$extensions = "jpeg,jpg";
//Set the number of images you want to display per page
$imagesPerPage = 20;
//Set the $page variable
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
//Load all images into an array
$images = glob($dir."*.{".$extensions."}", GLOB_BRACE);
usort($images,function($a,$b){
$a=(int)preg_replace('~\D~','',$a);
$b=(int)preg_replace('~\D~','',$b);
return $a<$b?-1:1;
});
//Count the number of images
$totalImages = count($images);
//Get the total pages
$totalPages = ceil($totalImages / $imagesPerPage);
//Make sure the page you are on is not greater then the total pages available.
if($page > $totalPages){
//Set the currnet page to the total pages.
$page = $totalPages;
}
//Now find where to start the loading from
$from = ($page * $imagesPerPage) - $imagesPerPage;
//Now start looping
for($i = $from; $i < ($from + $imagesPerPage); $i++){
//We need to make sure that its within the range of totalImages.
if($i < $totalImages){
//Now we can display the image!
// echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><a class=\"filename\">" . basename($images[i]) . "</a>";
echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><p>" . basename($images[$i]) . " </p>";
}
}
//Now to display the page numbers!
for($p = 1; $p <= $totalPages; $p++){
if($p == $page){
$tmp_pages[] = "<strong>{$p}</strong>";
}else{
$tmp_pages[] = "<a href='?page={$p}'>{$p}</a>";
}
}
//Now display pages, seperated by a hyphon.
echo "<br />" . implode(" - ", $tmp_pages);
?>
Try changing your echo line (//Now we can display the image!):
echo "<img src='{$images[$i]}' alt='{$images[$i]}' /><p>" . basename($images[$i]) . "</p>";
The basename() function returns just the filename of a file.
And to sort correctly, add this line after you get $images:
usort($images,function($a,$b){
$a=(int)preg_replace('~\D~','',$a);
$b=(int)preg_replace('~\D~','',$b);
return $a<$b?-1:1;
});
<?php
$rows_per_page = 2;
$cols_per_page = 2;
$image_href = '<a href=/';
$image_links = array('file1/page1>', 'file2/page2>', 'file3/page3>',
'file4/page4>', 'file5/page5>', 'file6/page6>', 'file6/page6>',
'file/page7>', 'file/page8>', 'subfile/page9>');
$img_srcs = '<img src="https://s3.amazonaws.com/imagetitle/';
$images = array();
for($i = 1; $i < 10; $i++)
{
$images[$i] = $i;
}
$image_ending = '.png" height="200" width="200" /></a>';
$image_descriptions = array('<br />something', '<br />description',
'<br />arbitrary', 'random', '<br />you', '<br />get', '<br />the',
'<br />idea', '<br />itsdescriptions');
$total_images = count($images);
$images_per_page = $rows_per_page * $cols_per_page;
$total_images = count($images);
$total_pages = ceil($total_images / $images_per_page);
$current_page = (int) $_GET['page'];
if($current_page<1 || $current_page>$total_pages)
{
$current_page = 1;
}
//Get records for the current page
$page_image_links = array_splice($image_links, ($current_page-1)*$images_per_page, $images_per_page);
$page_images = array_splice($images, ($current_page-1)*$images_per_page, $images_per_page);
$page_image_descriptions = array_splice($image_descriptions, ($current_page-1)*$images_per_page, $images_per_page);
$slots = "<table border=\"1\">";
for($row=0; $row<$rows_per_page; $row++)
{
$slots .= "<tr>";
for($col=0; $col<$cols_per_page; $col++)
{
$imgIdx = ($row * $rows_per_page) + $col;
$img = (isset($page_images[$imgIdx])) ? "{$image_href}{$page_image_links[$imgIdx]}{$img_srcs}{$page_images[$imgIdx]}{$image_ending}{$page_image_descriptions[$imgIdx]}" : ' ';
$slots .= "<td>$img</td>";
}
$slots .= "</tr>";
}
$slots .= "</table>";
//Create pagination links
$first = "First";
$prev = "Prev";
$next = "Next";
$last = "Last";
if($current_page>1)
{
$prevPage = $current_page - 1;
$first = "First";
$prev = "Prev";
}
if($current_page<$total_pages)
{
$nextPage = $current_page + 1;
$next = "Next";
$last = "Last";
}
?>
<html>
<title></title>
<body>
<h2>Here are the records for page <?php echo $current_page; ?></h2>
<ul>
<?php echo $slots; ?>
</ul>
Page <?php echo $current_page; ?> of <?php echo $total_pages; ?>
<br />
<?php echo "{$first} | {$prev} | {$next} | {$last}"; ?>
</body>
</html>
So basically this code above makes it easy to put up images and their links. For now, I don't have that many images, so the page runs super fast. However, I'm thinking in the long run. If I have say, 10,000 images, it's gonna take a long time to process each paginated page, as I would have $image_links of file1/page1 up to file10000/page10000, and 10000 descriptions! Is there a way to stop the web browser from reading, or skip, certain parts of the script (the $image_links and $image_descriptions in my case)? That way, it won't need to read through all 10000 $image_links and $image_descriptions.
Thanks!
I'm going to suggest another approach. Using arrays for this is not ideal; it really feels like it should be a database driven app.
If you decide to go for that approach, pagination becomes much easier. You can just ask your database engine for the corresponding records. For example, in MySQL, you'd ask for the data something like this:
select * from tableA order by id limit 10 offset 20;
This would return id's 21 thru 30.
... and, would scale much better. Of course, if you've never done any work with databases, there is quite a learning curve.
If you want to end execution at a certain place, just call exit;
Try using the onload function on your < body >'s html, so it will load the page at once
Working on implementing image descriptions to a php run gallery and can't seem to figure out how to call each text file for each individual image. I would need to place a div in the code for the image and then call the include.
//total number of images
$total = 77;
//max number of thumbnails per page
$max = 9;
//what image do we want to start from?
$startcount = $_GET["start"];
//if there is not a defined starting image, we start with the first
if(empty($startcount))
{
$startcount = 0;
}
//start off the loop at 1
$loop = 1;
//start the loop
while($loop <= $max)
{
//for the picture labels
$num = $startcount + $loop;
if($num > $total)
{
$num = $num - 1;
break;
}
// Add class="last" to every third list item
if(is_int($num / 3))
{
$last = ' class="last"';
}
else
{
$last = "";
}
//the code for the image
echo '
<li'.$last.'><img src="images/portfolio/thumbs/pic-'.$num.'-thumb.jpg" width="256" height="138" alt="Thumbnail of image '.$num.'" /><div>'.$num.'</div></li>';
I see that I can call the text files by number using '.$num.' (I have 77 individual text files with a phrase in each) but how do I tell it to call the files?
Assuming the description files are named something like "description_$num.txt", you can simply use readfile.
echo "<li${last}><a href='images/portfolio/pic-${num}.jpg' rel='milkbox[gall1]'>
<img src='images/portfolio/thumbs/pic-${num}-thumb.jpg' width='256'
height='138' alt='Thumbnail of image ${num}'/>
</a><div>";
readfile("description_${num}.txt");
echo '</div></li>';
Note that you don't "call" files in PHP, you either include them (which interprets them as scripts) or read them (which dumps them to the output).
For each file you need to do something like that:
<?php
$f=fopen($file,'r');
$data='';
while(!feof($f))
$data.=fread($f,$size);
fclose($f);
// do whatever you want with the file content.
?>
I made use of file_get_contents, and split the output a bit so you can more easily modify it:
<?php
$total = 77;
$max = 9;
$startcount = $_GET["start"];
$loop = 1;
if(empty($startcount)) $startcount = 0;
while($loop <= $max)
{
$num = $startcount + $loop;
if($num > $total)
{
$num--;
break;
}
$last = ($num % 3 == 0 ? ' class="last"' : '');
$output = "<li $last>";
$output .= "<a href=\"images/portfolio/pic-$num.jpg\" rel=\"milkbox[gall1]\">";
$output .= "<img src=\"images/portfolio/thumbs/pic-$num-thumb.jpg\" width=\"256\" height=\"138\" alt=\"Thumbnail of image $num\">";
$output .= "</a>";
$output .= "<div>";
$output .= file_get_contents("textfile-" . $num . ".txt"); // assuming this is where you want the phrase
$output .= "</div>";
$output .= "</li>";
echo $output;
}
?>
I am trying add a descriptive tag under each image but most of the code is in PHP and i am not to familiar with how to program it without screwing up the whole structure. Here is the website: http://suncoastdeck.com/index.php?page=portfolio&start=0
Here is the code for the portfolio page:
<div class="content-box">
<?
//total number of images
$total = 77;
//max number of thumbnails per page
$max = 9;
//what image do we want to start from?
$startcount = $_GET["start"];
//if there is not a defined starting image, we start with the first
if(empty($startcount))
{
$startcount = 0;
}
//start off the loop at 1
$loop = 1;
//start the loop
while($loop <= $max)
{
//for the picture labels
$num = $startcount + $loop;
if($num > $total)
{
$num = $num - 1;
break;
}
// Add class="last" to every third list item
if(is_int($num / 3))
{
$last = ' class="last"';
}
else
{
$last = "";
}
//the code for the image
echo '
<li'.$last.'><img src="images/portfolio/thumbs/pic-'.$num.'-thumb.jpg" width="256" height="138" alt="Thumbnail of image '.$num.'" /><div>'.$num.'</div></li>';
//add 1 to the loop
$loop++;
}
echo '</ul>';
//Calculate the number of pages
$total_pages = $total / $max;
//clean it up
if(!is_int($total_pages))
{
$total_pages = floor($total_pages) + 1;
}
//start the page count at 1
$ploop = 1;
echo '<hr /><div id="portfolio-wrap"><div id="pages">Page: ';
while($ploop <= $total_pages)
{
$offset = ($ploop * $max) - $max;
if($startcount == $offset)
{
echo '<span>'.$ploop.'</span>';
}
else
{
echo ''.$ploop.'';
}
$ploop++;
}
echo '</div>';
echo '<div id="portfolio-foot-left"><p>Displaying Images <strong>'.($startcount + 1).' - '.$num.'</strong> of <strong>'.$total.'</strong></p></div></div>';
?>
Pretty much what i want is to make section drop down a bit more where i can add in additional info about the pic. Any suggestions?
You need a database or else you can store your descriptions in a text file next to the image. What have you tried so far?
Basically you need to create a form that accepts the image name and caption, take the caption and write it to a file or database. Then when displaying the caption, you just add a <div> that reads from file with file_get_contents(). Why don't you copy the script to another directory and start experimenting? People probably won't write the whole thing for you ;)