"How to" thread

[Marceline]

@Dimcairien Luiniel and anyone else who was hoping to be able to resize images - I've added some custom code to allow this. It's the new "img-resize" bbcode option in the post box and should be used thusly:

Code: Select all

[img-resize=WIDTH]URL[/img-resize]

WIDTH is a number in pixels, URL is an image URL same as always

Note though that images cannot be stretched wider than the post content box at a given screen width

I've tested it a bit locally but please let me know if it doesn't work at any point

Editing to add a couple examples:

Code: Select all

[img-resize=20]https://www.lotrfanaticsplaza.com/forum/images/ranks/000.gif[/img-resize]

gives us this:

Code: Select all

[img-resize=120]https://www.lotrfanaticsplaza.com/forum/images/ranks/000.gif[/img-resize]

gives us this (aka no guarantees that images stretched beyond their original size will not look like poo)

[Marceline]

Introducing . . . Tables!

Howdy folks! I've added an extension to the board that will allow us to insert tables into posts.

Like BBCode itself, the extension generates some clunky code, but the end result is a working table with a shaded header row, like this:

This	Is	Cool
Wow	so	nifty
Oh	my	organization
Many	columns	and rows

How to Use the Tables

Once you click on the new table button when composing a post, you'll see a bunch of pre-configured options for number of columns and rows. Select the table size you want, and it'll spit a bunch of BBCode into the post box.

The extension provides some guidelines for how to use the code it produces, but I've written some Plaza-specific ones here since there are a few things about these tables that we won't end up using. Take a look at the screenshots and key below, give it a try when you've got a need for tables, and let us know if you have any questions!

Key:

• Replace the automatically-generated "Title" and "Text"s with your own content. You can include text, links, and images inside of table cells, and existing formatting tags (like bold, italic, strikethrough, etc.) will work as usual.

• 1 - The number in [table=45,null] specifies the width of the table as a % of the displayed post box. The max value is 98%. Note that this % is relative to browser size and that the rendered tables don't look great on mobile.

• 2 - The null in [table=45,null] is where you specify how you want the table to float relative to the text. Options: null, tright, tleft, tcenter. The default is null. Examples below:
  • null
    • 
  • tright
    • 
  • tleft
    • 
  • tcenter
    • 

• 3 - Specifies text alignment in the header row. Options: textleft, textright, tcenter

• 4 - Specifies column width (as a % of the table). Each [th=33,null]Title[/th] line is equivalent to one column. While they need not be uniform, column width values must total 100.

• 5 - Leave this second value for th tags as null.

• 6 - [tr=bg1] or [tr=bg2] are for styling, but we don't use them for anything. Leave these values as they are.

• 7 - You can specify the text alignment for individual cells by replacing the null in [td=null,1]. Options: null (default), textleft, textright, textcenter.

• 8 - These values specify how many columns a given cell will take up. The default and most common use case will be 1. In most situations, you'll want to leave these as-is.