User Tools

Site Tools


doc:plugins:bbcode

BBCode Plugin

What is BBCode ?

BBCode is a simple-to-understand markup language. See: BBCode

Available Tags

Content elements

It's not too complicated to add custom BBCode tags - here's how.

  • [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]
  • [code]code[/code]
  • [list]
    [*]bulleted list element 1
    [*]bulleted list element 2
    [/list]
  • [list=#]
    [*]Numbered list element 1
    [*]Numbered list element 2
    [/list]
  • [html][/html] literal html. All code between these is not changed.
    Alternative: Enable 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)
  • Simple: [url]DESTINATION[/url]
  • Advanced: [url=DESTINATION (rel=relationship) (target=target)]Link text[/url]
    (items in parenthesis are optional).
    • 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 doc on W3Schools)
    • target (available as of FlatPress 1.3) specifies where to open the linked document (see 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).
    • 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
    • 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 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) 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”.
      • Scale doesn't work on remote images.
    • 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.

Videos

  • [video=VIDEOPATH (width=N) (height=N) (float=left|right)]
    (items in parenthesis are optional).
    • 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 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] (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] (Internal URLs plugin): These elements create links to static pages or entries.
doc/plugins/bbcode.txt · Last modified: 2024/04/01 14:41 by arvid

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki