Jump to content
RicknRoller

Resized image sometimes not showing up

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites
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 🙂

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
×
×
  • Create New...