Reputation: 727
Extracting images based on ID
I have a slider (flexslider) that i'm using to display images in the form shown in the below jsfiddle... I optimized the slider so that it extracts images dynamically from a certain directory. It worked and all images are being extracted. Now in my folder images are named as 1023 , 2045 , 304654, 50 etc... How can i specify that images that start let's say with "1" (can be 14 , 1040,10000.100000 etc...) are the ones only extracted?
Update (more clarification): the reason i'm extracting based on the first digit of the name of each image, is that because i'm going to use the slider in all the elements of my menu. So that if i click on element "aaaa" images that start with 1 appear, if i click on "bbbbbb" images that start with 2 appear, and so on.
JSFIDDLE: https://jsfiddle.net/atkumqpk/1/
PHP code:
function get_slide_images($folder, $images_per_slide = 10)
{
$slide_images = false;
if (file_exists($folder)) {
// valid extensions
$extensions = array(
"jpg",
"gif",
"jpeg",
"svg",
"png",
"bmp"
);
foreach (new DirectoryIterator($folder) as $file_key => $file) {
// Don't bother
if (!in_array($file->getExtension(), $extensions)) {
continue;
}
// Grab file details
$filename = $file->getFilename();
$file_folder = $folder . "/" . $filename;
// Store the image to the Slide
$slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />";
}
if (!empty($slide_images)) {
ksort($slide_images);
$slide_images = array_chunk($slide_images, $images_per_slide);
}
}
return $slide_images;
}
//end of php
<div id="logo" class="logo" ><img src="logo.png"/></div>
<p class="custom-class"><a href="">Go to the main website</a></p>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1">
<button>aaaaaaaa</button>
</li>
<li id="item2">
<button>bbbbbbb</button>
</li>
<li id="item3">
<button>ccccccc</button>
</li>
<li id="item4">
<button>dddddddd</button>
</li>
<li id="item5">
<button>eeeeeee eee.</button>
</li>
<li id="item6">
<button>ffffff</button>
</li>
<li id="item7">
<button>ggggggg</button>
</li>
</ul>
</div>
<div id="container">
<div id="first" class="inner-container">
<div id="item11" class="item"> <a name="item11"></a>
<div class="flexslider">
<ul class="slides">
$slider_kvp = get_slide_images("images", 10);
/**
* Here we are going to generate the SLIDES
*/
if($slider_kvp) {
$slider_list_html = array();
foreach($slider_kvp as $slider_key => $slide_images) {
$html_LI_list = "";
$html_LI_list = "<li>";
// Go through each image ...
foreach($slide_images as $image_key => $image_value) {
$html_LI_list .= $image_value;
}
$html_LI_list .= "</li>";
$slider_list_html[$slider_key] = $html_LI_list;
}
// OUR SLIDES!
$rendered_slider_list_html = implode(' ', $slider_list_html);
echo "<ul class='slides'>{$rendered_slider_list_html}</ul>";
}
</ul>
</div>
</div>
</div>
<div id="second" class="inner-container">
<div id="item22" class="item"> <a name="item22"></a>
<div class="flexslider">
<ul class="slides">
$slider_kvp = get_slide_images("images", 10);
/**
* Here we are going to generate the SLIDES
*/
if($slider_kvp) {
$slider_list_html = array();
foreach($slider_kvp as $slider_key => $slide_images) {
$html_LI_list = "";
$html_LI_list = "<li>";
// Go through each image ...
foreach($slide_images as $image_key => $image_value) {
$html_LI_list .= $image_value;
}
$html_LI_list .= "</li>";
$slider_list_html[$slider_key] = $html_LI_list;
}
// OUR SLIDES!
$rendered_slider_list_html = implode(' ', $slider_list_html);
echo "<ul class='slides'>{$rendered_slider_list_html}</ul>";
}
</ul>
</div>
</div>
</div>
Upvotes: 11
Views: 288
Answers (4)
Reputation: 4812
Isn't the solution to this not just filtering it out on the server-side?
To make the function a bit more flexible (instead of filtering just '1'):
<?php
function get_slide_images($folder, $images_per_slide = 10, $pattern = "")
{
$slide_images = false;
if (!file_exists($folder))
return $slide_images;
// valid extensions
$extensions = array(
"jpg",
"gif",
"jpeg",
"svg",
"png",
"bmp"
);
foreach (new DirectoryIterator($folder) as $file_key => $file) {
// Don't bother
if (!in_array($file->getExtension(), $extensions))
continue;
// Grab file details
$filename = $file->getFilename();
if ($pattern && !preg_match($pattern, $filename))
continue;
$file_folder = $folder . "/" . $filename;
// Store the image to the Slide
$slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />";
}
if (!empty($slide_images)) {
ksort($slide_images);
$slide_images = array_chunk($slide_images, $images_per_slide);
}
return $slide_images;
}
and you can now run it with:
get_slide_images('images',10,'/^1/'); // get everything starting with 1
get_slide_images('images',10,'/^1234/'); // get everything starting with 1234
hope this is what you're looking for.
Upvotes: 4
Reputation: 10122
There are various ways of achieving this, but one way would be to filter the filenames your function is iterating through. Instead of the foreach (new DirectoryIterator($folder) as $file_key => $file) { ... } block, you could do something like:
foreach (glob($folder.'/'.'1*') as $filename) {
$slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";
}
The glob bit matches everything inside $folder that starts with "1" (you could also limit it to, say, PNGs by specifying, eg. "1*.png")
This has the advantage of only looking at the files you actually want, which is more efficient than the alternative approach of iterating through everything and looking at its filename.
Update: if you want to be able to change the "starts with" filter (so it's not always "1"), you can add an extra argument to your function, like so:
function get_slide_images($folder, $images_per_slide = 10, $starts_with = '') {
...and then change the foreach part (above) so it uses it:
foreach (glob("{$folder}/{$starts_with}*") as $filename) {
...then you can call your function like this:
$slider_kvp = get_slide_images("images", 10, "1");
...where the third argument ("1") specifies what the files you want should start with. (If you call the function without a third argument, you'll get all files in the folder, as you currently do). So your get_slide_images function might look something like:
function get_slide_images($folder, $images_per_slide = 10, $starts_with = '')
{
$slide_images = false;
// valid extensions
$extensions = array(
"jpg",
"gif",
"jpeg",
"svg",
"png",
"bmp"
);
// Implode the extensions array into a string:
$extensions = implode(',', $extensions);
if (file_exists($folder)) {
// Get all the files with a valid extension in $folder:
// (optionally filtered by $starts_with)
foreach (glob($folder.'/'.$starts_with.'*.{'.$extensions.'}', GLOB_BRACE) as $filename) {
$slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";
}
if (!empty($slide_images)) {
ksort($slide_images);
$slide_images = array_chunk($slide_images, $images_per_slide);
}
}
return $slide_images;
}
Upvotes: 13
Reputation: 1219
in the php I'd just check
if ("1" !== substr($filename, 0, 1)) {
continue;
}
during the DirectoryIterator
Upvotes: 3
Reputation: 167192
If you need a condition to check:
<?php
function starts_with ($filename, $start)
if (substr($filename, 0, 1) == $start)
return true;
return false;
}
?>
Upvotes: 4
Related Questions
- PHP - extract image paths from css
- Return all matching css from string
- Extract image names in HTML into an array
- Php simple html dom extracting certain img
- Extracting images in a certain way
- How to extract an image from a html code
- extract image elements from html
- extracting image tag from a html code in php
- How do I gather images from a website including any referenced in CSS files?
- What's the best way to extract links to images from CSS files with PHP?