I'm looking for a way to use the responsive image attribute 'srcset' alongside php. I'm currently using the following code in order to pick a random image from a directory on the server:
<?php
$dir = "img/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="img/<?php echo $images[$i]; ?>" alt="image">
I've created different versions of the images in the directory with a suffix (i.e., image-1-small.jpg, image-1-big.jpg ... image-2-small.jpg, image-2-big.jpg etc.).
How would I implement the srcset attribute into the php string? I'm looking for an output similar to this:
<img sizes="100vw" srcset="img/image-1-small.jpg 400w, img/image-2-medium.jpg 800w, img/image-1-big.jpg 1600w" src="img/image-1-small.jpg" alt="image-1">
Thanks!
You can try something like this:
<?php
$dir = "img/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
// Get image file name.
$image_name_full = $images[$i];
// Define display types.
$image_display_types = array("-small.jpg", "-medium.jpg", "-big.jpg");
// Remove image display type from image name.
$image_name = str_replace($image_display_types, "", $image_name_full);
?>
<img sizes="100vw" srcset="img/<?php echo $image_name; ?>-small.jpg 400w, img/<?php echo $image_name; ?>-medium.jpg 800w, img/<?php echo $image_name; ?>-big.jpg 1600w" src="img/<?php echo $image_name; ?>-small.jpg" alt="<?php echo $image_name; ?>">
Related
I want to shuffle 2 loops (or function) in the same correct order, in PHP.
The code currently looks like:
<div class="overlay">
<?php
// Get the list of all files with .jpg extension in the directory and save it in an array named $images
$directory = "uploads/_gallery/*.jpg";
// Create an array of images found in the uploads directory
$images = glob($directory);
// Randomise/shuffle the images
shuffle($images);
foreach( $images as $image ):
if ($image) { ?>
<div class="slide">
<?php echo "<img src='" . $image . "'>"; ?>
</div>
<? }
endforeach;
?>
</div>
<div class="grid">
<?php
// Get the list of all files with .jpg extension in the directory and save it in an array named $images
$directory = "uploads/_gallery/thumbs/*.jpg";
// Create an array of images found in the uploads directory
$images = glob($directory);
// Randomise/shuffle the images
shuffle($images);
foreach( $images as $image ):
if ($image) { ?>
<figure class="unit_25">
<?php echo "<img src='" . $image . "'>"; ?>
</figure>
<? }
endforeach;
?>
</div>
I've tried creating two separate image arrays and merging those with Shuffle, but no luck.
I assume the file has the same name in both directory.
So shuffle $images and then use basename($images) to get the filename :
$directory = "uploads/_gallery/*.jpg";
$images = glob($directory);
shuffle($images);
// For full sized images
foreach ($images as $image) {
// Your stuff
}
// For thumbnails
foreach ($images as $image) {
$basename = basename($image);
$thumbnailPath = "uploads/_gallery/thumbs/". $basename;
// Your stuff
}
how to show thumb folder images in php
i have a folder name albums
and in album each folder have photos & thumb folder photos
example
uae/thumb/1.jpg
uae/1.jpg
uk/thumb/1.jpg
uk/1.jpg
usa/thumb/1.jpg
usa/1.jpg
and my code is showing this photos only
usa/1.jpg
uk/1.jpg
uae/1.jpg
and i want to show only thumb photos
usa/thumb/1.jpg
uk/thumb/1.jpg
uae/thumb/1.jpg
how can i do this
please help me to fix this issue
thanks in advance
here is code
<?php
//path to directory to scan. i have included a wildcard for a subdirectory
$directory = "albums/*/";
//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");
array_multisort(array_map('filemtime', $images), SORT_DESC, $images);
?>
<?php $num_of_files = 0; $i=0; foreach ($images as $image):?>
<div class="item"><a href="<?php echo basename(pathinfo($image, PATHINFO_DIRNAME)); ?>.html" target="_blank">
<img class="lazyOwl" src="<?php echo $image ?>" />
<p><?php echo basename(pathinfo($image, PATHINFO_DIRNAME)); ?></p>
</div>
<?php if (++$num_of_files == 3)break; ?>
<?php if(++$i%3==0): ?>
<?php endif ?>
<?php endforeach ?>
Adjust your directory path:
$directory = "albums/*/thumb/";
//get all image files with a .jpg extension.
$images = glob($directory . "*.jpg");
... or try using SPL tools:
$directory = new RecursiveDirectoryIterator('albums/*/'); // or ('albums/*')
$iterator = new RecursiveIteratorIterator($directory);
$images = new RegexIterator($iterator, '/thumb\/\(.jpe?g|.png)$/i', RecursiveRegexIterator::GET_MATCH);
$images = iterator_to_array($images);
...
// iterating over $images
I have a script to cache images locally. It works perfectly;
<?
$image = file_get_contents("$bg");
$filename = basename($bg);
file_put_contents("images/$filename", $image);
?>
<img src="<? echo $bg; ?>"><br>
However, I want my script to use the local image in the img tag if it's already downloaded and present in my folder. If the image isn't already downloaded, then save the external image and then use the local image.
In other words; Check if the image is already in the folder, if it's not - then download it and display the local file. If it's already in the folder, just display the local image without downloading the image again.
You can test the existance of file with file_exists function please see documentation :
http://php.net/manual/fr/function.file-exists.php
<?php
$filename = basename($bg);
if(!file_exists($filename))
{
$image = file_get_contents("$bg");
file_put_contents("images/$filename", $image);
}
?>
<img src="images/<?php print $filename?>"><br />
You can use file_exists():
<?php
$filename = basename($bg);
if(!file_exists("images/$filename")){
// we don't have it, Cache it first
$image = file_get_contents("$bg");
file_put_contents("images/$filename", $image);
}
?>
<img src="<? echo $bg; ?>"><br>
You can use file_exists function to check already exits or not.
Try example
<?php
$filename = basename($bg);
if(!file_exists($filename))
{
$image = file_get_contents("$bg");
file_put_contents("images/$filename", $image);
}
?>
<img src="images/<?=$filename?>"><br>
this is the code in order to display a random image on my website,
but for some reason the images are not popping up and there is an error on the line where $rand_image was declared. The error says undefined index. I have 7 images in the directory.
$imagesDir = '\socimages\Badminton'; // my image directory
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); // glob
$rand_image = $images[array_rand($images)]; // applying the random function
...
...
<img src="<?php echo $rand_image[0];?>"< alt="" height="246" width="246"></p></div>
$rand_image is the image already you don't need $rand_image[0];
<img src="<?php echo htmlspecialchars($rand_image);?>"< alt="" height="246" width="246"></p></div>
Also, $rand_image will probably be the path on disk, not the web accessible path so you'll need to map it.
I'd do something like this.
$imagesDir = '/socimages/Badminton/'; // my image directory
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); // glob
if ($images !== FALSE) {
$rand_image = $images[array_rand($images)]; // applying the random function
} else {
die("This thang ain't working, yo.");
}
...
...
<img src="<?php echo $rand_image;?>"< alt="" height="246" width="246"></p></div>
I am generating zoom, thumbnail, and preview images for some images. Some images are saved without their extension. When I am displaying in the image gallery, images without extension are not zooming. This is because the lightbox which we are using is expecting a .jpg extension for images. So the images are not zooming when clicking on it. Zooming on images with the extension are ok.
For this I am appending the .jpg extension like the code below, but it is not working.
<?php foreach($images as $line):
$image_info = pathinfo($line['big']->filename);
if(!array_key_exists('extension', $image_info))
{
$zoom_file = $line['big']->filename."?ext=.jpg";
}
else
{
$zoom_file = $line['big']->filename;
}
?>
<li>
<a href="<?php echo $media_cdn.$zoom_file?>">
<img src="<?php echo $media_cdn.$line['normal']->filename ?>"
width = "200px" alt="image" />
</a>
</li>
<?php endforeach;?>
This should get you pointed in the right direction...
$image = $from->somewhere;
$ext = strtolower(end(explode(".", $image)));
$image = ($ext != "jpg") ? $image.".jpg" : $image;
edit
I don't believe this line is correct:
$zoom_file = $line['big']->filename."?ext=.jpg";
Perhaps it should be:
$zoom_file = $line['big']->filename.".jpg"; ?