Menü
Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol type start> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <u> <p> <drupal-media data-entity-type data-entity-uuid data-view-mode data-align data-caption alt title> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr>
This site allows HTML content. While learning all of HTML may feel intimidating, learning how to use a very small number of the most basic HTML "tags" is very easy. This table provides examples for each tag that is enabled on this site.
For more information see the HTML Living Standard or use your favorite search engine to find other sites that explain HTML.
Tag Description | You Type | You Get | ||
---|---|---|---|---|
Anchors are used to make links to other pages. | <a href="https://energypedia-consult.com">energypedia consult GmbH</a> |
energypedia consult GmbH | ||
Emphasized | <em>Emphasized</em> |
Emphasized | ||
Strong | <strong>Strong</strong> |
Strong | ||
Cited | <cite>Cited</cite> |
Cited | ||
Block quoted | <blockquote>Block quoted</blockquote> |
Block quoted |
||
Coded text used to show programming source code | <code>Coded</code> |
Coded |
||
Unordered list - use the <li> to begin each list item | <ul> <li>First item</li> <li>Second item</li> </ul> |
|
||
Ordered list - use the <li> to begin each list item | <ol> <li>First item</li> <li>Second item</li> </ol> |
|
||
No help provided for tag li. | ||||
Definition lists are similar to other HTML lists. <dl> begins the definition list, <dt> begins the definition term and <dd> begins the definition description. | <dl> <dt>First term</dt> <dd>First definition</dd> <dt>Second term</dt> <dd>Second definition</dd> </dl> |
|
||
No help provided for tag dt. | ||||
No help provided for tag dd. | ||||
Heading | <h2>Subtitle</h2> |
Subtitle |
||
Heading | <h3>Subtitle three</h3> |
Subtitle three |
||
Heading | <h4>Subtitle four</h4> |
Subtitle four |
||
Heading | <h5>Subtitle five</h5> |
Subtitle five |
||
Heading | <h6>Subtitle six</h6> |
Subtitle six |
||
Underlined | <u>Underlined</u> |
Underlined | ||
By default paragraph tags are automatically added, so use this tag to add additional ones. | <p>Paragraph one.</p> <p>Paragraph two.</p> |
Paragraph one. Paragraph two. |
||
No help provided for tag drupal. | ||||
Table | <table> <tr><th>Table header</th></tr> <tr><td>Table cell</td></tr> </table> |
|
||
No help provided for tag caption. | ||||
No help provided for tag tbody. | ||||
No help provided for tag thead. | ||||
No help provided for tag tfoot. | ||||
No help provided for tag th. | ||||
No help provided for tag td. | ||||
No help provided for tag tr. |
Most unusual characters can be directly entered without any problems.
If you do encounter problems, try using HTML character entities. A common example looks like & for an ampersand & character. For a full list of entities see HTML's entities page. Some of the available characters include:
Character Description | You Type | You Get |
---|---|---|
Ampersand | & |
& |
Greater than | > |
> |
Less than | < |
< |
Quotation mark | " |
" |
You can align images, videos, blockquotes and so on to the left, right or center. Examples:
<img src="" data-align="left" />
<img src="" data-align="center" />
<img src="" data-align="right" />
<video src="" data-align="center" />
If you copy paste the lines here into CKEditor, be sure to view CKEditor
source and remove the surrounding <code>...</code>
,
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:
[blazy]...[item]...[/item]...
[/blazy]
[blazy]
is like field container,
[item]
like field item.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" /]
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. FIELD_IMAGE
named
field_media_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. This is not field image at Node, it is at
Media.BlazyDefault
methods as seen at Filter, Field or Views UI
forms:[blazy settings="{'style': 'column', 'grid': 4}" /]
[item]
can have class and caption attributes, e.g.: [item class="grid--card card"
caption='Read <a href="https://mysite.com">more</a>']
. grid__content
to make it usable
such as for Bootstrap well/ card. The caption into regular
blazy__caption
. STYLE:SMALL-MEDIUM-LARGE
. STYLE
is one of space-delimited values: column grid
flex nativegrid
.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.[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" /]
[blazy settings="{
'style': 'nativegrid',
'grid_small': 2,
'grid_medium': 3,
'grid': '4x4 ...'
}" /]
4x4
defines WIDTHxHEIGHT
based on
grid-row
CSS property, see and override
blazy/css/blazy.nativegrid.css
.
data-unblazy
:
<img data-unblazy />
<iframe data-unblazy />
[DEPRECATED], cannot co-exist: To build a grid of images/
videos, add attribute data-grid
or data-column
(only to the first item):
<img data-grid="1 3 4" />
<iframe data-column="1 3 4" />
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:
[blazy]
shortcode. It is only
useful for grid, or customizing settings, or embedding a known entity.data, settings
can be put together into one
[blazy]
.data
attribute, be sure
grid items are stacked, separated by line breaks, or any relevant HTML tags,
and wrapped each with [item]
:
[blazy]
[item]
<IMG>
[/item]
[item]
<IFRAME>
[/item]
[item]
<p>Any non-media HTML
content</p>
[/item]
[/blazy]
IMG/ IFRAME
, or other HTML as item contents can be wrapped with
any relevant tags, no problem.