Commit c4cc1370 authored by osman's avatar osman

Updated documentation, and inline help

parent bea26cd8
......@@ -20,12 +20,12 @@ requirement.
## Installing Manually
- [Download bLazy][4] from https://github.com/dinbror/blazy
- [Download bLazy][4] from https://github.com/dinbror/blazy
- Extract the downloaded file,
- rename *blazy-master* directory to *blazy*,
- copy the folder into one of the following places that *Libraries API*
module supports, `sites/all/libraries` (or site-specific libraries folder):
i.e.: `sites/all/libraries/blazy/blazy.min.js`
i.e.: `sites/all/libraries/blazy/blazy.min.js`
## Installing via Composer
......@@ -65,7 +65,7 @@ requirement.
"reference": "1.8.2"
}
}
},
}
]
```
......@@ -77,25 +77,28 @@ requirement.
`composer require 'drupal/lazy:^1.0'`
## Usage
There are two options to set up for your site to lazy-load images. And both options share the same [settings](/admin/config/content/lazy).
Lazy-loading can be enabled for both
1. **Image fields** via display formatters
2. Inline images and iframes in the content via **input filters** in text-formats.
1. Image fields
2. Inline images and Iframes managed in rich-text fields (ckeditor)
### Image Fields
Change the desired image-field's display setting from `Image` to
`Lazy-load image` to enable lazy-loading for the selected field. When the
formatting option changed between `Image` and `Lazy-load image` formatters
_image style_ and _link image to_ settings should remain unchanged.
### Input Filters
1. Go to **Manage display** page of the entity type you want to enable lazy-loading. *i.e. Article*
2. Select the **display** you want the change. *i.e. Teaser*
3. Change the format from `Image` to
`Lazy-load image` to enable lazy-loading for the selected field.
The `Image` formatter settings for
_image style_ and _link image to_ should remain unchanged.
Enable `Lazy-load images and IFRAMEs via bLazy` filter in desired text-formats
(`admin/config/content/formats`). i.e. *Full HTML*
### Inline images and Iframes
1. **Configure** the [text format](/admin/config/content/formats) you want to enable lazy-loading. *i.e. Full HTML*
2. Check **Lazy-load images and IFRAMEs via bLazy** option to enable the filter, and save configuration.
3. Go to [Lazy-load settings](/admin/config/content/lazy).
4. Check the boxes for the inline elements to be lazy-loaded via filter `<img>` `<iframe>`
5. Save configuration
The images and iframes defined in the formatted-text fields automatically
enables them to be lazy-loaded.
*Repeat steps 1-2 for each text-format you want to enable lazy-loading.*
To disable lazy-loading for specific image or iframes, add **skip-class** to the
class attribute. Default value (no-b-lazy) can be changed in the configuration.
......@@ -104,12 +107,22 @@ class attribute. Default value (no-b-lazy) can be changed in the configuration.
<img class="no-b-lazy" src="this-image-will-load-normal" alt="">
```
### Configuration
### Blazy plugin can be manupulated in your theme/module javascript:
The options in **Blazy configuration** section of the settings form are the default options of the Blazy library. Refer to [Blazy plugin documentation][5] for each setting.
#### Get Blazy plugin options.
```js
let opt = Drupal.settings.lazy ? Drupal.settings.lazy : {};
```
Check out the module configuration at `admin/config/content/lazy` for further
customization. Though, the default settings should work for most developers.
#### Access Blazy's public functions:
| Function | Description |
|:--|:--|
| `Drupal.lazy.revalidate();` | Revalidates document for visible images. Useful if you add images with scripting or ajax |
| `Drupal.lazy.load(element(s), force);` | Forces the given element(s) to load if not collapsed. If you also want to load a collapsed/hidden elements you can add true as the second parameter. You can pass a single element or a list of elements. Tested with getElementById, getElementsByClassName, querySelectorAll, querySelector and jQuery selector. |
| `Drupal.lazy.destroy();` | Unbind events and resets image array |
Remember, the same configuration is used for both image fields and input-filters.
## Use Case
......
......@@ -11,10 +11,6 @@
function lazy_configuration_form($form, $form_state) {
$defaults = variable_get('lazy_filter_defaults');
$filter_enabled = lazy_is_filter_enabled();
$description = t('The %filter filter must be enabled for at least one <a href="!path">text-format</a>.', array(
'!path' => url('admin/config/content/formats'),
'%filter' => 'Lazy-load',
));
$form['settings'] = array(
'#type' => 'fieldset',
......@@ -30,7 +26,7 @@ function lazy_configuration_form($form, $form_state) {
'iframe' => t('Iframes (%iframe tags)', array('%iframe' => '<iframe>')),
),
'#default_value' => variable_get('lazy_filter_alter_tag', $defaults['lazy_filter_alter_tag']),
'#description' => $filter_enabled ? '' : $description,
'#description' => t('Only selected tags will be lazy-loaded in activated text-formats.'),
'#disabled' => !$filter_enabled,
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment