Text Formats

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>

    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="http://www.unicath.hr">UniCATH</a> UniCATH
    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>
    • First item
    • Second item
    Ordered list - use the <li> to begin each list item <ol> <li>First item</li> <li>Second item</li> </ol>
    1. First item
    2. Second item
    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>
    First term
    First definition
    Second term
    Second definition
    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

    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 &amp; 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 &amp; &
    Greater than &gt; >
    Less than &lt; <
    Quotation mark &quot; "
  • 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.

Full HTML

  • 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" />

  • 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>

  • Slick

    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:

    1. Basic, with inline HTML:
      [slick]...[slide]...[/slide]...[/slick]
    2. With self-closing 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" /]
      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, Entityreference, Image, Text (long or with summary), must be multi-value, or unlimited.
      Optional: 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.
    3. With settings and or options, to override Slick filter settings:
      [slick settings="{}" options="{}"]..[slide]..[/slide]..[/slick]
      Where settings is HTML settings as seen at Filter, Field or Views UI forms, and options is JavaScript options as seen at Optionset UI forms.
    4. Options only: any JavaScript options relevant from slick/config/install/slick.optionset.default.yml:
      [slick options="{'type': 'loop', 'arrows': false, 'pagination': true}"]...[/slick]
    5. HTML settings only: any HTML settings relevant from SlickDefault/ BlazyDefault methods:
      [slick settings="{'optionset': 'x_main', 'skin': 'fullwidth', 'layout': 'bottom'}"]...[/slick]
      To force disabling enabled navigation, add 'nav': false
    6. With grid: similar to Blazy grid + visible items:
      STYLE:SMALL-MEDIUM-LARGE:VISIBLE_ITEMS [slick grid="nativegrid:2-3-4:8" /]
    7. With HTML caption for each [slide], if not using Filter caption for a reason:
      [slide caption='Read more']...
      Use single quotes for HTML caption, else broken. The link is normally converted automatically when using WYSIWYG. This will replace Filter caption if they both exist.


    Tips, if any issues:

    • Attributes 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...'].
    • To disable thumbnail/ text navigation add nav="false": [slick nav="false"].
    • Except for self-closing one-liner 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.
    • Except for [slide], avoid using the reserved square bracket characters [ and ] or other inner shortcodes inside [slick]...[/slick] blocks till we support nested slicks.

  • You can embed media items:

    • Choose which media item to embed: <drupal-media data-entity-uuid="07bf3a2e-1941-4a44-9b02-2d1d7a41ec0e" />
    • Optionally also choose a view mode: data-view-mode="tiny_embed", otherwise the default view mode is used.
    • The data-entity-type="media" attribute is required for consistency.

Obični tekst

  • 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.