I try to dynamically populate an HTML page with 2 images, the first a full image and the second a reduced image, but as I can not do AND with a foreach.
In fact, the code is ok, but I want populate my HTML with twos pics of the same folder; but this code bring back all pictures, it doesn't no the diff between the Full image and the Thumbnail.
The script bring back all picture. My folder contain images with specific titles:
Full Image = *.jpeg
Thumbnail = *_Low.jpeg
I would like to be able to modify my code to insert the full in the first line and the thumbnail in the second line.
<?php
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();
$nb = 1;
foreach($files as $file) {
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
var_dump($images);
foreach ($images as $image) {
echo '<div class="cbp-item">'.'<a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/'.$image.'">'."\n"
.'<div class="cbp-caption-defaultWrap">'.'<img src="style/images/art/mairie/'.$image.'" alt="" /> </div>'."\n"
.'<div class="cbp-caption-activeWrap">'."\n"
.'<div class="cbp-l-caption-alignCenter">'."\n"
.'<div class="cbp-l-caption-body">'."\n"
.'<div class="cbp-l-caption-title"><span class="cbp-plus">'.'</span></div>'."\n"
.'</div>'."\n"
.'</div>'."\n"
.'</div>'."\n"
.'<!--/.cbp-caption-activeWrap --> '."\n"
.'</a> </div>'."\n";
}
?>
for the second line I would like to bring back the reduced photo, so to have
<div class="cbp-caption-defaultWrap"><img
src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" />
</div>
$images
Part of my $images array would look like this:
$images = [
"0" => "Maurine_Tric-7399.jpg",
"1" => "Maurine_Tric-7399_Low.jpg",
"2" => "Maurine_Tric-7407.jpg",
"3" => "Maurine_Tric-7407_Low.jpg",
"4" => "Maurine_Tric-7414.jpg",
"5" => "Maurine_Tric-7414_Low.jpg",
];
Desired Output
I'm trying to add one of the URLs in my array with large images, and the other with its thumbnail which are being differentiated with _Low:
<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/Maurine_Tric-7399.jpg"> <div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" /> </div>
Just use preg_match() instead of fnmatch(), matching only the thumbail images and marking the part before _Low.jpg as Subpattern.
Then you can easily construct the filename of both images from that stub:
<?php
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();
$matches = NULL;
foreach ($files as $file) {
if (preg_match('/^(.+)_Low\.jpg$/', $file, $matches)) {
$images[] = $matches[1];
}
}
foreach ($images as $image) {
echo '<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="' . $dir . $image . '.jpg"> <div class="cbp-caption-defaultWrap"><img src="' . $dir . $image . '_Low.jpg" alt="" /></div>';
}
?>
If we wish to just add one URL for our images and one for their thumbs in the foreach, we might be able to define a $html variable and step by step add to it, then we would finally echo that, and our code would look like something similar to:
<?php
$html = '<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans titre</title>
</head>
<body>';
$html .= '<ul>';
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
$nb = 1;
foreach ($files as $file) {
if (fnmatch('*.jpg', $file)) {
$images[] = $file;
}
}
foreach ($images as $key => $image) {
if ($key % 2 == 0) {
$html .= '<div class="cbp-item">
<a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/' . $image . '">
<div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/' . $images[$key + 1] . '" alt="" /> </div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title"><span class="cbp-plus"></span></div>
</div>
</div>
</div>
</a>
</div>';
}
}
$html .= '</ul></body></html>';
echo $html;
Modifications
What we are modifying here is that we add an if to run every other time.
if ($key % 2 == 0) {
}
We add $key var in our foreach and finally we have two image links which we replace one of them with $images[$key+1], which one of them is for thumbs:
$image
$images[$key+1]
Related
I have a string ..... one .... and I have an array that contains images link
$my_string = '..... one ....';
$images = [
"0" => "image_url_1",
"1" => "image_url_2",
]
I need to replace the word one with these two images
my code:
$pdf_form = ".... <span>one</span> ....";
foreach ($images as $image) {
$pdf_form = Str::replace('one', '<img src="' . $image . '" />', $pdf_form);
}
dd($pdf_form);
The output is, I got just the first image only!
How can I print both images?
Do it like this
$replace_string="";
foreach ($images as $image) {
$replace_string.='<img src="' . $image . '" />';
}
$pdf_form = Str::replace('one', $replace_string, $my_string);
I see only twos bugs. 1) You use declare $image but never used. Change this: foreach ($images as $image) {to foreach ($images as $value) {
In a loop you will always override the value if you asign the value o variable by using =. Change this to .=
Update
$pdf_form .= \Stthis line is in your code wrong. You assign with = but you have to concat the strings with .=
$pdf_form = ".... <span>one</span> ....";
$images = ['pic1.png', 'pic2.png'];
foreach ($images as $image) {
$pdf_form .= \Str::replace('one', '<img src="' . $image . '" />', $pdf_form);
}
dd($pdf_form);
output
^ ".... <span>one</span> ........ <span><img src="pic1.png" /></span> ........ <span><img src="pic2.png" /></span> ........ <span><img src="pic1.png" /></span> .... ◀"
Take a look at the strtr function.
If I understand your question correctly, you want to display both images each with their own <img> tag.
$my_string = '<img src="one" />';
$images = [
"0" => "image_url_1",
"1" => "image_url_2",
]
$pdf_form = '';
foreach ($images as $image) {
$pdf_form = $pdf_form . strtr($my_string, ['one' => $image]);
}
I'm develop my websites and want to display all the images in a folder. I used the following code but occurred an error.
<?php
$sesi = Session::get('id');
$gambar = glob('archive_gambar/formulir/pendaftaran/'.$sesi.'/*');
for ($i=0; $i<count($gambar); $i++)
{
$single_image = $gambar[$i];
?>
<img src="<?php echo $single_image; ?>" class="img-responsive" style="margin-left: auto;margin-right: auto; margin-top: auto;margin-bottom: auto;width:75%;" alt="Tri">
<?php
}
?>
there is no error, the number of images is the same, but the picture does not appear.. like this
picture not appear
$dirname = "media/images/iconized/";
$images = glob($dirname."*.png");
foreach($images as $image) {
echo '<img src="'.$image.'" /><br />';
}
If the archive_gambar directory is at the root of the web site, try adding slash in front of the path
$gambar = glob('/archive_gambar/formulir/pendaftaran/'.$sesi.'/*');
if not, you must write the full path
Try with this, adjust the $dir variable to your needs:
/**
* This file: images.php
* This script read content of "images" directory as same level, and return filelist in array format
**/
$dir = "images/";
$images = array();
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if($dir){
if(in_array($file, array('.', '..')) == FALSE){
$images[] = $file;
}
}
}
closedir($dh);
}
}
/**
* Print array to browswer
*/
echo '<pre>';
print_r($images);
/**
* Iterate $images array in foreach loop and display images with img tag (need to adjust directory to your needs).
*/
foreach ($images as $key => $image){
echo '<img src="images/'.$image.'" class="img-responsive" alt="image_'.$key.'">';
}
I have a folder with around 400 images. I'd like to put them on a page put only eight at a time. Meaning i will have all the images on the same page, but cut in sections of eight images wrapped in a box like this:
<div class="eightbox">
<img src="image1">
<img src="image2">
<img src="image3">
<img src="image4">
<img src="image5">
<img src="image6">
<img src="image7">
<img src="image8">
</div>
<div class="eightbox">
<img src="image9">
<img src="image9">
<img src="image10">
<img src="image11">
<img src="image12">
<img src="image13">
<img src="image14">
<img src="image15">
</div>
Now my code for this so far makes an output, but does not close the "eightbox" so that every new div is inside the other one.
Here's my Code:
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
$y = ceil(count($files)/8); // The amount of images divided by eight and rounded up
$z = 1; //This counter makes the array continue outside the loop
for ($i=1; $i<$y; $i++)
{
echo '<div class=\'eightbox\'>';
for ($q=0; $q<8; $q++)
{
$num = $files[$z];
echo '<img src=\'' . $num . '\' >';
$z++;
}
echo '</div>';
}
?>
I hope this makes any sense to you and thanks in advance for helping!
EDIT: on popular demand heres a screenshot of the code i'm getting with chrome:
Screenshot of my code
An alternative which splits the files into chunks of 8 ( using array_chunk()) and then outputs each chunk at a time...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'>';
foreach ($div as $file ) {
echo '<img src=\'' . $file . '\' />';
}
echo '</div>';
}
Or using implode() to output the data...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'><img src=\''.
implode('\' /><img src=\'', $div).
'\' /></div>';
}
which IMHO is a little less readable, but more compact.
Using Modulo you could do this
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
foreach ( $files as $idx=>$file) {
if ( $idx % 8 == 0 && $idx != 0){ // every 8 close a div and open a new one
echo '</div>';
echo '<div class="eightbox">';
}
if ( $idx == 0 ){ // output first div
echo '<div class="eightbox">';
}
echo "<img src='$file'>";
}
if ( $idx+1 % 8 != 0 ) { // close the last div
echo '</div>';
}
?>
I have a PHP script that scans a specified Movie directory then displays it styled on a webpage using for loop and php. The code is below. I tried using glob but once I have all the images in an array how do I compare them to the array with all of the movies then if the image and the movie folder match to display the image with the correct name?
<?php
// set dir to the directiry you want to index
$dir = 'Movies/';
// scanning the directory you set
$scan = scandir($dir);
// I have this value at 11 because the first movie shows up
// in the 11th file in the array
$file = 11;
// This then removes the first useless files from our array
$scanned = array_slice($scan, $file);
// gets the amount of files
$FileNum = count($scanned);
// display all images and fanart
$images = glob('*.jpg');
// for loop that goes through the array
for ($i = 0; $i <= $FileNum; $i++) {
// gives the class for styling
echo '<li class="image">';
this is problem bit
// check if there is fanart/images in the folders
if (file_exists($dir . $scanned[$i] . $images)) {
// if there is images display them styled
echo '<img id="box1" src="' . $dir . $scanned[$i] . '*.jpg' . '" width="280" height="150" />';
} else {
// if not then display default image
echo '<img id="box1" src="http://placehold.it/280x150" width="280" height="150" />';
}
// make the box clickable to where the folder is located
echo '<a href="'. $dir . $scanned[$i] .'">';
// display the name of the movie and some JS
echo '<span class="text-content"><span>' . $scanned[$i] .'<br><br><i class="fa fa-4x fa-play-circle-o"></i><br><br><i class="fa fa-chevron-down" onclick="openNav()" aria-hidden="true"></i></span></span> </a>';
}
The file structure is as follows
`MOVIES---
\--random movies
\--mp4 and .jpg files`
To clarify my question is - Is there a way to check if a file exists, and if it does then put it in an array? I've tried using glob but that can't check if the file exists.
Well there is an * in your echo i don't think it needs to be there.
And if your movie directory gets updated, or the images. Then your script does not work anymore. Because of the hard slicing (11th file).
Maybe this will work for you:
<?php
// movies
$dir = "movies/";
$files = scandir($dir);
$movies = array();
$images = array();
foreach ($files as $file) {
// check for the mime type:
$mime = mime_content_type($dir . $file);
$type = substr($mime, 0,5);
$filename = pathinfo($dir . $file, PATHINFO_FILENAME);
if ($type == "video") $movies[] = $file;
if ($type == "image") $images[] = $filename;
}
foreach ($movies as $movie) {
$placeholder = true;
foreach($images as $image) {
if (strpos($movie, $image) !== false) {
$placeholder = false;
continue;
}
}
if ($placeholder) {
echo $movie . " - placeholder<br>";
} else {
echo $movie . " - image<br>";
}
}
It works with the mime-type.
I am currently using SimpleXML to reading an xml file to generate my first array. This array displays a list of images that are found in a directory and written to xml file.
This has worked for me in the past until I upload new photos to the same album. I like to know what one does to get a complete list of images that got uploaded to the end of that first array. Any suggestions?
XML File:
<album>
<image path="/albums/1/images/100_4124.jpg" />
<image path="/albums/1/images/100_4307.jpg" />
<image path="/albums/1/images/100_4335.jpg" />
</album>
SimpleXML to get array:
$xml = simplexml_load_file('/albums/1/photos.xml');
foreach ($xml->image as $image) {
echo '<li><img src="'.$image.'"></li>';
}
What I am getting for my results:
<li><img src="/albums/1/images/100_4124.jpg"></li>
<li><img src="/albums/1/images/100_4307.jpg"></li>
<li><img src="/albums/1/images/100_4335.jpg"></li>
Scanning the directory for all images:
if ($handle = #opendir('/albums/1/')) {
$filenames = array();
while (false !== ($file = readdir($handle))) {
$ext = substr($file, strrpos($file, '.') + 1);
if ($file != '.' && $file != '..') {
$filenames[] = $file;
$total++;
}
}
}
closedir($handle);
foreach ($filenames as $filename) {
echo '<li><img src="'.$filename.'"></li>';
}
What I would like to get for results using both arrays:
<li><img src="/albums/1/images/100_4124.jpg"></li>
<li><img src="/albums/1/images/100_4307.jpg"></li>
<li><img src="/albums/1/images/100_4335.jpg"></li>
<li><img src="/albums/1/images/100_9000.jpg"></li>
<li><img src="/albums/1/images/100_9001.jpg"></li>
<li><img src="/albums/1/images/100_9002.jpg"></li>
The last 3 images that are missing from xml file would be added it to the end of the list.
Perhaps this would work for you?
<?php
$images = array();
foreach ($xml->image as $image) {
$images[] = $image;
}
foreach (array_diff($filenames, $images) as $image) {
$images[] = $image;
}
foreach ($images as $image) {
echo '<li><img src="' . $image . '" /></li>';
}
?>
This is assuming that $image from the $xml->image and $filename from your dir search are formatted the same. From what you've shown they are. If they aren't should be easy enough to run them through a quick regex to get them in a state where they are comparable.
Any who it looks like array_diff() is what you're looking for.
If you get a full list of the file names in the directory you could use PHP in_array and search for it in an array of your paths
$paths = array();
foreach ($xml->image as $image) {
$paths[] = $image['path'];
}
foreach ($filenames as $filename) {
if (!in_array($filename, $paths) {
$newImage = $xml->addChild('image');
$newImage->addAttribute('path', $filename);
}
}
// save adjusted xml file, assuming you have permission
$xml->asXML('/albums/1/photos.xml');
foreach ($xml->image as $image) {
echo '<li><img src="'.$image.'"></li>';
}