Resized image sometimes not showing up

[RicknRoller]

Hi there!

I am quite new to processwire and am just finishing my first PW project. I think the whole framework is awesome and could profit a lot from all the tutorials available. One thing that I somehow can't seem to get my head around is working with images and their resizing. I have following scenario:

A 'gallery-index' page with its 'gallery' children. Those children have an 'images' field where the user uploads his (often too big) images.

I am working with twig. On the gallery page frontend I have a slider, a displayed collection of all the images and a hidden one where I get the source to the original image in a popup. So in total the images will be outputted 3 times in different sizes.

First:

<div id="slick">
    {% for img in page.images %}
        <img src="{{ img.height(400).url }}" alt="">
    {% endfor %}
</div>

Second:

<div class="gallery">
    {% for img in page.images %}
        <img src="{{ img.width(300).url }}" alt="">
    {% endfor %}
</div>

Third:

<div class="hidden">
    {% for img in page.images %}
        <a href="{{ img.maxWidth(1024).url }}" data-original="{{ img.url }}"></a>
    {% endfor %}
</div>

Now, the loops basically work, and some images are displayed the right way. But not all of there are displayed at all, despite them being there in the DOM. The urls all look right but some will be displayed and some url just go to a small black box image. How comes that PW manages to have different results in displaying the images in different formats?

URL of gallery: http://2019.hclaupersdorf.ch/fotos/hc-laupersdorf-vs-ruschlikon-chiefs/ (there are more in the DOM than displayed)
URL of 'not working' image: http://2019.hclaupersdorf.ch/site/assets/files/2361/20180616-rueschlikon-21_42049612175_o.300x0.jpg

Furthermore, whenever this error occurs (which usually is at every page request on the gallery page), the DOM doesn't fully load. My JS for init the slider or the popup won't be loaded and the page is basically displayed half-loaded.

Any ideas or suggestions on how to work around it, best practice when handling images & galleries?

Thanks!

[dragan]

When I inspect your page, no JS is being loaded at all. This doesn't have to do with PW per se. You're responsible for handling all the frontend assets correctly. (when I say "you", I mean the site-developer. The CMS just delivers what you tell it to.)

Go back to the drawing board and make sure your HTML, CSS + JS setup is correct. Perhaps there's a missing include() or you've disabled a prepend or append .php file?

[RicknRoller]

14 minutes ago, dragan said:

When I inspect your page, no JS is being loaded at all. This doesn't have to do with PW per se. You're responsible for handling all the frontend assets correctly. (when I say "you", I mean the site-developer. The CMS just delivers what you tell it to.)

Go back to the drawing board and make sure your HTML, CSS + JS setup is correct. Perhaps there's a missing include() or you've disabled a prepend or append .php file?

Yes, the page doesn't fully load. Something goes wrong somewhere.

I restored my previous testgallery to show how it should work: http://2019.hclaupersdorf.ch/fotos/testgallery-iron-maiden/

I figure it has something to do with the images in the gallery being to many (33) or too large?

Thank you ?

[dragan]

13 hours ago, RicknRoller said:

I figure it has something to do with the images in the gallery being to many (33) or too large?

No. In your Iron Maiden test gallery you load 4 JS files. You don't load them in your gallery you referred to in your first post. Check your template setup, your include/require setup etc. and make sure all frontend assets (css/js) are being loaded in your page(s).

[RicknRoller]

I am aware that the scripts are not loaded in the faulty gallery. The template is the same as in the working one, just the content in the page field 'images' is different. It is just as if php stopped working while executing and then omits further rendering of the DOM. There should also be a footer and many more scripts, it just kind of aborts the PHP at a certain point.

[Autofahrn]

@RicknRoller, did you check the server response for these damaged images? Its always 42 bytes for exactly this string: This is intentionally invalid image data.

Since the server replies with 200 I guess this is the content of the converted image file (you may want to check the folder /site/assets/files/2361/ for example).

If the file on your server is correct, then I'd check nginx, if the file contains this string, there is an issue with image conversion for some reason. Sounds like some sort of shareware limitation...