Compose tips
Text Formats
Simple editor
Allowed HTML tags: <a href hreflang !href accesskey id rel target title> <blockquote cite> <br> <cite> <code> <dd> <dl> <dt> <em> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <li> <ol start type> <p> <span> <strong> <u> <ul type> <img src alt height width data-* data-entity-type data-entity-uuid data-align data-caption> <drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button data-langcode alt title> <drupal-media alt title data-entity-type data-entity-uuid data-view-mode data-align data-caption>
- Web page addresses and email addresses turn into links automatically.
You can align images, videos, blockquotes and so on to the left, right or center. Examples:
- Align an image to the left:
<img src="" data-align="left" /> - Align an image to the center:
<img src="" data-align="center" /> - Align an image to the right:
<img src="" data-align="right" /> - … and you can apply this to other elements as well:
<video src="" data-align="center" />
- Align an image to the left:
You can caption images, videos, blockquotes, and so on. Examples:
<img src="" data-caption="This is a caption" /><video src="" data-caption="The Drupal Dance" /><blockquote data-caption="Dries Buytaert">Drupal is awesome!</blockquote><code data-caption="Hello world in JavaScript.">alert("Hello world!");</code>
### Blazy If you copy paste the lines here into CKEditor, be sure to view CKEditor source and remove the surrounding `
...`, in case mistakenly copied over. Image or iframe is lazyloaded automatically unless disabled, no shortcodes required. Usages for shortcodes: grid, customizing settings, embedding a known entity. Pay attention to attributes, slashes, colons, single and double quotes: 1. **Basic**, with inline HTML: `[blazy]...[item]...[/item]... [/blazy]` where `[blazy]` is like `.field` container, `[item]` like `.field__item`. 2. **With self-closing** `data=ENTITY_TYPE:ID:FIELD_NAME:FIELD_IMAGE`, without inline HTML: `[blazy data="node:44:field_media" /]` `[blazy data="node:44:field_media:field_media_image" /]` _Required_: `ENTITY_TYPE:ID:FIELD_NAME`, where `ENTITY_TYPE` is *node* -- only tested with node, `ID` is *node ID*, `FIELD_NAME` can be field Media, Image, Text (long or with summary), must be multi-value, or unlimited. _Optional_: `FIELD_IMAGE` named `field_media_image` (not `field_image`) as found at Media Image/ Video for hires poster image, must be similar and single-value field image for **all** media entities to have mixed media correctly. **Repeat**, not `field_image` at Node, it is `field_media_image` at Media. 3. **With HTML settings**: any HTML settings relevant from `BlazyDefault` methods as seen at Filter, Field or Views UI forms: `[blazy settings="{'style': 'column', 'grid': 4}" /]` 4. **Attributes**: The `[item]` can have class and caption attributes, e.g.: `[item class="grid--card card" caption='Read more' title="Awesome title"]` The classes will be moved into `grid__content` to make it usable such as for Bootstrap well/ card. The caption and title into regular `blazy__caption`. Use enclosing *single* quotes for HTML caption so you can have double quotes inside such as enclosing link HREF quotes, else broken. The link is normally converted automatically when using WYSIWYG. This will replace Filter caption if they both exist. 5. **Grid format**, a convenient shortcut for settings, hyphenated (`-`): `STYLE:SMALL-MEDIUM-LARGE` `STYLE` is only one of these: `column grid flex nativegrid`. The rest refers to device sizes. Only `LARGE` with `nativegrid`, no others, can be numeric, or string. The rest must be numbers due to using no JS and or their contracts. The minimum is 1, not 0 (1-12 columns). * `[blazy grid="column:2-3-4" /]` * `[blazy grid="grid:2-3-4" /]` * `[blazy grid="flex:2-3-4" /]` * `[blazy grid="nativegrid:2-3-4" /]`, will be masonry * `[blazy grid="nativegrid:2-3-4x4" /]`, will repeat * `[blazy grid="nativegrid:2-3-4x4 4x3 2x2 2x4 2x2 2x3 2x3 4x2 4x2" /]` is a shortcut for:[blazy settings="{* `4x4` defines `WIDTHxHEIGHT` based on `grid-row` CSS property, see and override `blazy/css/components/grid/blazy.nativegrid.css`. 6. **Skipping**: to disable lazyload, add attribute `data-unblazy`: * `
'style': 'nativegrid',
'grid_small': 2,
'grid_medium': 3,
'grid': '4x4 ...'
}" /]` * `` 7. **[DEPRECATED]**, cannot co-exist: To build a grid of images/ videos, add attribute `data-grid` or `data-column` (only to the first item): * `
` * `` The numbers represent the amount of grids/ columns for small, medium and large devices respectively, space delimited. Be aware! All media items will be grouped regardless of their placements. That's why deprecated. **Tips**, if any issues: * To set and forget, do not use `[blazy]` shortcode. It is only useful for grid, or customizing settings, or embedding a known entity. * Attributes `data, settings` can be put together into one `[blazy]`. * If the enclosing quotes are single, the inner ones, if any, must be double, and vice versa. * `IMG/ IFRAME`, or other HTML as item contents can be wrapped with any relevant HTML tags, no problems. * Except for self-closing one-liner `data` attribute, be sure grid items are stacked, separated by line breaks, or any relevant HTML tags, and wrapped each with `[item]` like so:
[blazy]
[item]
<IMG>
[/item]
[item]
<IFRAME>
[/item]
[item]
<p>Any non-media HTML content</p>
[/item]
[/blazy]
Plain text
- No HTML tags allowed.
- Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple of blank lines.
- Web page addresses and email addresses turn into links automatically.