Jump to content

[SOLVED] 403 Forbidden when loading images from folder


jploch
 Share

Recommended Posts

Hi folks!

For a website Iam working on I need to (pre)load a huge amount of images (100-500) from a folder in assets (wich I upload via FTP).

To preload them I want to add them to the DOM inside a container, that I hide with css.
This images will be use for a frame by frame animation (that animates with scrolling) so they should be loaded parallel and if the user clicks a cancel button, the loading should be canceled. (My website is using ajax to load pages with different animations, and the loading of the second animation waits till the loading of the first animation is loaded completly, wich I want to prevent). 

I want to use ajax to do this, so I can cancel the loading with xhr.abort();

Here is my code:

var folder = '{$config->urls->assets}sequenzen/test/';

xhr = $.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $(".preloader").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

this will give me a 403 forbidden error.
After some research I found out that I have to put a .htaccess in my assets folder.
I also tried putting it in the sub folder "test", where the files are, but Iam still getting the error.

Is there anything else Iam missing? Is there a configuration in PW i have to change to do that?

Link to comment
Share on other sites

PW blocks direct access to PHP files within /site/

Alternatives are to place your PHP file outside of /site/ (e.g. in the root directory) or to use a PW template/page to respond to your AJAX request. The latter would be nice solution in this case because you could use an images field in the template to hold your animation images.

  • Like 2
Link to comment
Share on other sites

thx! I put the files in the template folder and still get a 403.
With commenting the following line in .htaccess (in root) it works:


Block access to any PHP or markup files in /site/templates/

# RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))$ [OR]

are there any security risks in doing this?

Link to comment
Share on other sites

Because of the huge amount of images I used a file Field on a page to store the images, which is working nicely!
Now I only have the problem that I want to sort the files alphabetically/numerical.
My files are named like this: 

file_0.jpg
file_1.jpg
file_2.jpg


I have this wich is not working:

$sortetFiles = $item->sequenz_files->sort('name');
       foreach ($sortetFiles as $key => $file) {   
   echo "<img src='{$file->url}'>";
}

 

Link to comment
Share on other sites

sorry for the late response.

Iam still struggling with the sort order.
With this the images are in the wrong order:

$sortetFiles = $item->sequenz_files->sort('name');
       foreach ($sortetFiles as $key => $file) {   
   echo "<img src='{$file->url}'>";
}


Output:

<img src='0.jpg'>
<img src='1.jpg'>
<img src='10.jpg'>
<img src='100.jpg'>
<img src='101.jpg'>
<img src='102.jpg'>
.....

maybe I need to rename the Images, like 000, 001, 002, etc.?

Link to comment
Share on other sites

  On 11/17/2017 at 12:33 PM, jploch said:

maybe I need to rename the Images, like 000, 001, 002, etc.?

Expand  

If you can control the naming of the images then that is an easy solution.

Otherwise you need to do natural sorting of the files array. Something like:

$files_array = $item->sequenz_files->getArray();
natsort($files_array);
// Now foreach $files_array

// And if you need the files as a Pagefiles object for some reason
$pagefiles = new Pagefiles($item);
$pagefiles->import($files_array);
// Now foreach $pagefiles

 

  • Like 2
Link to comment
Share on other sites

thanks Robin and Adrian!!
Robins solution worked for me.

Here is my final Code, with loading and sorting the files and converting them to an PageImage so that I can resize them later (if needed) :)
This Example also uses lazysizes to load the images. Maybe this helps someone:

$files_array = $item->sequenz_files->getArray();
natsort($files_array);

// And if you need the files as a Pagefiles object for some reason
$pagefiles = new Pagefiles($item);
$pagefiles->import($files_array);
// Now foreach $pagefiles
        $si = 0;
       foreach ($pagefiles as $imagefile) {
         if($imagefile->ext == 'jpg'){
         $si++;
// create a new Pageimage with the file
        $preloaderImage = new Pageimage($item->images, $imagefile->filename);
        echo "<img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-src='{$preloaderImage->url}' class='{$si} lazyload' />";
    }
       
}

 

  • Like 2
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

×
×
  • Create New...