Importing many pictures in a page

[pwired]

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/

[kongondo]

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 November 26, 2014 by kongondo
Minor edits..

[pwired]

Thanks for the code examples, will try this tonight.

[pwired]

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 . '" />';

[Martijn Geerts]

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...

[horst]

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 November 27, 2014 by horst
added possibilty for file field

[pwired]

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.

[horst]

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   ??

[Martijn Geerts]

or use:

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

[pwired]

Thanks for posting your code examples, I just came home and can't wait to try them out.

[Soma]

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.

[Martijn Geerts]

Or turn off thumbnails on the image field. 

When there are 6 simultaneous requests a browser can handle, 160 requests for a slider is just insane, thumbnail or original.

I would say go for Horst's way and for front-end: AJAX to the rescue. Or don't do it at all.

[horst]

Or turn off thumbnails on the image field.

@Soma: How can it be done?

[Soma]

@Horst like what? Turn off thumbnails?

Martin how about lazy load?

@horst actually you have to turn them on in the first place.

[horst]

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

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

Edited November 27, 2014 by horst

[Soma]

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

[kongondo]

@Soma, I am taking back my like in that case 

[Soma]

@Soma, I am taking back my like in that case 

ROFL. (some text to get around posting guidance legals and says something meaningful) 

[kongondo]

<ot>Now that's unfair...I have given you 2 likes in the space of 30 minutes; one for 'being wrong' (which is rare in itself) and one for 'laughing'      </ot>

[pwired]

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.

[Soma]

@Soma: How can it be done?

Maybe set maximum width and height to 0?

[kongondo]

This

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

Can be changed to this

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

[pwired]

I thought yours was not an absolute path

but yup, just tried it, it's also working.

[kongondo]

It's all here: http://processwire.com/api/variables/config/ $config->urls->abc return http paths; $config->paths->abc return absolute ones

Edited November 27, 2014 by kongondo

[Martijn Geerts]

Martijn how about lazy load?

I forgot hat one.