How to show a picture on the forums.
View previous topic | View next topic >
Post new topic Reply to topic
M.A.I.L. Forum Index -> M.A.I.L. Help
   
Author Message

Joined: January 17, 2013
Posts: 373
Submissions: 5
Location: Probably in the garage...

How to show a picture on the forums.
Reply with quote
Posted on Sun Nov 15, 2015 6:04 am
Link to Post: Link to Post

Maybe you want to show an image of what you're working on, point out those parts that are giving you trouble or just show off your latest piece.

wrote:
How do I post a picture?


This question comes up every once in a while so I figured I'd write up a little post on how to do so.

While the BBCode help is near by, few of us are going to read it, find the section about linking to an image and then understand it enough to know what to do next.

"I just want to post a picture..."

So here's a fairly quick explanation of what you need to do to share your images on the forums.

First off, you need to have your image hosted out on the internet somewhere.

You can submit your image to the M.A.I.L. Gallery, details on how to submit an image to the gallery can be found here. Submitted images are reviewed by admins before being posted to the gallery.

If you're in a hurry, there are a bunch of image hosting sites out there like TinyPic, Photobucket, Flickr, and ImageShack. I can't really recommend one as I don't use any of them myself, I have my own websites for hosting my images.

Once your picture is hosted on the internet (either in the Gallery or elsewhere on the Internet) and you have a link to it, create a post that includes that link then enclose the link with IMG tags so the forums know it's an image.

Getting the link or address for your picture is pretty easy. Most image hosts will have a "Get Link" button or something similar, if not you can right-click on your image and choose "Save or Copy Image URL". Then come back here and paste the link/address/URL into your message with IMG tags surrounding it.

Image tags? What are those?

"Tags" are special words surrounded by square brackets "[ ]" that help the forums show information in different ways. Most tags have an opening set of brackets with a name that defines what type of tag it is [tag_name]. Next you have the data for the tag, followed by a set of closing brackets [/tag_name] to indicate that the tag ends and what follows should be treated or shown as normal text. Everything "inside" of the inner tag markers ] [/ is treated as tag data and processed based on the tag.

I'll show you with the bold and italic tags. Text that's inside of the tag will be bolded or italic while text outside of the tags will remain normal. The bold tag has a short name of "b" and the italic tag is "i", so I only need to use those as the tag names.

Every second word is in bold but the rest of this sentence is in italics.

Which required me to type it out as follows.

Code:
Every [b]second[/b] word [b]is[/b] in [b]bold[/b] but the rest of [i]this sentence is in italics[/i].


FYI: Ignore the "Code:" statement or presence, you don't need to worry about it. The
Code:
 
tag it's used to show the full syntax of tags otherwise the forums try to process the tags and you can't see what I'm talking about.

If you want to know more about the various tags you can use on the site, check that BBCode link at the top. The important things to remember about tags is that they have a valid name, an open [ ] tag, contain data to be processed by the tag and that they have a close [/ ] tag.

"I just want to post an image!!!"

Oh yeah, sorry, back on point.

Using the [img] tag to show an image.

To do this you need to tag the image link with IMG tags by opening the image tag [img], inserting (paste or type out) the link to your image then adding a closing image tag [/img ] to the end.

It should look something like this when you're typing it out.

Code:


This is my picture.

[img]http://www.imagehost.com/something/my_picture.jpg[/img]

Isn't it nice.


It's pretty easy, put a link to your image between [img] and [/img] and post your message. You can verify that you've linked to the image properly by hitting the Preview button when making a post, if the image doesn't show up when you preview it go back and check for typos or malformed tags.

Here's a real example. I want to show you a image my AR Chain. The link to the image is

http://www.lostsensesdesigns.ca/images/web/AR/AR_Chain_v2.jpg

so I need to type.

Code:

[img]http://www.lostsensesdesigns.ca/images/web/AR/AR_Chain_v2.jpg[/img]


Which shows us this.


In an attempt to keep the forum layout intact and page loads reasonably quick, it's requested that you keep the images to 800px or less per side and try to keep the file size below 100kb.

I know, 800px and 100kb seems small by today's standards but it's it's enough for most purposes around here, Providing the lighting and focus in your image are good there shouldn't be a need to go above these guidelines.

If you need to resize your image there is a link on how to do so in the Gallery submission page mentioned above.

If you have any questions ask away.


Mostly Harmless

Joined: May 26, 2010
Posts: 236
Submissions: 30

Reply with quote
Posted on Sun Nov 15, 2015 10:38 am
Link to Post: Link to Post

Some pieces do not lend themselves to the 800x800 limit. Dr. T's panther shirt, for example, is just a shiny grey blur at that size, as is pretty much any relatively large product with rings smaller than about 3/16". For these, I would personally embed an 800x800 version of the original pic using the img tags and also link to a high-resolution version of the pic without using the tags. Several common image hosts have resizing features that should make this fairy easy to do.

Code:
[img]http://www.imagehost.com/something/my_picture_800px.jpg[/img]

http://www.imagehost.com/something/my_picture_full_size.jpg


Unfortunately the gallery rules specifically forbid linking off-site like that but for posting in forum threads it should be fine.

Joined: January 17, 2013
Posts: 373
Submissions: 5
Location: Probably in the garage...

Reply with quote
Posted on Sun Nov 15, 2015 8:04 pm
Link to Post: Link to Post

Slagr wrote:
Some pieces do not lend themselves to the 800x800 limit. Dr. T's panther shirt, for example, is just a shiny grey blur at that size, as is pretty much any relatively large product with rings smaller than about 3/16".


You could always have two images, one of the full piece and another for a close up of the weave. As I've been slowly learning over the years a good image depends on a lot more than just resolution. A blurry 4K picture is still just a blurry picture... I'll start working on another "How To" on taking and editing photographs.

Metals rings are round and shine, they cast light and shadows all over the place. The slightest bit of movement in the camera will cause that blur. My 2.1 MP Canon powershot can take incredible pictures on a tripod, free-hand it and it sucks. Lighting is also paramount but all that is for another post.

Until then, if your image has to be over 800px, I'd suggest using the URL tag to post a link to the image. This way the forum layout doesn't get stretched all over the place but if someone want's more details than the 800px image can provide they can click the link and find out more. Unlike the IMG tag which shows an image here in the forums, a URL link directs someone to another page or website.

Using the [url=] and [/url] tags to create a link.

The URL tag is a little bit different from most other tags because it needs to contain two pieces of tag data. One piece provides the link information and the other piece gives it a label. The link is embedded in the opening [url] tag and the label sits between the inner brackets ] [.

An example.

Here is a link to the forums.

Written out it looks like this.
Code:
[url=http://www.mailleartisans.org/board/]Here[/url] is a link to the forums.

The link is added to the opening tag by using the equals symbol =. This defines where someone is going to go when they click on it. The next part is the label sitting between the ] [ brackets, in the example above I called it "Here".

The opening tag with the link.
Code:
[url=http://www.mailleartisans.org/board/]


The label.
Code:
Here


The closing tag.
Code:
[/url]


The big change with the URL tag is adding the link into the opening tag by using the = symbol.

Keep in mind that links can be deceptive, /starts humming a Sesame Street song. "One of these things is not like the other, one of these things is different."

These next two links look the same but bring you to different locations.
Click me
Click me
They both have the same lablel of "Click me", yet the first one takes you to the main page while the second one takes you to my Four Core Chain in the gallery.

Code:
[url=http://www.mailleartisans.org/]Click me[/url]
[url=http://www.mailleartisans.org/gallery/gallerydisplay.php?key=8633]Click me[/url]


Most web browsers will show you the link location in the bottom left when you float over a link. Put your cursor over one of the above links, don't click just leave your cursor floating over it. Now look down in the bottom left you should see the link location showing where each link goes to, which will match the info above.

I mention link checking for a few reasons, first off it's just good practice to verify that any link goes to something that makes sense relative to the context of the link before clicking on it. Second, for personal troubleshooting. Sometimes you won't see your errors until you look at it a different way, by previewing your post and hovering over your links you may notice an error that just blended in to the post window before. I also have a bad habit of copy/pasting when posting multiple items, sometimes I miss one, paste two of the same thing or forget to update the label or link.


Mostly Harmless

Post new topic Reply to topic
Jump to:  
Page 1 of 1
All times are GMT. The time now is Wed Oct 23, 2019 11:14 am
M.A.I.L. Forum Index -> M.A.I.L. Help
Display posts from previous: