Differences

This shows you the differences between two versions of the page.

--- doc:plugins:bbcode [2023/01/22 14:09] – added Video section arvid
+++ doc:plugins:bbcode [2026/02/28 19:12] (current) – added a little more description of attributes arvid
@@ Line 1: / Line 1: @@
 ====== BBCode Plugin ======
-===== What is BBCode ? =====
+===== General =====
 BBCode is a simple-to-understand markup language. See: [[wp>BBCode]]
+The plugin provides a variety of different elements, called tags. For example, there are tags for headlines, text formattings, links, images, and so on.
+Many tags have attributes that modify the behaviour of the tag (such as the "width" and "height" attribute of images that define the dimensions the image is displayed with). Attribute values are set in double quotes: %%[tag attribute="value"]%%\\
+//(In fact, if the value does not contain blanks, you could go without the quotes - we recommend always to use them.)//
 ===== Available Tags =====
 ==== Content elements ====
+<WRAP right round tip 200px>
+It's not too complicated to add custom BBCode tags - [[doc:plugins:bbcode:tips|here's how]].
+</WRAP>
   * [h2]Heading 2nd level[/h2] to [h6]Heading 6th level[/h6]\\ //(Because h1 is the heading for the page title, it has been disabled in the content of every page.)//
   * [quote]text quotation[/quote]
@@ Line 11: / Line 19: @@
   * [list]\\ [*]bulleted list element 1\\ [*]bulleted list element 2\\ [/list]
   * [list=#]\\ [*]Numbered list element 1\\ [*]Numbered list element 2\\ [/list]
-  * %%[url]http://www.page.com[/url]%% or %%[url=http://www.mypage.com]description[/url]%%
-       *  url can begin with images/ or attachs/ (images/ will be translated into IMAGES_DIR, attachs/ into ATTACHS_DIR, typically fp-content/attachs/)
-    * [mail]user@example.org[/mail] or [mail=user@example.org]link text[/url] adds a bot-protected mail link
   * [html][/html] literal html. All code between these is not changed.\\ //Alternative: Enable [[doc:plugins:bbcode:tips|inline HTML]].//
+==== Text formatting ====
+  * [b]bold[/b]
+  * [i]italic[/i]
+  * [u]underlined[/u]
+  * [del]strike-through[/del]
+  * [size="80%"]smaller[/size] or [size="120%"]bigger[/size] text
+  * [font="FONT"]font[/font]\\ //FONT is a valid css font-family value ("sans-serif", "Times" etc.)//
+  * [color="COLOR"]color[/color]\\ //COLOR is a valid css color value (e.g. #cb0600)//
+    * Pickers to get the codes: for example [[https://redketchup.io/color-picker|RedKetchup Color Picker]] or [[https://www.w3schools.com/colors/colors_picker.asp|W3schools]]
+==== Links ====
+  * Simple: %%[url]DESTINATION[/url]%%
+  * Advanced: %%[url="DESTINATION" (rel="relationship") (target="target")]Link text[/url]%% \\ //(items in parenthesis are optional, when you use those items you have to leave away the parenthesis!)//.
+    * **DESTINATION** may be:
+      * an external URL: %%"https://www.example.org"%%
+      * an uploaded file: %%"attachs/somefile.zip"%%
+      * an uploaded file: %%"images/someimage.jpg"%%
+    * **rel** specifies the relationship between the current and the linked document (see [[https://www.w3schools.com/TAGS/att_a_rel.asp|doc on W3Schools]])
+    * **target** (available as of FlatPress 1.3) specifies where to open the linked document (see [[https://www.w3schools.com/TAGS/att_a_target.asp|doc on W3Schools]])
+  * Simple email link: %%[mail]user@example.org[/mail]%%
+  * Advanced email link: [mail="user@example.org"]link text[/url]
 ==== Images ====
-  * [img=IMAGEPATH (alt=alternate text) (title=title text) (popup=false) (scale=NN%) (width=N) (height=N) (float=left|right) (loading=lazy|eager)] \\ //(items in parenthesis are optional)//.
+  * [img="IMAGEPATH" (alt="alternate text") (title="title text") (popup="false") (scale="NN%") (width="N") (height="N") (float="left"|"right") (loading="lazy"|"eager")] \\ //(items in parenthesis are optional, when you use those items you have to leave away the parenthesis!)//.
      * if **IMAGEPATH** begins with images/ it will be automatically translated into the appropriate URL for fp-content/images/
      * **alt** sets the alternate text
-     * **title** title shown on mouse-over
+     * **title**: title shown on mouse-over.
      * **popup** If set to true and the //LightBox2// plug-in is enabled (it is by default) display of the image will driven by the plug-in. (Actually the plug-in is the LightBox work-alike [[http://www.digitalia.be/software/slimbox|Slimbox]]).
      * **scale** creates a thumbnail NN% smaller than the original. Example: [img=images/picture.jpg scale=5%]
@@ Line 33: / Line 60: @@
 ==== Videos ====
-  * [video=VIDEOPATH (width=N) (height=N) (float=left|right)] \\ //(items in parenthesis are optional)//.
+  * [video="VIDEOPATH" (width="N") (height="N") (float="left"|"right")] \\ //(items in parenthesis are optional, when you use those items you have to leave away the parenthesis!))//.
     * **VIDEOPATH** may be:
       * an uploaded file: %%"attachs/video.mp4"%%
       * a remote file: %%"https//example.org/video.mp4"%%
-      * a YouTube link: %%"http://youtube.com/THEVIDEO"%%
+      * a YouTube link: %%"https://www.youtube.com/watch?v=THEVIDEO"%%
       * a Facebook Video link: %%"https://www.facebook.com/watch/?v=THEVIDEO"%%
       * a Vimeo link: %%"https://vimeo.com/THEVIDEO"%%
     * **width** and **height** set the width or height on the video in pixels. You can use both of them or only one. If you set only one the re-sized video will retain its aspect ratio.
     * **float** float the images to the left or to the right
-==== Text format ====
-  * [b]bold[/b]
-  * [i]italic[/i]
-  * [u]underlined[/u]
-  * [del]strike-through[/del]
-  * [size=80%]smaller[/size] or [size=120%]bigger[/size] text
-  * [font=FONT]font[/font]\\ //FONT is a valid css font-family value ("sans-serif", "Times" etc.)//
-  * [color=COLOR]color[/color]\\ //COLOR is a valid css color value (e.g. #cb0600)//
 ===== BBCode from other standard plugins =====
   * [more] ([[doc:plugins:standard#readmore|Read More plugin]]): breaks up long post on the main page with the [Read More…] link that can be clicked on to see the rest of the post
-  * [entryurl=ENTRY-ID]link text[/entryurl] and [iurl=PAGE]link text[/iurl] ([[res:plugins:internalurls|Internal URLs plugin]]): These elements create links to static pages or entries.
+  * [entryurl="ENTRY-ID"]link text[/entryurl] and [iurl="PAGE"]link text[/iurl] ([[res:plugins:internalurls|Internal URLs plugin]]): These elements create links to static pages or entries.