Differences

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

--- doc:plugins:bbcode [2021/06/29 23:17] – [Images] Attempts to clarify interaction of popup and lightbox2 when creating thumbnails norfolkgreg
+++ 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]
-  * [video=http://youtube.com/MYVIDEO] allows to insert a YouTube, Vimeo or Facebook video in your entry
-  * %%[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.
-     * **float** float the images to the left or to the right
      * **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%]
-         * If the //thumb// plugin is enabled (it is by default) the generated thumbnail is a real, static thumbnail. Otherwise the image will look small in browser but the browser will be actually downloading the original file.
+         * If the //thumb// plugin is enabled (it is by default) and the server has the GD2 php extension installed (usually it is) the generated thumbnail is a real, static thumbnail. Otherwise the image will look small in browser but the browser will be actually downloading the original file.
-         * Setting a scale value automatically invokes popup=true, and clicking on the thumbnail will display the image in a "LightBox".
+         * Setting a scale value automatically invokes popup=true and clicking on the thumbnail will display the image in a "LightBox".
-     * **width** and **height** set the width or height on the image in pixels. You can use both of them or only one. If you set only one the re-sized image will retain its aspect ratio. (This doesn't work on remote images, and needs GD2 php extension to be installed; usually it is.)
+         * Scale doesn't work on remote images.
-       * As with **scale**, if the //thumb// plug-in is enabled it will generate a thumbnail image file and popup=true will be invoked, unless specifically set to false.
+     * **width** and **height** set the width or height on the image in pixels. You can use both of them or only one. If you set only one the re-sized image will retain its aspect ratio.
+       * if the //thumb// plug-in is enabled and the GD2 php extension is installed on the server (usually it is) it will generate a thumbnail image file and popup=true will be invoked, unless specifically set to false.
+       * Static thumbnail creation does not work on remote images.
+     * **float** float the images to the left or to the right
      * **loading** images will be loaded not before the user scrolls near them ("lazy" - better performance!) or immediately on loading the page. If not set explicitly, "lazy" is used.
-==== Text format ====
-  * [b]bold[/b]
+==== Videos ====
-  * [i]italic[/i]
+  * [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!))//.
-  * [u]underlined[/u]
+    * **VIDEOPATH** may be:
-  * [del]strike-through[/del]
+      * an uploaded file: %%"attachs/video.mp4"%%
-  * [size=80%]smaller[/size] or [size=120%]bigger[/size] text
+      * a remote file: %%"https//example.org/video.mp4"%%
-  * [font=FONT]font[/font]\\ //FONT is a valid css font-family value ("sans-serif", "Times" etc.)//
+      * a YouTube link: %%"https://www.youtube.com/watch?v=THEVIDEO"%%
-  * [color=COLOR]color[/color]\\ //COLOR is a valid css color value (e.g. #cb0600)//
+      * 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
 ===== 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.