diff --git a/README.txt b/README.txt index 5570701..6b37957 100644 --- a/README.txt +++ b/README.txt @@ -1,33 +1,32 @@ -Responsive-lazy-loader +Responsivelazyloader ====================== ##SUMMARY -The responsivelazyloader allow to load images after page load. -The images will be loaded on scroll. You can preload the images when -they get close to the active window. -The responsivelazyloader alos allow to load different images styles +This module delays the loading of images in web pages. Images That are not +visible on the screen, are not loaded until the user scrolls to them. +This module also allows you to load different images styles in order to load the most appropriate image according to the current breakpoint or display. In other words, you can load a small image on phones and large ones on desktop -with any aditional contribution. This also work for an image in the main page +with any additional contribution. This also work for an image in the main page or in the sidebar. For a full description of the module, visit the project page: https://drupal.org/sandbox/jetmartin/2158105 -To submit bug reports and feature suggestions, or to track changes: +To submit bug reports, feature suggestions, or to track changes, +visit the issue queue: https://drupal.org/project/issues/2158105 ##REQUIREMENTS -The module require : +This module requires the following modules: +* The libraries module (https://www.drupal.org/project/libraries) -* The libraries module. - -* The jQuery responsivelazyloader plugin see : - http://plugins.jquery.com/responsivelazyloader/ +* The jQuery responsivelazyloader plugin + (http://plugins.jquery.com/responsivelazyloader/) * Allow image insecure derivatives. Read more : https://drupal.org/drupal-7.20-release-notes @@ -37,22 +36,20 @@ The module require : * Install libraries module. -* Download jQuery responsive lazy loader - http://plugins.jquery.com/responsivelazyloader/ - -* Copy the jquery.responsivelazyloader.min.js on the - libraries/responsivelazyloader folder. +* Download jQuery responsivelazyloader and place it inside + “sites/all/libraries/responsivelazyloader”. + (http://plugins.jquery.com/responsivelazyloader/) * Allow image insecure derivatives. - Add $conf['image_allow_insecure_derivatives'] = TRUE; - to the settings.php file. + Add the following line to your settings.php file: +$conf['image_allow_insecure_derivatives'] = TRUE; * Install as usual, see https://drupal.org/documentation/install/modules-themes/modules-7 for further information. -* Set you'r responsive lazy loader configuration. - Do not hesitate to create specific images styles before. +* Set your responsive lazy loader configuration. + Do not hesitate to create specific images styles before. ##CONFIGURATION @@ -74,37 +71,37 @@ at jetmartin.github.io/responsive-lazy-loader ##BREAKPOINTS CONFIGURATION -If you do not know about breakpoints (mediaqueries) the module, +If you do not know about breakpoints (mediaqueries), this module is already setup with basic ones. For a quick configuration, copy/paste the mediaqueries from the theme -steelsheets. -You can use advances mediaqueries as orientation or pixel-ratio detection. +stylesheets. +You can use advanced mediaqueries as orientation or pixel-ratio detection. You can detect "retina" devices and load different images on hi-resolution -phones/tablettes. -ex : (max-width: 380px) and (-webkit-min-device-pixel-ratio: 2), +phones/tablets. +e.g. : (max-width: 380px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 380px) and (min-resolution: 192dpi), (max-width: 380px) and (min-resolution: 2dppx) ##DISPLAYS CONFIGURATION -The default display will be use if you specify any custom displays. -To create a custom display click at "New display" on the page : -Administration » Configuration » Media » Responsive Lazyloader » Displays +The default display will be used if you don't specify any custom displays. +To create a new custom display, click at "New display" on the page : +Administration » Configuration » Media » Responsive Lazyloader » Displays. -* Fill the key field to be able to recognize each of you'r displays. +* Fill in the key field. This field is an unique identifier. -* Fill the Prent display field by a class name. - This class should be set in one of the parent element of the image. +* Fill the Parent display field by a class name. + This class should be set in one of the parent elements of the image. -* You can use the Parent field for advance settings - (if many elemnt use the same class as an example). +* You can use the Parent field for advanced settings + (if many elements use the same class as an example). You must fill it by a jquery element declaration as "section.sidebar". -* On the display array you will find one line by breakpoint an one defaults. - You can setup one image style for each breakpoint. - If you do not select a style for a breakpoint, the defaults one will be used. - You must select a defaults image style. +* On the display page, there is one default display and one display + for every breakpoint. You can setup one image style for each breakpoint. + If you do not select a style for a breakpoint, the default one will be used. + You must select a default image style. ##CONTACT diff --git a/responsivelazyloader.admin.inc b/responsivelazyloader.admin.inc index 0610f07..4bf3abd 100644 --- a/responsivelazyloader.admin.inc +++ b/responsivelazyloader.admin.inc @@ -1,7 +1,7 @@ $settings['distance'], '#size' => 6, '#maxlength' => 6, - '#description' => t('The distance (in pixels) of image to the browser window before it triggers the loading of the image.'), + '#description' => t('The distance (in pixels) from the image to the browser window before it triggers the loading of the image.'), ); $form['responsivelazyloader']['exclude'] = array( '#type' => 'checkbox', '#title' => t('Exclude Pages'), '#default_value' => $settings['exclude'], - '#description' => t('Allow you to exclude the following pages of lazyloading instead of including pages. If you check "exclude" without adding pages, you will disable the lazyloading.'), + '#description' => t('Allows you to exclude the following pages of lazyloading instead of including pages. If you check "exclude" without adding pages, you will disable the lazyloading.'), ); $form['responsivelazyloader']['pages'] = array( '#type' => 'textarea', @@ -103,7 +103,7 @@ function responsivelazyloader_admin($form, &$form_state, $op = NULL) { ); $form['responsivelazyloader']['help']['list'] = array( '#theme' => 'item_list', - '#items' => array(t('If you use some images without styles, the images will be lazyloaded but you will show-up the original images and not the style according to the current breakpoint & display.'), + '#items' => array(t('If you use some breakpoints without styles, the images will be lazyloaded but be shown in the default style and not the style according to the current breakpoint & display.'), t('If you use images in your RTE, you need to use a module such as "!asset" to be able to lazyload your images.', array( '!asset' => l(t('asset'), 'http://drupal.org/project/asset'), @@ -196,7 +196,7 @@ function responsivelazyloader_admin_breakpoints($form, &$form_state, $op = NULL) ); } /* - * Maanage MediaQueries FORM. + * Manage MediaQueries FORM. */ $form['mediaqueries'] = array( '#type' => 'fieldset', @@ -349,7 +349,7 @@ function responsivelazyloader_add_breakpoint_submit($form, &$form_state) { $settings['settings']['mediaqueries'][$form_state['values']['mediaqueries']['key']] = $form_state['values']['mediaqueries']['mediaq']; variable_set('responsivelazyloader', $settings); // Add success message. - drupal_set_message(t('The new breakpoint has been added. You need to setup its configuration otherwise the default image (no styles) will always be used.')); + drupal_set_message(t('The new breakpoint has been added. You need to configure this breakpoint, otherwise the default image (no styles) will always be used.')); } /** diff --git a/responsivelazyloader.info b/responsivelazyloader.info index 0fdd63c..c14b159 100644 --- a/responsivelazyloader.info +++ b/responsivelazyloader.info @@ -1,5 +1,5 @@ name = Responsive Lazy Loader -description = Enable a full configurable responsive lazyloader. You can't create custom configuration for any CSS grid system. +description = Enables a full configurable responsive lazyloader. You can't create custom configuration for any CSS grid system. core = 7.x package = responsivelazyloader diff --git a/responsivelazyloader.module b/responsivelazyloader.module index da1831f..f75b70c 100644 --- a/responsivelazyloader.module +++ b/responsivelazyloader.module @@ -18,18 +18,20 @@ define('RESPONSIVELAZYLOADER_DEFAULTS', 'defaults'); /** * Implements hook_init(). * - * Define the defaults global to only require once the drupal variable. + * Define the default global variables to only require once the drupal variable. */ function responsivelazyloader_init() { global $_responsivelazyloader_config, $conf; - // Set defaults values : - // Is enabled by default. - // Pixel distance for image load on scroll is NULL. - // Default URI token. Will be replace by the image style name. - // Exclude pages. - // Excluded pages are node edit & admin. - // Two default breakpoints (phone>360px & tablet>767px). - // Two default displays default & sidebar. + + //This config array is used when no breakpoint or display configuration is + //added. + //By default the following setttings are used: + // - the responsivelazyloader is enabled + // - Pixel distance for image load on scroll is NULL. + // - Default URI token. Will be replaced by the image style name. + // - Excluded pages are node edit & admin. + // - Two default breakpoints (phone>360px & tablet>767px). + // - Two default displays default & sidebar. $_responsivelazyloader_config = array( 'enabled' => 1, 'distance' => 0, @@ -38,7 +40,7 @@ function responsivelazyloader_init() { 'pages' => "admin/*\nnode/*/edit", 'settings' => array( 'mediaqueries' => array( - 'tablette' => '(max-width: 767px)', + 'tablet' => '(max-width: 767px)', 'phone' => '(max-width: 360px)', ), 'displays' => array( @@ -58,7 +60,7 @@ function responsivelazyloader_init() { ), ); - // Override defaults by config. + // Override default by config. $_responsivelazyloader_config = variable_get('responsivelazyloader', $_responsivelazyloader_config); // Setup the settings var. @@ -319,7 +321,7 @@ function responsivelazyloader_image($variables) { } /** - * Check if current path is excluded. + * Check if the current path is excluded. * * @see drupal_match_path() *