' . 'Settings' . '';
return $links;
}
/**
* Adds a link to the adaptive images settings in the plugins listing page for convenience.
*
* @author Nevma (info@nevma.gr)
*
* @param array $links The plugin links array in the plugins listing page.
*
* @return void
*/
function adaptive_images_admin_settings_row_meta_add ( $links, $file ) {
if ( $file != adaptive_images_plugin_get_name() ) {
return $links;
}
$links[] = 'Plugin page';
$links[] = 'Support page';
return $links;
}
/**
* Adds the plugin settings page to the admin area.
*
* @author Nevma (info@nevma.gr)
*
* @return void
*/
function adaptive_images_admin_settings_page_add () {
// Adds the plugin's options page as a submenu of the admin settings.
$hook_name = add_options_page(
'Adaptive Images', // page title
'Adaptive Images', // menu title
'manage_options', // capability
'adaptive-images', // menu slug
'adaptive_images_admin_print_options_page' // print function callback
);
// Adds the action which adds the plugin admin actions.
add_action( 'admin_head-' . $hook_name, 'adaptive_images_admin_settings_actions' );
}
/**
* Registers the plugin settings.
*
* @author Nevma (info@nevma.gr)
*
* @return void
*/
function adaptive_images_admin_settings_register () {
// Registers the plugin settings field.
register_setting(
'adaptive-images-settings', // option group
'adaptive-images', // option name
'adaptive_images_admin_settings_sanitize' // function validator callback
);
// Adds the plugin main settings section.
add_settings_section(
'adaptive-images-settings', // id
'', // title
'', // print function callback
'adaptive-images' // plugin page
);
// Adds the adaptive images resolutions field.
add_settings_field(
'resolutions', // id
'Resolution breakpoints', // title
'adaptive_images_admin_print_resolutions_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images landscape field.
add_settings_field(
'orientation', // id
'Landscape orientation', // title
'adaptive_images_admin_print_landscape_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images hidpi field.
add_settings_field(
'hidpi', // id
'HiDPI support', // title
'adaptive_images_admin_print_hidpi_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images CDN support field.
add_settings_field(
'cdn-support', // id
'CDN support', // title
'adaptive_images_admin_print_cdn_support_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images cache directory field.
add_settings_field(
'cache-directory', // id
'Cache directory', // title
'adaptive_images_admin_print_cache_directory_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images watched directories field.
add_settings_field(
'watched-directories', // id
'Watched directories', // title
'adaptive_images_admin_print_watched_directories_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images content types field.
add_settings_field(
'content-type', // id
'Image types', // title
'adaptive_images_admin_print_content_types', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images JPEG quality field.
add_settings_field(
'jpeg-quality', // id
'JPEG quality', // title
'adaptive_images_admin_print_jpeg_quality_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images sharpen field.
add_settings_field(
'sharpen-images', // id
'Sharpen images', // title
'adaptive_images_admin_print_sharpen_images_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images watch cache (for stale images) field.
add_settings_field(
'watch-cache', // id
'Watch cache', // title
'adaptive_images_admin_print_watch_cache_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
// Adds the adaptive images browser cache duration field.
add_settings_field(
'browser-cache', // id
'Browser cache', // title
'adaptive_images_admin_print_browser_cache_field', // print function callback
'adaptive-images', // plugin page
'adaptive-images-settings' // section
);
}
/**
* Prints the resolutions settings field.
*
* @author Nevma (info@nevma.gr)
*
* @return void
*/
function adaptive_images_admin_print_resolutions_field () {
$options = adaptive_images_plugin_get_options();
adaptive_images_plugin_check_empty_setting( $options, 'resolutions' ); ?>
A comma separated list of device widths.
These are the different image sizes that will be created, cached and served to mobile devices.
Resolution breakpoints
Think of these numbers as breakpoints or as important device resolutions, that correspond to device widths. When a request is made from any device, the Adaptive Images plugin tries to calculate in which of these breakpoits the device falls into, so that it can serve it an appropriate scaled image size according to them.
Example 1:
• Device that sends the request: 640px wide
• Available resolution breakpoints: { 1024, 640, 480 }
=> Bingo, the the 640px breakpoint is chosen.
Example 2:
• Device that sends the request: 800px wide
• Available resolution breakpoints: { 1024, 640, 480 }
=> The 1024px breakpoint is the closest biggest one.
Example 3:
• Device that sends the request: 320px wide
• Device pixel density: 2 (HiDPI/retina)
• Available resolution breakpoints: { 1024, 640, 480 }
=> The 640px breakpoint is chosen because 2x320=640.
If the original image size is even smaller than the chosen breakpoint, then the original image is served (because it is too small). If the device is bigger than the biggest breakpoint, then the original image is served again (because it is too big).
This way we do not need to create and cache too many image sizes, one for every available device out there. It is up to you to decide how many such resolution breakpoints you need. You may have 100, if you want, or even just 1. However the default 3 are a good default choice, based on the known popular devices of today.
Landscape orientation
Users usually hold their devices in the portrait orientation like this 📱, but quite often they also hold them in the landscape orientation like this 📱, so this setting defines whether the Adaptive Images plugin should or shouldn't take into account the device orientation when determining its width.
HiDPI Support
Many mobile and tablet screens NOWADAYS have a feature called HiDPI (high device pixel density). Most people know these screens as retina. What they can do is to take bigger versions of an image and render it to the size instructed by the developer, but with much better clarity (due to the bigger size).
For example, if the pixel density of a device is 2, then it can take a 1000px version of a 500px image and show it with much better clarity still seeming 500px. Adaptive Images can detect these devices and serve them bigger images, yet remaining withing the boundaries of the given resolution breakpoints.
Of course this results in sending bigger file sizes to these devices, depending on the compression settings you have chosen. Your call.
CDN Support
CDNs, Varnish and other external caching servers, when they are used, stand between your website and your users in order to deliver your content and, of course, you images to them. With this option the Adaptive Images plugin alters your HTML images in the server side, and then, in the browser side, adds a special url parameter to their src attributes via Javascript, so that the caching server may know which version of an image to serve each time.
Examples
The general idea is that the Adaptive images plugin replaces in the server the src and srcset attributes to data-adaptive-images-src and data-adaptive-images-srcset and then, in the browser, when the DOM loads, it restores them with Javascript back to normal by addding them the information for the device dimensions on the url like this ?resolution=360,1.
Image elements with src
Image elements with srcset
Image elements inside figure elements
Picture elements
Notice
This technique inevitably tampers with the HTML output of your website. You are advised to test it with caution. CDNs and frontend libraries (like image lazy loading) use many different and diverse techniques to achieve their goals. It takes one to know the underlying mechanics of all of them in order to resolve any spossible conflicting circumstances. We will be more than happy to support you on this.
Directory inside /wp-content to store the image cache.
Current path of cache directory on server:
.
Cache directory
Right now saving the image cache in a directory outside your WordPress installation is not supported. Actually, to be precise, the cache directories must be inside the /wp-content directory. So, this setting is a relative path inside it. Leaving this setting in its default value, /wp-content/cache/adaptive-images, is the best option because this is what many other plugins use as a standard place for caching stuff.
Directories to watch for images to resize. Has to be relative paths inside your WordPress installation.
Watched directories
These are the directories in which your original images are saved by WordPress. The Adaptive Images plugin must know which of these directories you want to be watched for resizing its images. The most common are the /wp-content/uploads and the /wp-content/themes. But it could be anything else you choose.
Just remember that these directories must be inside your WordPress installation in order for the plugin to be able to detect them and serve them in the way it is designed. It is possible for one to keep their /wp-content outside WordPress, but this is a case we are still working on.
You may freely change the name of your /wp-content and /wp-content/uploads directories, but you must update the above list of watched directories manually in this case.
Choose the image types that you wish the Adaptive Images plugin to handle, resize and serve.
Image types
The Adaptive Images plugin can handle JPG/JPEG images very well indeed. It also handles PNG images with or without transparency and also alpha transparency. It is not able to compress PNGs very effectively on the fly, but it does a great job resizing them. GIF images are also supported, but without frames. If you do not choose an image type of the above, then the images that belong to it will simply be served in their original version. All image conversions are done via the PHP GD library.
Compression level of JPEG images, 100 means best quality but biggest file size.
Usuallly a 75 JPEG compression level works fine for the human eye with very small file sizes. Your call!
JPEG quality
A JPEG image is a compressed image with reduced quality and smaller file size when compared to its original version. However the JPEG algorithm manages to achieve amazing results in reducing the file sizes of images yet retaining excellent quality for the human eye. But JPEG has many compression levels. We measure these levels in a scale of 0-100:
It is generally acceptable that -practically speaking- a JPEG compression level of around 75 achieves more than decent quality for the human eye, while keeping the resulting file size orders of magnitude smaller than the original file. Unfortunately, one cannot further compress an already compressed JPEG image, unless they decide to lower its quality.
Sharpen images
When images are resized to smaller dimensions and compressed, eg via the very efficient JPEG algorithm, it is possible that some blur may appear in certain areas. Usually this is not even visible to the human eye. Sharpening the images attempts to reduce this blur in a generic manner, adding a bit of contrast and seeming clarity to them. This is quite safe a process. Leaving it on, in it default value, guarantees a minimum of good quality results.
Watch cache
By selecting this feature, when the original version of the image has been updated in the filesystem, the Adaptive Images plugin will detect it the first time the images is accessed again and update the cache accordingly. Usually, this is not much to worry about, unless you edit your images after having uploaded them to your website.
How long should browsers be instructed to "remember" images.
Unless you have a very special need and you know what you are doing, set this as high as you can.
Browser cache
Browsers are designed to remember images (and other resources) that they present to their users. This way they do not have to download everything every time a website is accessed and, as a result, websites can load faster. However sometimes some resources do change and a browser needs to be notified about it. This is when a user hits one "Refresh" after the other waiting for fresh content.
Fortunately, an uploaded image in WordPress changes very rarely, if ever. So, feel free to set the browser cache time period as high as you wish. It will only do good to the download times of your website, especially if you have users who visit it repeatedly.
Adaptive Images for WordPress Settings
Image cache tools
Cleanup the image cache or simply calculate its current size (takes some time, depending on the cache size).
Calculate size
Cleanup cache
Please confirm cache cleanup
Are you sure you want to delete all images in the cache? This means that all cached images will be lost and that they will be created anew, once they are accessed again. This process might take some time.
; ?>img/developer.png)
; ?>img/banner.png)
; ?>img/nevma.png)