Jump to content

Importing many pictures in a page


pwired
 Share

Recommended Posts

Hi
I have about 160 pictures that I want to use
in a bxSlider with a simple
foreach($page->images as $image) {
  echo "<img src='$image->url'>";
}


I can drag and drop the pictures in the backend
in a page with image field.
I was wondering if there is a faster or better
way to get such an amount of pictures in a page.

I have found this post in the forum but it would
need a way to loop through the pictures in a folder
inside the site folder.

https://processwire.com/talk/topic/197-import-images-from-file-system-using-the-pw-api/

Link to comment
Share on other sites

Here's one way to do it..

  • Create a folder 'tmp' in you /site/ directory.
  • Copy your images in there. Careful if your images are huge in size! You might run out of memory...
  • Run the following code in one of your template files...(this code could be further optimised..but you get the idea...)
$p = $pages->get(1419);//page where we want to save our images

//absolute path to a directory called 'tmp' within the site folder where we have our images
$dir = $config->paths->site . 'tmp';

//if we found the directory (here we use Standard PHP Library (SPL))
if (is_dir($dir)) {

  $directory = new RecursiveDirectoryIterator($dir, FilesystemIterator::SKIP_DOTS); 

  //iterate through each file in this directory
  foreach ($directory as $path ) {            

      set_time_limit(30);//we try to avoid timing out

      //Remove and delete invalid file types
      $validImagesExts = array('jpg', 'png', 'gif', 'jpeg');
      if($path->isFile() && !in_array($path->getExtension(), $validImagesExts)) {

          unlink($path);//we delete the invalid file
          continue; 

      }

      //if valid image file we save it to the page
      if($path->isFile()) {

          $p->of(false);//output formatting off
          $p->images_field->add($dir . '/' . $path->getFilename());
          $p->save();

      }

  }//end foreach

  $p->of(true);//output formatting on

}//end if (is_dir($dir)))

else echo 'No Such Directory Found!';
Edited by kongondo
Minor edits..
  • Like 5
Link to comment
Share on other sites

It's working but having so many pictures in a page takes a long time to open in a browser,

so I just want to have the pictures in a folder and use plane php in bxSlider.

I made a folder bxsliderpics in site/templates/, put there all the pictures

and tried following:

<ul class="bxslider">
<?php
 $dir = $config->paths->site . 'templates' . '/' . 'bxsliderpics' . '/';
 if ($handle = opendir($dir)) {
while (($file = readdir($handle)) !== false){
echo '<li>';
echo '<img src="' . $dir . $file  . '" />';
echo '</li>';
}
closedir($handle);
}
?>          
</ul>

Just to try if it's working I have put 3 pictures inside folder bxsliderpics, pic1.jpg, pic2.jpg, pic3.jpg

I have it almost working but for some reason the code is iterating first two times a dot

and then iterates the 3 pictures. I can't figure out what I am doing wrong.

I think there must be something wrong in the part echo '<img src="' . $dir . $file . '" />';

Link to comment
Share on other sites

if ($handle = opendir($dir)) {
    while (($file = readdir($handle)) !== false) {
        if (strpos($file, '.') === 0) continue; // <-- add this
        echo '<li>';
        echo '<img src="' . $dir . $file  . '" />';
        echo '</li>';
    }
..... etc....
There's nothing wrong with the code, it's just how folders work.

You could use strpos($file)as there's no need to include any files starting with a dot...

  • Like 1
Link to comment
Share on other sites

have a look to the examples of readdir

especially the #2.

And regarding the long page load in admin with many images, you may also use a InputfieldFile. This way you can use API but without waiting for 160 images to load there thumbnails.

Edited by horst
added possibilty for file field
  • Like 1
Link to comment
Share on other sites

Thanks Martijn and Horst. I can see in View Page Source that the php code is working perfectly now.

The first two iterations with . and .. are gone and it starts correctly with the first picture.

Only thing I have to solve now is that for some reason absolute paths don't seem to work

with bxSlider as it doesn't show the pictures yet.

Link to comment
Share on other sites

Maybe you can strip out $_SERVER['DOCUMENT_ROOT'] from the path:

$urldir = str_replace($_SERVER['DOCUMENT_ROOT'], '', $dir);
// echo '<img src="' . $dir . $file  . '" />';

echo '<img src="' . $urldir . $file  . '" />';  // or $urldir . "/" . $file   ??
Link to comment
Share on other sites

have a look to the examples of readdir

especially the #2.

And regarding the long page load in admin with many images, you may also use a InputfieldFile. This way you can use API but without waiting for 160 images to load there thumbnails.

Or turn off thumbnails on the image field.

  • Like 2
Link to comment
Share on other sites

You are not talking about the options tab where you can choose between Thumbnails and FullsizeImages, :lol: ??

I think it is not of any help for pwired to wait for 160 fullsize images get loaded instead of 160 thumbnails.

Edited by horst
  • Like 1
Link to comment
Share on other sites

Pffffff ah, yes correct, wasn't this ever different? Hm guess not lol. I must have been dreaming or experienced something else way back in the early days. Maybe it's just not reading the f***** description as the label doesn't suggest so: "Vorschaubilder im Seiten-Editor anzeigen?" :D

  • Like 1
Link to comment
Share on other sites

I have bxSlider finally working.

My mistake was in the path to the directory bxsliderpics that holds the pictures.

It has to be like this:

$dir = $config->paths->site . 'templates' . '/' . 'bxsliderpics';

Also I did not have the single quotes and double quotes right

Martijns example does work:

echo "<img src='{$config->urls->templates}bxsliderpics/{$file}'>";

Here is the complete code with bxSlider now working:

<div class="block-group">    
    <div class="bxsliderbox block">
       <div class="slideshow">
          <ul class="bxslider">

          <?php
          $dir = $config->paths->site . 'templates' . '/' . 'bxsliderpics';
          if ($handle = opendir($dir)) {
          while (($file = readdir($handle)) !== false){
          if (strpos($file, '.') === 0) continue; // <-- add this thanks to Martijn
          echo '<li>';
          echo "<img src='{$config->urls->templates}bxsliderpics/{$file}'>";
          echo '</li>';          
          }
          closedir($handle);
          }
          ?>          

          </ul>
       </div>

    </div>
    </div>

Thanks everybody for posting.

I can now upload many pictures and have them show up in bxSlider without using the backend.

Too many pictures will take a lot of time to show up in the browser and render the browser unstable

when having them in a "page" with an image field. But this way no problem.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...