Jump to content

Images from directory with Pagination, Image Resizing etc


cobusbo

Recommended Posts

Hi I'm trying to setup Pagination at the bottom of the page after showing 10 images in the following script but have no clue where to start and how to implement it into the script. 
 
I also need some help to make a rule where images should show not bigger than 800 x 600 and. 
 
Lastly I receive a line showing &nbsp at the bottom of the page and I have no Idea how to remove it... 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<title>Show images in folder</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<br> 
<?php 
date_default_timezone_set("Africa/Harare"); 
$folder = 'img/'; 
$filetype = '*.*'; 
$files = glob($folder.$filetype); 
$count = count($files); 

$sortedArray = array(); 
for ($i = 0; $i < $count; $i++) { 
    $sortedArray[date ('YmdHis', filemtime($files[$i])) . $i] = $files[$i]; 
} 

ksort($sortedArray); 
# krsort($sortedArray); 

echo '<table>'; 
foreach ($sortedArray as &$filename) { 
    echo '<tr><td>'; 
    echo '<a name="'.$filename.'" <br><img src="'.$filename.'" /></a>'; 
echo '<br>'; 
    echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder)); 
    echo '</td></tr>'; 
} 
echo '</table>'; 
?>

 

Link to comment
Share on other sites

Since these are coming from a directory and not the database, I'd suggest using array_chunk(). Here's some pseudocode. Hopefully you can see what's going on.

//grab the page number from the url, if not set assume it's page 1
​$page_number = (isset($_GET['page'])) ? filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT) : 1;
$folder = 'img/';
$filetype = '*.*';
$files = glob($folder.$filetype);

//you'll need this total to determine how many "page" links to build
$count = count($files); 
$per_page = 10; //show 10 images per page

 //split up the files array into chunks of 10 (number per_page)
$files = array_chunk($files, $per_page); 

$files = $files[$page - 1]; //grab the files for this page from the chunked array based on index

//now cycle through $images and display them
...

//determine how many pages there will be based on total images and $per_page
$total_pages = ceil($count / $per_page);

//build your page links based on how many pages there are
...

As far as the "&nbsp", search for it. Its not coming from this code. It is missing the ";" at the end so that's why it's showing up.

Link to comment
Share on other sites

 

Oh, for the image size, that should be done with css.

<div class="image-holder">
...images
</div>

CSS Rule:

.image-holder img {max-width:800px; max-height: 600px }

Isn't there a more direct method  I can implement it since my .css styles are being stripped away on certain platform

Link to comment
Share on other sites

Since these are coming from a directory and not the database, I'd suggest using array_chunk(). Here's some pseudocode. Hopefully you can see what's going on.

//grab the page number from the url, if not set assume it's page 1
​$page_number = (isset($_GET['page'])) ? filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT) : 1;
$folder = 'img/';
$filetype = '*.*';
$files = glob($folder.$filetype);

//you'll need this total to determine how many "page" links to build
$count = count($files); 
$per_page = 10; //show 10 images per page

 //split up the files array into chunks of 10 (number per_page)
$files = array_chunk($files, $per_page); 

$files = $files[$page - 1]; //grab the files for this page from the chunked array based on index

//now cycle through $images and display them
...

//determine how many pages there will be based on total images and $per_page
$total_pages = ceil($count / $per_page);

//build your page links based on how many pages there are
...

As far as the "&nbsp", search for it. Its not coming from this code. It is missing the ";" at the end so that's why it's showing up.

How and where should I implement this snippet? Sorry I'm totally new at this...

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.