Pellet Fan

All Things Considered => General Discussion--Food Related => Topic started by: pz on September 07, 2017, 06:32:59 PM

Title: Formatting pictures and text in a table
Post by: pz on September 07, 2017, 06:32:59 PM

This is certainly not for everyone, but if you want to format your posts in tables, the result can be easy on the eye. The process is somewhat involved at first, but not too bad once you get the hang of it.

Here is a short general introduction into what a table is in a forum post:
A table is a grid of data squares much like a spreadsheet. Into these squares you can post anything, including text and links to pictures. Consider the following table code, which you place in a post by clicking the button with a grid icon.

Code: [Select]

[table]
[tr]
[td][/td]
[/tr]
[/table]
In the above code,

Code: [Select]

[table] means the start of a table, and [/table] means the end of the table

Code: [Select]

[tr] means the start of a new row in the table and [/tr] means the end of that row of data

Code: [Select]

[td] means the start of a cell of data and [/td] is the end marker for that data cell.

Now for a real world forum example to create a post that has two pictures with descriptions. The code looks like this:

Code: [Select]

[table]
[tr]
[td]Description of first image[/td]
[td]   [/td]
[td]Description of second image[/td]
[/tr]
[tr]
[td][img width=300]Link to first image[/img][/td]
[td]   [/td]
[td][img width=300]Link to second image[/img][/td]
[/tr]
[/table]
Using the template above you replace Description of first image with your description, and Link to first image with the link to that image. Do the same with the second image and description and it looks like this:

Code: [Select]

[table]
[tr]
[td]I did St. Louis spares and also cooked the
sternum and riblets in the Traeger modified
with a Pellet Pro PID.[/td]
[td]   [/td]
[td]The ribs turned out quite good (hard to ruin
ribs) with a good bite, savory with hints of honey
butter, and brown sugar.[/td]
[/tr]
[tr]
[td][img width=300]https://lh3.googleusercontent.com/hePqNOlyQ5vTZ3YXDABOAOTWMEm9HIspiyZiV6C-FKOucH31dfq1vxQNJPkJzYWubTXwjdrIl8KFEogT8_CH8DJLjhSE_CfP6h0ssSRuEHR6An4mN1-fR8KYoQA-5-WWK_bIJT6wsy0DtPwcIlVhuxTGykP7gZ4UXV8n4q7OhzHxv8B-RFlOMiSlc5eYPUkC66qA3u7kL1Pk_JgoNsqO0nK93JcfGV2e8eC2tuofMCRCrPEsdgCf1G6GFrrKgfbM187jDRXYTr7ScWuytEfx5svOe1FX-6XrNJVsrTBSZ8Twg-8M7kJt1ALxcismWe1IxTRd2y2qlKu8xIsCrU1fmgR8j_MZngT_ZytIHCaKVE6asSFmfjz_NIL2GZlqo-0HwbD08V0-z7j9BfDJkY-HMGpxGd-DbNC_9QCuLxmHtJZS938y_s-bK9zpA_UOoZGZiovdMFfR1QUS9ynMptEiMppHcO1p7o6WrGOq5iZYjgWq7TqzoL5QX4AqOSc4IlqH3b_SGCbQmVlESEvnl_NW91yAwYobX8XWX3kwyQn1GNqLJo1P15F24gfYsq42g8kQfUHcXFKrwxfDMvmXCdqWK0Q1Wt6uMGQa2lOaQSUzXn7Nhp7Z9QxF=w1951-h1301-no[/img][/td]
[td]   [/td]
[td][img width=300]https://lh3.googleusercontent.com/jll0JUFHV05XocVtaNagQC_bwMgfr5pQcrDioBT2UCjMbBGKfIYo8DOB8c5H4IXXGnJ_wPEN0miEOea_8-fNLzjjDK9c3oIz3LNvgXeDs4QXIgD_xMXpIlZvaVaCcBo3zP2fgOm6mzrgxRAv2n2B8LOlJTiRj3HZgp7pEACwCRmVzSYeMbrgSDOGJb7zKCsdc3CJs1Qb_wFCOoxgH9LmIoyIsAQeRXwLFQE-zr7vMJ9cebCs-Y1M_2-kfuaSec8KGAbo-gZ9uA01HFw72Y60_FupKn2Yd-eqMQ8cBe2xMxzVLqe4ea8q9rsp_EfMJBLRl25hobl_pxIcPKTWA5fgw13o6Ueg3IswbTA84pslcNIILCg707Z4_fTUEOaVb2NZl0NZE9ArBzfw8BZkzHYHJLWwC1hS44cGf7DO3DTwLzcCiuEODtMiZFao-vY9CZ3-nNNjedoiQBWyKHgCeOJ8WAvRIUea0kA0HyOpPDHQxpp8ZeFGFxQWHqKS3mxayhzEbasVvFUCxYkSprgVL26bQPN_yUHye1JpBNB2tS39Hc_eIKFtGYL2cF18jV4Y_YUEHjMGzSnkzOA2c7yP0fLYIsAKNrNdRBNH3KiU6wzwgCXRrPj6GM6L=w1951-h1301-no[/img][/td]
[/tr]
[/table]

---

... and the above code results in this when you do a post preview:

I did St. Louis spares and also cooked the sternum and riblets in the Traeger modified with a Pellet Pro PID.		The ribs turned out quite good (hard to ruin ribs) with a good bite, savory with hints of honey butter, and brown sugar.
(https://lh3.googleusercontent.com/hePqNOlyQ5vTZ3YXDABOAOTWMEm9HIspiyZiV6C-FKOucH31dfq1vxQNJPkJzYWubTXwjdrIl8KFEogT8_CH8DJLjhSE_CfP6h0ssSRuEHR6An4mN1-fR8KYoQA-5-WWK_bIJT6wsy0DtPwcIlVhuxTGykP7gZ4UXV8n4q7OhzHxv8B-RFlOMiSlc5eYPUkC66qA3u7kL1Pk_JgoNsqO0nK93JcfGV2e8eC2tuofMCRCrPEsdgCf1G6GFrrKgfbM187jDRXYTr7ScWuytEfx5svOe1FX-6XrNJVsrTBSZ8Twg-8M7kJt1ALxcismWe1IxTRd2y2qlKu8xIsCrU1fmgR8j_MZngT_ZytIHCaKVE6asSFmfjz_NIL2GZlqo-0HwbD08V0-z7j9BfDJkY-HMGpxGd-DbNC_9QCuLxmHtJZS938y_s-bK9zpA_UOoZGZiovdMFfR1QUS9ynMptEiMppHcO1p7o6WrGOq5iZYjgWq7TqzoL5QX4AqOSc4IlqH3b_SGCbQmVlESEvnl_NW91yAwYobX8XWX3kwyQn1GNqLJo1P15F24gfYsq42g8kQfUHcXFKrwxfDMvmXCdqWK0Q1Wt6uMGQa2lOaQSUzXn7Nhp7Z9QxF=w1951-h1301-no)		(https://lh3.googleusercontent.com/jll0JUFHV05XocVtaNagQC_bwMgfr5pQcrDioBT2UCjMbBGKfIYo8DOB8c5H4IXXGnJ_wPEN0miEOea_8-fNLzjjDK9c3oIz3LNvgXeDs4QXIgD_xMXpIlZvaVaCcBo3zP2fgOm6mzrgxRAv2n2B8LOlJTiRj3HZgp7pEACwCRmVzSYeMbrgSDOGJb7zKCsdc3CJs1Qb_wFCOoxgH9LmIoyIsAQeRXwLFQE-zr7vMJ9cebCs-Y1M_2-kfuaSec8KGAbo-gZ9uA01HFw72Y60_FupKn2Yd-eqMQ8cBe2xMxzVLqe4ea8q9rsp_EfMJBLRl25hobl_pxIcPKTWA5fgw13o6Ueg3IswbTA84pslcNIILCg707Z4_fTUEOaVb2NZl0NZE9ArBzfw8BZkzHYHJLWwC1hS44cGf7DO3DTwLzcCiuEODtMiZFao-vY9CZ3-nNNjedoiQBWyKHgCeOJ8WAvRIUea0kA0HyOpPDHQxpp8ZeFGFxQWHqKS3mxayhzEbasVvFUCxYkSprgVL26bQPN_yUHye1JpBNB2tS39Hc_eIKFtGYL2cF18jV4Y_YUEHjMGzSnkzOA2c7yP0fLYIsAKNrNdRBNH3KiU6wzwgCXRrPj6GM6L=w1951-h1301-no)

---

I know it looks daunting at first, but if you check the table code for a while the it is relatively easy to keep a template in Notepad and paste it into a post.

This is the template I use for a post with 6 pictures and their descriptions. All I do is put in the descriptions and links to the photos (sorry mine are so long in the example above, but I use Google Photos)

Template for 6 pictures and their descriptions:

Code: [Select]

General description of the post goes here

[hr]
[table][tr][td]
[b]Click the pics to toggle full/normal size[/b]

[table]
[tr]
[td]Description of first image[/td]
[td]   [/td]
[td]Description of second image[/td]
[/tr]
[tr]
[td][img width=300]Link to first image[/img][/td]
[td]   [/td]
[td][img width=300]Link to second image[/img][/td]
[/tr]
[tr]
[td]Description of third image[/td]
[td]   [/td]
[td]Description of fourth image[/td]
[/tr]
[tr]
[td][img width=300]Link to third image[/img][/td]
[td]   [/td]
[td][img width=300]Link to fourth image[/img][/td]
[/tr]
[tr]
[td]Description of fifth image[/td]
[td]   [/td]
[td]Description of sixth image[/td]
[/tr]
[tr]
[td][img width=300]Link to fifth image[/img][/td]
[td]   [/td]
[td][img width=300]Link to sixth image[/img][/td]
[/tr]
[/table]

Title: Re: Formatting pictures and text in a table
Post by: Quadman750 on September 07, 2017, 06:40:05 PM

 Well that looks a little over my head. But I'm going to tell you your posts are absolutely wonderful to look at with the pictures the way you post them.

Title: Re: Formatting pictures and text in a table
Post by: pz on September 07, 2017, 06:56:32 PM

Thanks Quadman - I know technology a bit - wish I could cook as well  ;D

Title: Re: Formatting pictures and text in a table
Post by: Queball on September 07, 2017, 07:20:28 PM

Way ABOVE my pay grade! .... but very cool. ... Knowledge is power.

Title: Re: Formatting pictures and text in a table
Post by: Bar-B-Lew on September 07, 2017, 07:42:44 PM

So basically, we just copy and paste that code and then do the replacement work.  If you don't mind, please PM me the templates that you have already created.  I can just keep that message and copy and paste from it when I want to use these templates.  Awesome!  Thanks for sharing!


Also, do you know if the same code works on Blogger?

Title: Re: Formatting pictures and text in a table
Post by: pz on September 07, 2017, 07:55:37 PM

I'll send you a PM of the templates - I do 2, 4, and 6 picture versions for ease of use.

I don't know about Blogger - if it does BBCode, then this will work.  BBCode is what this forum uses, and most forums are the same (there are of course exceptions  ;D )

Title: Re: Formatting pictures and text in a table
Post by: pz on September 08, 2017, 11:26:31 AM

BBL, It looks like the easiest way to get these is right in a post - PMs do not allow attachments.  ;)