====== Shortcodes ======

You can use several shortcodes throughout the site. Some modules are better implemented using the Page Builder rather than shortcodes, but both uses are supported

[[skoda-ep:common:shortcodes#shortcodes|General information about shortcodes]]

===== List of shortcodes =====

  * [[skoda-ep:skoda-wlc-2016:shortcodes#annotation|Annotations]]
  * [[skoda-ep:skoda-wlc-2016:shortcodes#live_feed|Live feeds]]
  * [[skoda-ep:skoda-wlc-2016:shortcodes#post_teaser|Post Teasers]]
  * [[skoda-ep:skoda-wlc-2016:shortcodes#button|Buttons]]
  * [[skoda-ep:skoda-wlc-2016:shortcodes#iframe|IFrames]]
  * [[skoda-ep:skoda-wlc-2016:shortcodes#personality_test|Personality Test]]

==== General use of post IDs when inserting a shortcode ====
Some of the shortcodes embed other posts or components from the administration. Usually you need to know the ID of the post/component before you embed it with shortcode. 

You can see the ID in the address bar of your browser

{{ :skoda-ep:skoda-wlc-2016:adress_bar.png?nolink |}}

The ID is specified by post={NUMBER}. From the screenshot you can see the ID is **137643**

Note: We now have experimental buttons in the editor toolbar which you can use to select the correct post instead of knowing the ID

{{ :skoda-ep:skoda-wlc-2016:wlc_post_shortcodes.png?nolink |}}
Green - Post teaser; Yellow - Annotation; Red - Live feed
===== Annotation =====
Shortcode: [annotations **id='%d...'**] where %d... represents the IDs of annotations (can have multiple)
Example: [annotation id='50,169']

More information about [[skoda-ep:creating_annotations|annotations]] and using page builder


===== Live Feed =====
Shortcode: [live-feed **id='%d...'**] where %d represents the IDs of live feed posts (can have multiple)
Example: [live-feeds id='55,139']

More information about [[skoda-ep:live_feeds|live feeds]]

===== Post Teaser =====
Shortcode: [post-teaser **id='%d...'** //perex=true//] where %d represents the IDs of posts or events (you can use multiple ids). Perex includes 2 lines of perex in the desktop view (hidden on mobile)

Example: [post-teaser id='51,168']
[post-teaser id='165' perex=true]

Post teaser can be used to insert a custom post link in articles

More information about [[skoda-ep:post_teaser|post teasers]] on the frontpage

===== Button =====
Shortcode: [button //type='dark|green'// //title='%s'// //url='http://www.google.com'// //target='blank|%s'//]%s[/button]

Both of these will do the same: **[button]Some Text[/button]** or **[button text=%%"Some Text"%%]** - but be careful, if you use the short version **[button text=%%"Some Text"%%]** and then later you use the long version **[button]Some Text[/button]** it will break the page, because it will read the shortcode as one - beginning with **[button text=%%"Some Text"%%** and ending with **Some Text[/button]**. So if you need multiple buttons on the same page, always use the long version

==== Examples ====
[button]Hello2you[/button]

[button url=%%'http://www.google.com'%% type='green']Google[/button]

[button url=%%'http://www.google.com'%%]

[button type='green' text='Goodbye2you']

{{ :skoda-ep:skoda-wlc-2016:wlc_shortcode_buttons.png?nolink |}}

=== Type ===
Specifies the type of the button. Either dark or green can be used:

=== Title ===
Title is displayed when the user hovers mouse over the button

=== Url ===
If the button has URL, it will create a link to that page

== Target ==
If the button has URL, it will be opened in the same window. You can specify a target window to open it in a new one - "blank" is usually used unless you well know what you are doing.



===== IFrame =====

Shortcode: [skoda-iframe **%%src="http://www.google.com"%%** //%%width="%d|%d%"%%// //%%height="%d"%%// //%%getparams="true"%%//]

=== Src ===
Specifies the source of the iframe

=== Width / Height ===
Default width is 100%
You can set either a number (in pixels) or a percentage (i.e. 80%)

Default height is 780px
Only number in pixels can be set


=== Getparams ===
Only use if you know what you are doing

This parameter will copy the URL parameters of the current page and append it to the source of the iframe

Usually used in combination with UTM parameters

===== Personality test =====
Shortcode: [personality_test //lang='en_US'//]

By default the personality test will be in the default site language, but can be overridden. Languages that can be used:
  * da_DK
  * de_CH
  * de_DE
  * en_US
  * es_ES
  * fr_BE
  * fr_CH
  * fr_FR
  * it_CH
  * it_IT
  * nl_BE
  * nl_NL
  * pl_PL
  * sk_SK