Images returning a 404 by the local apache server (Windows) about flynt

[steffenbew]

Oh no! I'll reopen this issue then and ask @domtra to help with it. He's out of office until the end of the week, but I'm sure he will look into this when he's back.

[domtra]

@suits-at great that this is also working for you! I would definitely be interested to hear about your results.
Will close this issue for now. Thanks for your efforts.

[suits-at]

Hi, I am having a similar issue. I am also on windows with a local apache server (xampp). I could already track down the issue to the dynamic image generation. When I comment out the line add_filter('Flynt/TimberDynamicResize/disableDynamic', '__return_true') in inc\timberDynamicResize.php it kinda works. I say kinda, due to it still uses jpg images, although I am using newest chrome, which should be able to use webp images. In the dynamic folder I can see that the webp images get generated. So for me it seems like the htaccess rewrite does not work properly.

[steffenbew]

If dynamic image generation fails on an apache server, I advise to flush the rewrite rules first, by going to Settings -> Permalinks in the WordPress backend.
If flushing the rewrite rules doesn't fix the 404 errors on images, I advise to disable the dynamic image generation in timberDynamicResize.php, like @suits-at explained.

Even if dynamic image generation is disabled, the webp image generation should still work. Please note that when looking at the Network requests in the Chrome DevTools, images will have a .jpg file extension, but enabling the Type column should show that a webp file is served.

[suits-at]

Thanks for the answer @steffenbew. I just tested your suggestion, but unfortunately the type in the type column is also .jpg. Do you have any idea why this could be? Or even better, do you have any idea why the dynamicResize isn't working in the first place?
Despite this minor issue working with flynt provides a very nice developer experience, thanks for the starter, I apreciate it very much :)

[domtra]

@suits-at i am working on a fix for the dynamicResize issues. there is a work in progress branch called dynamicResize. would you mind trying that out? i would be happy to get your feedback if the feature is then working for you.

and thank you for your appreciation!

[suits-at]

Thx @domtra for the effort. I tried the branch with the result that there are no 404 errors anymore, but the images served still have .jpg as file extension and in the "type" column of the network tab it is "jpeg". Webp images are still generated though.

[domtra]

@suits-at this is interesting. is the htaccess modified at all, when you toggle the webp general option?
if not, it is either not writeable, or you have permalinks set to plain. in the latter case, please change the permalinks to a different option, as custom rewrite rules do not work with plain wordpress urls.
you could also manually try to paste this code in your htaccess or vhost config:

# BEGIN Flynt dynamic images
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg and png
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On

# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp

# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
Header merge Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>\n
# END Flynt dynamic images

if webp still is not served by apache but the images are generated and can be found in uploads/resized, then you might be missing one of these apache modules:

• mod_setenvif
• mod_rewrite
• mod_headers
• mod_mime

you could run apachectl -M to get a list of all activated modules, for example.

let me know if you get any further with these tips. i hope we soon find a solution.

[suits-at]

Thx for your effort @domtra. I just spend two hours trying to brake the problem further down to its source. I tried it with the dynamicResice branch on one computer, and with your new release on another computer. Just in case there were any additional changes, but it seems they behave the same. Let me try to tell you my findings:

• toggling webp generation does trigger changes in .htaccess (it did cost me some time to find the newly added global option to do so though :P)
• as on both computers there are freshly installed versions of xampp, all mentioned modules are present and activated (double checked this with httpd.exe -t instead of apachectl -M due to I am on windows as mentioned earlier)
• setting webp generation to true does generate jpeg and webp images of the requested image in the resized folder
• the image is shown still is a jpeg image, with mime type jpeg in the network tab too
• also there is a 404 error in the console with the following path: https://127.0.0.1:3000/wordpress/post-name/1920w. I am not quite sure where this error comes from, as the path to this image is not part of the picture tag. As request initiatior chain i can see it comes from dist/assets/main.js. Also to mention: this only seems to occur on post detail pages. On single pages or the archive page, this 404 does not occur
• enabling dynamic image generation brings us to not showing any images at all, ending in an 404 error with the following url: https://127.0.0.1:3000/wordpress/wp-content/uploads/image-800x0-c-default.jpg and no resizes folder created. The requested img is not existing, due to in the /uploads directory there are only the images created from wordpress per default like the original image.jpg and the different sizes like image-150x150.jpg and so on...

Hope this helps finding the source of the problem. Let me know if you need any further testing.

[suits-at]

Quick Update from my side: I just installed the theme on a website running on a shared hosting. I tried switching the options regarding the Timber Dynamic Resize with this results:

• Dynamic Image Generation now works - no 404 errors, all images are showing up and only the ones requested get generated.
• WebP Support does (as before) generate the webp images, but imgs still all are jpg and also have .jpeg type in the type column inside dev tools.

So for me it seems the Dynamic Image Generation does not work on a local windows environment, and the webp support does not work at all. Can you confirm this @domtra? Or do you have any active installations with the newest flynt version with webp support running?

[suits-at]

Another small addition: I asked my webhoster for the earlier mentioned modules, and got the answer, that the following are available and activated:

• setenvif_module
• mime_magic_module
• mime_module
• rewrite and headers

[domtra]

@suits-at sorry for the long wait. The issues with webp generation have been haunting me in my sleep ;)
We are actually thinking about removing this feature again as it is causing issues on different setups and also for different use cases.
Could you please disable the WebP generation and try installing, enabling and setting up this plugin: https://de.wordpress.org/plugins/webp-express/?
We have had some good experience with it as it offers solutions for many different platforms and also has a lot of different strategies.
If you need help setting this up, feel free to reach out again.

[suits-at]

Hi @domtra, I just tried setting it up on my local windows machine and it seems to worke nice so far. I am impressed with all the given options; documentation is very well written too. Looks very promising, I will test it further (on a shared webhoster) and I will also do some performance tests. I happily will share my results with you, if you are interested. Looking forward to install this plugin on all my clients websites, thx for the recommendation! :)