Loop thumbnails and display - php

I'm trying to loop images from a thumbnails folder (with already presized thumbnails) and link them to their respective full size images. The names will match exactly so I should be able to do this with one loop.
The question is do I need to open both directories before I can start looping through them? In my example, I'm pulling from the Montague Vacations folder which has both the thumbs and full size folders.
$files = array();
$dir = opendir('./assets/vacations/montague'); // open the cwd..also do an err chec
while(false != ($file = readdir($dir))) {
if(($file != ".") and ($file != "..") and ($file != "index.php")){
$files[] = $file; // put in array.
}
}
natsort($files); // sort.
$counter = 0;
// print.
foreach($files as $file) {
$counter++;
echo "<code>";
print htmlentities("
<li>
<!--[if gte IE 9]><!--><a href='#pic-$counter'><!--<![endif]-->
<!--[if lte IE 8]><a href=/userfiles/images/portfolio/web-templates/big/fastedit.png' target='_blank'><![endif]-->
<img src='%base_url%/assets/vacations/montague/thumb/$file alt='' />
<span><b>Preview</b></span>
</a>
<div id='pic-$counter' class='overlay'>
<img src='%base_url%/assets/vacations/montague/full/$file' alt='' />
<div>
<p>Picture caption here.</p>
</div>
<a href='#close' class='close' title='Close'>×</a>
</div>
</li>
");
echo ("<br />\n");
echo ("<br />\n");
echo "</code>";
}

Related

PHP footer display file time stamp

For each page I am coding I have a foot that I use php include "footer.php" in all of them. Below is the foot.php code. I need my code to be able to give the correct time stamp for each file not one speific file. So in the end each page should have a different time stamp because I am workign on each file at different times becasue the website I am making is for a class assignments. And of course each assignment is being coded at on different days. If this doesn't make since let me know.
<footer align="center">
<hr width="900px" size="2" noshade="noshade" color="black" align="center">
<div style="padding:0 30px">
<p>Validated by:</p>
<img src="https://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88">
<img src="https://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS">
<p>Last modified:
<?php
$timestamp = filemtime(__FILE__);
$date_time = new DateTime();
$date_time->setTimezone(new DateTimeZone("America/New_York"));
$date_time->setTimestamp($timestamp);
echo $date_time->format("F j Y g:i a.");
?>
</p>
</div>
</footer>
I asked for help on this before but not working out.
First we need a function that reads all files of a folder in an association
reads out the timestamp values
function getFileModificationTimes(string $directory): array {
$files = scandir($directory);
$modificationTimes = [];
foreach ($files as $file) {
if ($file === '.' || $file === '..') {
continue;
}
$path = $directory . '/' . $file;
if (!is_file($path)) {
continue;
}
$modificationTimes[$file] = filemtime($path);
}
return $modificationTimes;
}
and a second function that determines the largest/most recent value
function getMaxModificationTime(array $modificationTimes) {
$maxModificationTime = 0;
$maxFile = '';
foreach ($modificationTimes as $file => $modificationTime) {
if ($modificationTime > $maxModificationTime) {
$maxModificationTime = $modificationTime;
$maxFile = $file;
}
}
return [$maxFile, $maxModificationTime];
}
the footer now shows the date of the newest file from the folder
<?php
$modificationTimes = getFileModificationTimes('/path/to/directory');
list($maxFile, $maxModificationTime) = getMaxModificationTime($modificationTimes);
?>
<footer align="center">
<hr width="900px" size="2" noshade="noshade" color="black" align="center">
<div style="padding:0 30px">
<p>Validated by:</p>
<img src="https://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88">
<img src="https://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS">
<p>The file with the most recent modification time is <?=$maxFile?>, which was modified at <?=date('Y-m-d H:i:s', $maxModificationTime)?>.
</p>
</div>
</footer>
If you want to show the modification time of the file including the footer, then remove $timestamp = filemtime(__FILE__); from the footer file and put it before the include().
Eg:
$timestamp = filemtime(__FILE__);
include('footer.php');

How can you make multiple, slideable image galleries from a directory? (Slick Slider)

I have made an relative simple html/css/php website for a friend of my. But now he wants to have a page where I can show photos of events in a gallery (Arround 100 photos per event).
I have already searched for some code for this online, what I now have shows all the pictures in that directory but the page gets way to big if there are 100 photos per event.
So now I am wondering if these photos can be put in a slider or something like that.
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo '<div class="gallery">';
echo "<a><h3><span>»</span> ".basename($val). "</h3></a>";
echo '<ul class="gallery-list">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<li><a href='".$file."' ><img src='" . $file . "'></a></li> \r\n";
}
echo "</ul>";
echo "</div>";
}
?>
[-- EDIT --]
I managed to combine the code I already had with the slickslider
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo "<div class='gallery-wrapper'";
echo "<a><h3>".basename($val). "</h3></a>";
echo '<div class="slider-photos">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<div class='slide'><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
}
echo "</div>";
echo "</div>";
}
?>
( Ofcourse with the aditional CSS and javascript for the slider, but that is not important for this I think )
But I have one more problem... They automaticaly sort on alphabet but I want them to sort on the date I made the folder where the images are stored.
Does anyone know how to do this?
And maybe its to much asked, but if it is possible can I also show per folder how many images there ar in that folder?
You just have to modify your code a little bit and perform a loop around the div with each slider's content. If you are using slick slider (http://kenwheeler.github.io/slick/) then it should be quite straightforward.
1st step is to ensure you have all the required libraries in place:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
2nd Step is to ensure you initialise your slider:
$(document).ready(function(){
$('.gallery-list').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4
});
});
3rd step is to structure your html correctly using this template:
<div class="gallery-list">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
In your case I think this is what you need:
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo '<div class="gallery">';
echo "<a><h3><span>»</span> ".basename($val). "</h3></a>";
echo '<div class="gallery-list">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<div><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
}
echo "</div>";
echo "</div>";
}
?>

Accessing Videos in Different Folder Through PHP

I am pretty new to PHP, but I understand the basics. My problem is I have I have an index page that needs to have a list of the names of videos stored in a different folder. Since there will be over 100 videos in the folder by the time the site is live, I want the video names to be clickable, and when clicked the video plays.
<?php
$videopath = 'videos';
$videoExts = array('webm'=> 'video/webm','mp4'=>'video/mp4','mpeg'=>'video/mp4','ogv'=>'video/ogv');
$directory = "/videos";
$phpfiles = glob($directory . "*.html");
if ($handle = opendir($videopath)) {
while (false !== ($file = readdir($handle))) {
$info =pathinfo($file);
$ext = strtolower($info['extension']);
echo $file . " \n " . "\n <br> \n";
if (array_key_exists($ext, $videoExts)) {
?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $videoExts[$ext]; ?>" src="<?php echo "$videopath/$file"; ?>">
</video>
</div>
<?php
}
}
closedir($handle);
} else {
echo "no dir";
}
?>
This code will list the video name (in text), and play each video. What can I do to modify this so that the video names become clickable and once clicked open the appropriate video?
Replace:
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $videoExts[$ext]; ?>" src="<?php echo "$videopath/$file"; ?>">
</video>
</div>
By:
<?php echo $file; ?>
And in page2.php
<?php
$type = $_GET['type'];
$src = $_GET['src'];
if (file_exists($src)) { ?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $type; ?>" src="<?php echo $src; ?>">
</video>
</div>
<?php } ?>
I would do the following (it involves a bit of jQuery). The idea is to have a list of videos and one single video player. Once you click one of them, the video player will be updated.
Steps:
List a link of videos, using the HTML5 data attribute to store the source and extension information of each video. So when clicked, the only video player will be updated with the new settings.
$videopath = 'videos';
$videoExts = array('webm'=> 'video/webm','mp4'=>'video/mp4','mpeg'=>'video/mp4','ogv'=>'video/ogv');
$directory = "/videos";
$phpfiles = glob($directory . "*.html");
// Stores first video of the list
$first_video = array();
if ($handle = opendir($videopath)) {
$counter = 0;
while (false !== ($file = readdir($handle))) {
$info =pathinfo($file);
$ext = strtolower($info['extension']);
echo $file . " \n " . "\n <br> \n";
if (array_key_exists($ext, $videoExts)) {
if ($counter == 1) {
// Save settings of first video
$first_vid['extension'] = $videoExts[$ext];
$first_vid['path'] = $videopath .'/'. $file;
// Save it in array
$first_video[] = $first_vid;
}
?>
<a class="video-item" href="#" data-type="<?php echo $videoExts[$ext]; ?>" data-src="<?php echo "$videopath/$file"; ?>"><?php echo "$videopath/$file"; ?></a><br/>
<?php
}
}
closedir($handle);
} else {
echo "no dir";
}
?>
<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
<video>
<source type="<?php echo $first_video[0]['extension']; ?>" src="<?php echo $first_video[0]['path']; ?>">
</video>
</div>
<script>
// Don't forget to add jQuery in your project for this to work :)
$(function () {
$('.video-item').click(function (e) {
// do nothing
e.preventDefault();
// get info of video being clicked
var extension = $(this).attr("data-type");
var src = $(this).attr("data-src");
// update video player with clicked video
$('.flowplayer video').attr('type', extension);
$('.flowplayer video').attr('src', src);
});
});
</script>
This is a untested code. Hope it helps though.

I need help displaying the output of a PHP script into a DIV tag ontop of an image

I would like to display folder contents on top of the image "folderContents05.jpg" inside of it's DIV tag. The PHP script should output the folder contents of the directory it resides in. The script works fine by itself, but I can't seem to get anything to display when I use it in html, or call the script.
Here is the HTML-
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#353535; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (index.psd) -->
<div id="wrapper">
<div id="Table_01">
<div id="folderContents01">
<img src="images/folderContents01.jpg" width="359" height="120" alt="">
</div>
<div id="folderContents02">
<img src="images/folderContents02.jpg" width="591" height="150" alt="">
</div>
<div id="folderContents03">
<img src="images/folderContents03.jpg" width="359" height="30" alt="">
</div>
<div id="folderContents04">
<img src="images/folderContents04.jpg" width="126" height="460" alt="">
</div>
<div id="folderContents05">
<img src="images/folderContents05.jpg" width="698" height="396" alt="">
</div>
<div id="folderContents06">
<img src="images/folderContents06.jpg" width="126" height="460" alt="">
</div>
<div id="folderContents07">
<img src="images/folderContents07.jpg" width="698" height="64" alt="">
</div>
<div id="folderContents08">
<img src="images/folderContents08.jpg" width="950" height="90" alt="">
</div>
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
and the php script
<?php
$count = 0;
if ($handle = opendir('.')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {$count++;
print("".$file."<br />\n");
}
}
closedir($handle);
}
?>
Use style= "z-index: 0" on your <img> tags and change the PHP to this:
<?php
$count = 0;
if ($handle = opendir('.')) {
echo '<div style="z-index: 1">';
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {$count++;
print("".$file."<br />\n");
}
}
echo '</div>';
closedir($handle);
}
?>
Using the z-index establishes an order of 'on-top-ness' for elements
Is this what you want?
<div id="folderContents05" style="position: relative">
<img src="images/folderContents05.jpg" width="698" height="396" alt="">
<div style="position: absolute; left: 0; top: 0; z-index: 100">
<?php
$count = 0;
if ($handle = opendir('.')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$count++;
print("".$file."<br />\n");
}
}
closedir($handle);
}
?>
</div>
</div>
You have to make the "folder content" images as a background to your div and generate the HTML markup by php itself something like the code below
if ($file != "." && $file != "..") {$count++;
print(<div id="folderContents +i">
</div>)
and put a counter so you can use it to generate ( folderContents1 , folderContents2, etc).

Retrieving an array of images on HTML page using PHP

I am retrieving images from a directory using php. Images are displayed on PHP page (getUser.php) but how can these images be display on any HTML.
getUser.php
<?php
$dir = 'images';
$file_display = array('jpg','jpeg','png','gif');
if (file_exists ($dir) == false) {
echo 'Directory \'', $dir, '\' not found!';
}
else{
$dir_contents = scandir($dir);
foreach($dir_contents as $file) {
$file_type = strtolower(end(explode('.', $file)));
If($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true) {
echo '<img src="', $dir, '/', $file, '" alt="', $file, '" />';
/*echo '<td>';
echo '<img src =';
echo $dir."/".$file;
echo '/>';
echo '</td>'; */
}
}
}
?>
one.html
I want this array of images to be displayed in html (div). That is the source of the image tag takes reading from the PHP file. I have done this in ASP.NET but can't figure it out in PHP Is there anything like
<img src="images/vimages/<%=row["image"] %>" ASP.NET
this PHP.
<div id="pics">
<img src="img/...jpg" alt="" />
</div>
The above div will be dynamically populating using getUser.php file.
If I understand your question, you are looking for some template system in php.
Firstly, there is one already in the php. PHP allows you to mix html and php code using tags.
So you can create something like:
<?php if ($images): ?>
<?php $counter = 1 ?>
<ul>
<?php foreach ($images as $image): ?>
<li id="item-<?php echo $counter++ ?>">
<img src="<?php echo $image['source']?>">
</li>
<?php endforeach ?>
</ul>
<?php endif?>
While it is good practice to separate application logic and html code, pure php is not the best tool for this job. Fortunately, there is plenty of tools on web, for example
Smarty or Latte
Consider the following:
ASP.NET
<img src="images/vimages/<%=row["image"] %>">
PHP
<img src="images/vimages/<?=$row["image"]?>">

Categories