If you copy paste the lines here into CKEditor, be sure to view CKEditor
source and remove the surrounding <code>...</code>
.
Create a slideshow/ carousel with a shortcode. Pay attention to attributes,
slashes, single and double quotes:
[slick]...[slide]...[/slide]...[/slick]
data=ENTITY_TYPE:ID:FIELD_NAME:FIELD_IMAGE
, without inline
HTML: [slick data="node:44:field_media" /]
[slick 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,
Entityreference, 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.[slick settings="{}" options="{}"]..[slide]..[/slide]..[/slick]
settings
is HTML settings as seen at Filter, Field or Views
UI forms, and options
is JavaScript options as seen at Optionset
UI forms.slick/config/install/slick.optionset.default.yml
:[slick options="{'type': 'loop', 'arrows': false,
'pagination': true}"]...[/slick]
SlickDefault/ BlazyDefault
methods:[slick settings="{'optionset': 'x_main', 'skin': 'fullwidth',
'layout': 'bottom'}"]...[/slick]
'nav': false
STYLE:SMALL-MEDIUM-LARGE:VISIBLE_ITEMS
[slick grid="nativegrid:2-3-4:8" /]
[slide]
, if not using
Filter caption for a reason: [slide caption='Read more']...
Tips, if any issues:
data, settings, options
can be put together into
one [slick]
.[slide]
can have attributes, including caption
,
e.g.: [slide class="slide--custom-class" caption='Read more...']
.nav="false"
:
[slick nav="false"]
.data
attribute, be sure
slide items are stacked, separated by line breaks, or any relevant HTML tags,
and wrapped each with [slide]
:
[slick]
[slide]
<IMG>
[/slide]
[slide]
<IFRAME>
[/slide]
[slide]
<p>Any non-media HTML
content</p>
[/slide]
[/slick]
IMG/ IFRAME
, or other HTML as slide contents can be wrapped
with any relevant tags, no problem.
[slide]
, avoid using the reserved square bracket
characters [
and ]
or other inner shortcodes inside
[slick]...[/slick]
blocks till we support nested slicks.