===================================================================
# #
# #
# #
# N O T E S & T O D O S #
# #
# ===================================== #
# #
# Nevma (info@nevma.gr) #
# #
# #
# #
===================================================================
NEXT DEVELOPMENT NOTES
======================
***
- DOCUMENTATION AND NEW SCREENSHOTS
MENTION THAT YOU CAN NOW DEBUG NICELY IN FIREFOX DEVELOPER TOOLS IN RESPONSIVE DESIGN MODE TOO
ONLY WORKS WITH THE IMG ELEMENT SO FAR
CAN IT COOPERATE WITH LAZY LOAD PLUGINS?
=> NATURALLY YES, BUT IN CDN MODE IT NEEDS SOME TINKERING!!!
READFILE MAY CAUSE PHP PROBLEMS WITH BIGGER FILES
=> DETECT IF XSENDIFLE MODULE IS INSTALLED AND USE IT
http://stackoverflow.com/questions/12233386/php-how-to-find-out-if-x-sendfile-is-available-and-installed
=> θα μπορούσες να έχεις ένα συγκεκριμένο δικό σου sample image μέσα στο plugin, κι όταν ζητείται αυτό να το στέλνεις πάντα, αποκλειστικά και μόνο με xsend οπότε είτε το παίρνεις με xsend, είτε 404
=> Στο htaccess αυτά:
XSendFile On
XSendFileAllowAbove On
SetEnv MOD_X_SENDFILE_ENABLED 1
Κι έπειτα από PHP:
if ($_SERVER['MOD_X_SENDFILE_ENABLED']) {
Header(...)
}
--- Πάντως διάβασε το module documentation, π.χ.
Removed Configuration directive: XSendFileAllowAbove
Use XSendFilePath instead.
πάντως δεν έχει πολύ νόημα, γιατί είπαμε ότι το xsendfilepath setting πρέπει να μπει στο apache config. Τι ποσοστό χρηστών ξέρουν και θα το κάνουν αυτό.
--- Επίσης, το Xsendfile έχει διαφορετική υλοποίηση σε Apache, Litespeed, NginX, οπότε όπου δεν είμαστε σίγουροι ίσως είναι καλύτερο να μείνει εντελώς εκτός.
- WPENGINE
https://wpengine.com/support/mask-image-url/
"we use NGINX to serve static files like images. It’s one of the key ingredients"
- BUT WORKS WITH WP-ROCKET!
- ALSO problematic setup
Case where a CDN is using a different subdomain for images like
https://www.thetimethespace.com/
https://images.thetimethespace.com/
- NON DEFAULT WP-CONTENT DIRECTORY
- PLUGINS FOLDER RENAME
- CANNOT WORK WITH A CDN ON A DIFFERENT SUBDOMAIN
- CANNOT WORK WITH A CDN AND CSS BACKGROUND IMAGES
- CANNOT WORK WITH A CDN AND PICTURE ELEMENT
- AN IDEA: RESIZE IMAGES AND KEEP THEIR RATIO BASED -NOT ON THEIR WIDTH- BUT THEIR HEIGHT. PUT THIS AS A SETTING.
- HAVE A DEBUG MODE WHERE ALL IMAGE REQUESTS AND HOW THE PLUGIN HANDLED THEM ARE LOGGED.
- Notify the main plugin "somehow" when the resolution cookie is not there at all
(for cases where it might have been stripped away)
- IMMEDIATELY CHECK IF PLUGIN ACTUALLY WORKS
AND REPORT THE POSSIBLE PROBLEMS, IF ANY
Pedro.Frota:
Long story short: since Adaptive Images works in such a transparent manner, one big question for users is
whether or not it is indeed working. IMHO a visual feedback is the best solution.
- WORDPRESS VIRTUALLY IN A SUBDIRECTORY:
When WordPress is virtually in a subdirectory, the htaccess file of the root directory should only contain the
code necessary to route all requests to the subdirectory and all the rest of extra code should go into the
htaccess file of the subdirectory itself.
This is necessary for stability and containment.
OR:
The WordPress address url and the Site address url in /wp-admin Settings > General should both be the same and not
contain the subdirectory!!! <<< !!! *** !!!
NEXT DEVELOPMENT NUMBERED
=========================
***
1. CDN/CACHING SERVERS SUPPORT
- Images in CSS are not handled
- HTML replace image src server side
- Then add resolution url parameter browser side on DOMContentLoaded
- Slight SEO issue because images have no src attribute
- Use tags for images
(for users who don't have JavaScript enabled and search engine bots)
- Link to your images. The img src or in a hidden href or smth.
- Watch DOM for changes and catch newly inserted images
2. PERIODIC CALCULATIONS
- Daily cache calculation
- Show mean image value in cache
- Report it in plugin settings metaboxes
- Report it in email
- Report as an admin message
- Report in a dashboard widget
3. NEW SETTINGS
- Detect if PNGs have transparency and
Either leave them be
Or crunch them with their transparency intact if possible
- See:
- http://stackoverflow.com/questions/5495275/how-to-check-if-an-image-has-transparency-using-gd
- http://www.jonefox.com/blog/2011/04/15/how-to-detect-transparency-in-png-images/comment-page-1/
- http://camendesign.com/code/uth1_is-png-32bit
- Transform PNGs to PNG8 (or not?)
- PNG colour depth to keep
- Resize equal to a device's multiple size, eg 150%, for better quality but not full retina
- Exceptions for ceimages
- Crunch original images and the registered thumbnails!
- Allow debug or not
- Periodically cleanup cache
- Periodically cleanup cache old files (only the fresh ones are usually necessary)
- Analytic, per breakpoint, cache report.
4. WP MULTISITE SUPPORT
5. WP CONTENT OUTSIDE OF WORDPRESS INSTALLATION
(Is it possible to be totally outside? Not just be renamed.)
6. DEBUG IDEAS
- Put a text input for the use to enter an image url and show it via adaptive images
- Parse the result of an image with the ?debug=true to check if all is ok
- Load a pseudo template file in the browser where you can test frontend stuff that need javascript
- Echo the contents of the htaccess file part along with the other settings dump
- Put a "help me, i do not know how to test if the plugin works" section
7. TESTS/COMPATIBILITY
- VAGRANT environment problem
See https://wordpress.org/support/topic/images-never-generate-in-cache
and https://github.com/wpengine/hgv
- NextGEN
- WP-Rocket
- W3 Total
- WP Super Cache
- Hyper Cache
- Autoptimize plugin
- How much is the storage overhead of the cache for a big site!
8. PLUGINS FOLDER RENAME
Forum thread: https://wordpress.org/support/topic/hardening-wordpress-breaks-this-plugin/
define(‘WP_PLUGIN_DIR’, ‘/home/username/public_html/wp-content/newpluginname’);
define(‘WP_PLUGIN_URL’, ‘http://www.website.com/wp-content/newpluginname’);
9. WORDPRESS VIRTUALLY IN A SUBDIRECTORY (case 2):
The WordPress address url and the Site address url in /wp-admin Settings > General should both be the same and
not contain the subdirectory!!!
ie
WordPress Address (URL) >> https://www.mysite.com/wp
but
Site Address (URL) >> https://www.mysite.com
Which messes up the get_home_path() function and reports as WordPress home the absolute root folder of the
installation and not the /wp folder and thus writes into the root folder's htaccess file.
10. DOCUMENTATION
- A website
- A diagram of how the plugin works graphically
Browser : Hey, server, could you send me awesome-summer-picture.jpg?
Server : Yeah sure, just one thing, what are your screen dimensions?
Browser : Oh, OK, I'am in a 320x568 retina screen device!
Server : Great, so I will shrink the image as close to 320px.
Browser : No problemo!
Server : That will be a 480px image according to my configuration. Here you go!
Browser : Got it! Whoah, that was quick, thank you very much...
Server : Any time!
- If you want to provide crystal clear full size images to your users, DO NOT USE THE PLUGIN !!!
- I must provide an easy ad hoc way for users to override the resize wherever necessary
(perhaps via the ?resolution=original url parameter)
- Have a clear and complete "features" section
- Getting started section
- Prerequisites section
- PHP GD
- Writeable file system
- Cookies
- CDN not strip url parameters
- What-could-go-wrong section for usual problems.
- A website
- Tools which do emulate a mobile screen (Webpatetest.org) and tools which don't (GTmetrix, Pingdom)
- Chrome Developer Tools, Firebug
- Make a video of the testing procedure
- An extra way to test is by adding the ?resolution= parameter to an image url
- Better "How to test" that the plugin actually works.
- Reduces the need for responsive images only down to cases where art direction is required
- Contact major managed hosting providers so that they might give you demo accounts to test the plugin in their
environments (pressidium, flywheel, wpengine, etc)
- NGINX SETTINGS
https://wordpress.org/support/topic/nginx-10?replies=3
https://wordpress.org/support/topic/rules-for-nginx?replies=15
location assets {
}
location cache/adaptive-images { *** THE CACHE DIR INSIDE /wp-content ***
}
location / {
rewrite \.(?:jpe?g|gif|png)$ /adaptive-images-script.php; *** THIS IS THE PHP SCRIPT ***
}
https://shopplugin.net/kb/nginx-rewrite-rule/
==SOLUTION==>
location / {
try_files $uri $uri/ /index.php?$args;
^^^ Usual Nginx WordPress permalinks rewrite
rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;
^^^ Addition for Adaptive Images
}
<==SOLUTION==
But this also worked:
https://wordpress.org/support/topic/plugin-not-working-nginx/
location ~ /wp-content/(themes|uploads) {
rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;
}
WP Engine
Thread id (Alex Hildebrand) https://help.wpengine.com/hc/en-us/requests/1125237
location ~ \.(jpe?g|gif|png) {
proxy_pass http://localhost:6789;
}
Also made a note of this in the forum: https://wordpress.org/support/topic/wp-engine-setup-instructions-for-adaptive-images/
- MENTION SECURITY, WHICH IS A MAJOR CONCERN
- MENTION THE 4 DIFFERENT WORDPRESS SETUP SCENARIOS THAT WE ARE TESTING AGAINST.
- Lighthttpd reports Request URIs differently
https://wordpress.org/support/topic/problem-with-lighttpd/#post-9105596
2017-05-06 15:42:29: (response.c.339) -- splitting Request-URI
2017-05-06 15:42:29: (response.c.340) Request-URI : /wp-content/uploads/2017/04/00430012.jpg?debug=true
2017-05-06 15:42:29: (response.c.341) URI-scheme : http
2017-05-06 15:42:29: (response.c.342) URI-authority : fisher.photography
2017-05-06 15:42:29: (response.c.343) URI-path (raw) : /wp-content/uploads/2017/04/00430012.jpg
2017-05-06 15:42:29: (response.c.344) URI-path (clean): /wp-content/uploads/2017/04/00430012.jpg
2017-05-06 15:42:29: (response.c.345) URI-query : debug=true
*** The Martino case:
Url is like http://clients.nevma.gr/~user/
The installation home is like /home/users/username/public_html
But the requested URIs are like ---> /wp-content/uploads/2015/08/...
and not like -> /~user/wp-content/uploads/2015/08/...
*** The Jörg case:
Images are served via a subdomain, so as to maximize browser connections,
but they are actually still in the usual server dirs.
This is one edge case where the plugin cannot serve them,
since the images are not served by the same WordPress installation,
neither are they served by a CDN or Varnish!
*** Monetisation
Ads (third-party) in the sidebar.
Replace original images and provide a service that stores the originals just in case!
Advertise that we (Nevma) provide WordPress services, we are WordPress experts.
*** Rewrite rule should contain the NC flag (case insensitive).
RewriteRule \.(?:jpe?g|gif|png)$ /adaptive-images/adaptive-images-script.php [NC,L]
VARIOUS FEATURES
================
- Testing: set up funcions in a way that the image generation can be tested
- Functions prefix "ai_"
- WordPress 3.0 and down allow the "+"" character in filenames
- Use PHP::exec for cache purge and cache size calculation (not reliably allowed by hosts)
- Does this plugin work for you? Then say so! Mail, tweet, like, etc
- Upscale images (smoothly)?
- This plugin has served XXX images successfully :-)
- This plugin happily serves XX images from its cache :-)
- This plugin happily serves XXmb from its cache :-)
- Cache directory could be anywhere in the server
- Watch cache feature is sort of pointless in WordPress or could even be done without asking
- Open a page with an adaptive images debug parameter and do your Javascript checks there to see if the plugin is
set up properly and working as expected
- Some security plugins, like Hide My WP, try to hide the /wp-content/uploads folder, by renaming it via an htaccess
rewrite. This causes our plugin to be unable to resolve an image real path from an image request. One possible
solution to this is giving the developer the option to set a PHP define in their functions.php which will declare
that such a rewrite exists and what exactly it does.
FUTURE IDEAS
============
- Ask users to rate plugin after X-images have been cached.
- Ajax calculate image cache size.
- Ajax cleanup image cache size.
- Per image cache purge.
- Purge image cache beyond a size.
- Per breakpoint cache purge.
- Notify about cache size in WP cron, in WP admin, perhaps an email to the admin.
- What if a user actually wants to see the full version of an image, even in a mobile network?
- When an image is deleted in the media gallery then its resized versions should be deleted, too.
- When breakpoints are changed delete the cache directories of the unused breakpoints to clean up.
- Original adaptive images PHP script error log is output inside the plugin files.
- Send original images to search engine bots to preserve their metadata.
- Set a maximujm size (one above the resolutions) as described in https://wordpress.org/support/topic/make-image-size-customizable/#post-8665157
ART DIRECTION
=============
Default anchors and zoom levels
1. zoom level 1, 2, 3...
2. anchor in image
.--------------.
| tl tc tr | top-left top-center top-right
| |
| ml mc mr | middle-left middle-center middle-right
| |
| bl bc br | bottom-left bottom-center bottom-right
'--------------'
*** OR AUTO DETECT IMAGES BETTER PARTS AND CROP ACCORDINGLY
3. different aspect ratio/dimensions
- by breakpoint
- by orientation
https://usecases.responsiveimages.org/#art-direction/
http://davidwalsh.name/responsive-images/
https://developers.google.com/web/fundamentals/media/images/images-in-markup/
https://css-tricks.com/which-responsive-images-solution-should-you-use/
http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
ALSO CHECK OUT
==============
- https://wordpress.org/plugins/ricg-responsive-images/
- https://wordpress.org/plugins/responsify-wp/
- https://usecases.responsiveimages.org/#art-direction/
- http://davidwalsh.name/responsive-images/
- https://developers.google.com/web/fundamentals/media/images/images-in-markup/
- https://css-tricks.com/which-responsive-images-solution-should-you-use/
- http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
- http://cloudinary.com/ (cloud image management service)
PROMOTION
=========
- https://codex.wordpress.org/Plugin_Submission_and_Promotion
- https://www.competethemes.com/how-to-promote-wordpress-plugin/
- http://wptavern.com/tips-for-promoting-newly-released-wordpress-plugins
- http://www.insite.io/blog/the-loneliness-of-the-marketer-or-how-to-promote-a-baby-wordpress-plugin/
- http://wpscoop.com/promoting-new-wordpress-plugins/
- wplift
- wpmayor
- elegant themes
- envato blog
- wpexplorer
- wpmudev blog
UNIT TESTS FOR IMAGE GENERATION
===============================
- PNG
- PNG8
- PNG256
- PNG with alpha
- PNG with trasparency
- GIF
- GIF with trasparency
- JPEG(s)
(Compare with services like TinyPNG, etc.)
TEST CASES TO CHECK WITH EACH VERSION
=====================================
- Clean install
- Deactivate then activate
- Version 0.2.08 direct upgrade
- Older version upgrade
- Print debug info
- Images correctly sent at each breakpoint
- Uninstall cleanup
- Images to test
- JPG
- GIF
- GIF with transparency
- PNG
- PNG with transparency