Skip to content

Commit

Permalink
add docs for stratus-src
Browse files Browse the repository at this point in the history
  • Loading branch information
chadwickmeyer committed Dec 18, 2019
1 parent 481fdf1 commit 3e047f0
Showing 1 changed file with 1 addition and 4 deletions.
5 changes: 1 addition & 4 deletions Stratus/Stratus-Components.rst
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,14 @@ You can also use disable lazy-loading dynamically in Angular when only the data

**Attribute Options:**

- stratus-src: (str|bool|null) If a string, stratus-src should point to the image path that you want to lazy-load. If you have specified a regular img src as a placeholder image (e.g. a small version), and you want to lazy load the best size of that image, than you can avoid typing out the path a second time and just specify the attribue `stratus-src` without a value and the system will load the best version of the current image src. If the value is `false` it should abort the lazy loading. This is necessary because when we load images dynamically in Angular (rather than Twig template) we can only manipulate the value not the attribute itself, so we will either pass in true or false.
- `stratus-src`: (str|bool|null) If a string, stratus-src should point to the image path that you want to lazy-load. If you have specified a regular img src as a placeholder image (e.g. a small version), and you want to lazy load the best size of that image, than you can avoid typing out the path a second time and just specify the attribue `stratus-src` without a value and the system will load the best version of the current image src. If the value is `false` it should abort the lazy loading. This is necessary because when we load images dynamically in Angular (rather than Twig template) we can only manipulate the value not the attribute itself, so we will either pass in true or false.

- `data-hd`: (bool, default: true) By default we will load hd images which are double the size of the parent container, so that they look good on retina devices. But you can disable this by passing in `data-hd="false"`.

- `data-spy`: (str) By default the image will load when it is "on screen". But in some cases (like a Carousel) you need to specify a CSS selector for an alternative element on the screen that should trigger the loading, e.g. the container div.

- `data-ignore-visibility`: (bool) normally it will look for the size of the container and load the correct image that will fill the container (assuming a 100% width is set on CSS). But if the container is invisible, it will try to go up the element tree to the first parent that is visible. This is often desirable because the parent is collapsed. However, in some cases, like a Carousel, if you have the parent width set explicitly on a containing element, you want to use that (not the outer carousel width). So you set data-ignoreVisibility="true" and it will use the parent container width.

- `stratus-src-load`:
TODO: explain what this means: "for variable Progressive image loading on certain resources"

- `status-src-suffix`: (json) (TODO: IMPLEMENT) specify alternative formatting for image sizes, e.g. by default we add `-s`, `-m`, `-l`, etc to the base image url, but for third party sources, that format may be different. e.g. here we would specify that small and medium use the `-thumb` and all others use the default image, e.g. no alternative size added

.. code-block:: html
Expand Down

0 comments on commit 3e047f0

Please sign in to comment.