Retrieving an array of images on HTML page using PHP - 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"]?>">

Related

HTML - PHP echo image

How do I properly echo images combining HTML and PHP? $offer['picture'] has link saved as example.com/picture.png. I've tried many different options, but nothing works. Can anyone help me out?
foreach($json['offers'] as $offer) {
$image = $offer['picture'];
?>
<img src="<?php echo $image ?>">
<?php
}
If there is only example.com/picture.png in $offer['picture'], problem is that images linked incorrectly. You should add http:// before image link to make browser sure you are loading image by absolute path.
foreach($json['offers'] as $offer) {
$image = $offer['picture'];
?>
<img src="http://<?php echo $image ?>">
<?php
}
Well it depends on your directory structure.
suppose your images are in example.com/assets/images/photo-1.jpg
your code should be
<?php foreach($json['offers'] as $offer) {
$image = $offer['picture']; ?>
<img src="http://www.example.com/assets/images/<?php echo $image; ?>">
<?php } ?>
In fact, you need to concatenate or hard code the path and image name will be appended dynamically.
Try this syntax,
<?php
foreach($json['offers'] as $offer) {
$image = $offer['picture'];
echo "<img src='$image' />";
}
?>

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>";
}
?>

Getting Images With PHP And Display In Script

I have a blog and I want to be able to show images that are stored in a folder using a simple PHP script. Here is the PHP:
<?php
$folder = "$segment_url/files/photos/$post_year/$post_id/";
$filetype = ".jpg";
$files = glob($folder.$filetype, GLOB_BRACE);
foreach ($files as $file)
{
echo "
<img class=\"galleryPhoto\" src=\"$file\" /> // PROBLEM 1
";
}
?>
<?php echo $folder; ?>
<?php
$display_content = "
<div class=\"pageSection text\">
$content_intro
</div>
<div class=\"contentSpace\"></div>
<div class=\"pageSection text\">
// PROBLEM 2
</div>
<div class=\"contentSpace\"></div>
<div class=\"pageSection text\">
$content_conclusion
</div>
";
?>
In reference to the above code:
Problem 1: Even though the path to the images folder is correct, no images are being displayed.
Problem 2: How do I get the echoed content to be displayed here rather than at the top of the page?
For Problem 1 : You are missing to use full image path, otherwise search will search in current directory. Try like this.
<img class=\"galleryPhoto\" src=\"$folder/$file\" /> // PROBLEM 1

Generate Multiple Divs within php code

Currently I am trying to loop through a directory grabbing all 14 file names and generate some html using the file names. I have run into some issue of creating HTML elements within PHP, and right now I'm just trying to generate an HTML div with an image in it and a line of text underneath 14 times.
I have tried putting empty php tags before and after the HTML elements, which didn't work because PHP does not allow php elements within another php element.
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
<?php
?>
<div class="cell-1-9">
<img src="images/image.jpg">
<p>Dylan Miller</p>
</div>
<?php
?>
}
?>
I need another way of generating HTML elements within PHP.
You just need to close the <?php tag in order to revert back to html:
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
?>
<div class="cell-1-9">
<img src="<?php echo $file ?>">
<p>Dylan Miller</p>
</div>
<?php
}
?>
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
?>
<div class="cell-1-9">
<img src="images/image.jpg">
<p>Dylan Miller</p>
</div>
<?php
}
?>
Try the HEREDOC syntax.
I'm pasting the user1477388's corrected code: the closing HTML; must NOT be indented.
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
echo <<<HTML
<div class="cell-1-9">
<img src="{$file}">
<p>{$file}</p>
</div>
HTML;
}
?>
As shown in the example in my MVC project, PHP-One, you can do something like this using what's known as HEREDOC syntax:
<?php
foreach($Model as $movie)
{
echo <<<HTML
<li class="list-group-item">
<strong>{$movie->Title}</strong> ({$movie->Rating}) - {$movie->ReleaseDate}
</li>
HTML;
}
?>
Adapted for your code, try something like:
<?php
$dir = "classes/1961/*";
foreach(glob($dir) as $file)
{
echo <<<HTML
<div class="cell-1-9">
<img src="{$file}">
<p>{$file}</p>
</div>
HTML;
}
?>
Ref. https://github.com/DominicArchual/Php-One#define-your-view
Footnote: Learning MVC will make you a better developer; also more valuable.

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.

Categories