[FAQ] How to post pictures on CS...

[Cactus jACK]

Here's a quick tutorial on posting images on CS.

Despite popular belief, there is no "post count" or "registration" requirements before CSers can post and share photos on CS. If you're doing it for the first time, it is often just the subtleties in the coding that may cause the images not to show, often leading to the belief that it there might be some restriction on sharing.

Just follow these steps, and 1-2-3 you'll be sharing your photo before you know it...

Step 1: Upload your picture online (e.g. flickr, CS gallery, etc)
Step 2: Copy and paste the (i) BB code or (ii) link into the text edit box in CS
Step 3: Voilà!! It's really only 2 steps...


Bruce Lee @ Avenue of the Stars, HK

If you would like to test your "permission" level of posting images, you can copy and paste the following code and test it in the "Garbage and Testing" section.

[url=http://www.flickr.com/photos/myleicamp/5722231021/][img]http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg[/img][/url] - image w/ hyperlink

[img]http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg[/img] - image only

 

[Cactus jACK]

Step 1: Upload your picture online (e.g. flickr, CS gallery, etc)

Many people use www.flickr.com to host their images, be it a free or pro account. The free account (linked to a Yahoo! account) does have limitations e.g. largest viewable file would be 1024 pixels on the long side, monthly upload limit, and you can only view the latest 200 images (the older ones can still be referenced or linked)

Alternatively, CS also provides a free ClubSNAP Photo Galleries of 500MB linked to your CS nick, limited to 800kb per uploaded file.

If you currently don't have a device to load your images online to share, you can sign up for either one of these free accounts.

--- --- ---

Step 2: Copy and paste the (i) BB code or (ii) link into the text edit box in CS

Most of the hosting services provide either HyperText Markup Language (HTML) or Bulletin Board Code (BB code) for linking images... these are easily distinguished by HTML in <angle> brackets, while BB code is in [square] brackets

3 options are described below for BBcode (used by vBulletin):

- Option (a) Hyperlinked / Linked Images from Flickr
- Option (b) Linked Image from CS Gallery
- Option (c) Link Using Web Address only

What's the difference between Linked and Hyperlinked Image?
A linked image is simply a referenced image which is not embedded in the document / page, but referenced from another source.
A hyperlinked image is typically a linked image which has the ability for you to click on them to jump to another document / page or a section within the current document / page

--- --- ---

Step 3: Voilà!!

 

[Cactus jACK]

Step 2: Option (a) Hyperlinked Image from Flickr (If you want to just have a Linked Image from Flickr, pls see bottom of the post)

On flickr,
(i) Click on the "Share" button
(ii) Make sure you're on the "Grab the HTML/BBCode" tab
(iii) Choose the file size you would like to share (typically 640 pixels on the length is sufficient)
(iv) Make sure you've chosen the BBCode button
(v) Copy the code provided



(vi) Paste the text directly into the CS text edit box. You may add text before or after your code to introduce or describe your image.





The default BBcode provided by flickr.com gives the a hyperlinked imaged, i.e. an image which is hyperlinked back to flickr.com
URL codes in red and IMG codes in blue

[url=http://www.flickr.com/photos/myleicamp/5722231021/][img]http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg[/img][/url]

--- End result ---


Leica M8 35mm Summilux-M by myleicamp, on Flickr

If you want to just have a Linked Image from Flickr, follow the above steps, but simply remove the URL related code in red after pasting, resulting in the following code

[img]http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg[/img]

 

[Cactus jACK]

Step 2: Option (b) Linked Image from CS Gallery

On CS galleries,

There are essentially 3 options,

(a) Linked Thumbnail - BBcode for a thumbnail of the image which is linked to the image in the CS gallery.
*click on the "link" icon to the right of the "Linked Thumbnail" to open up more options*
(b) Linked Image - BBcode for the image only (no link provided back to CS gallery)
(c) Direct Link - This is just the wed address of the image (see next post as to how to use uncoded web addresses)

I recommend that you use option (b) Linked Images.
(i) Click on the "link" icon to the right of the "Linked Thumbnail" to open up more options below
(ii) Copy the code provided next to the "Linked Image" option
(iii) Paste the text directly into the CS text edit box. You may add text before or after your code to introduce or describe your image.



The default BBcode provided here shows the image without the hyperlink.

[img]http://gallery.clubsnap.com/data/501/Leica_M8_35mm_Summilux-M.jpg[/img]

--- End Result ---

A more detailed write-up on uploading and posting images from the ClubSNAP gallery is available here.

 

[Cactus jACK]

Step 2: Option (c) Link Using Web Address only

If you have the have the web address of the image but not the BBcode, there are 2 very simple options. Pls note, the web address of the image should be an image file (ending with .jpeg, .png, etc), and not a folder.

Right: http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg
Wrong: http://www.flickr.com/photos/myleicamp/5722231021/

(a) Use the Add "Image" button (to the left of the "Movie" button) in the CS text edit box...



This will bring up a pop-up window where you can input the web address of your image.
- Make sure you're on the "From URL" tab.
- Unselect the option to "Retrieve remote file and reference locally".
- Paste / type the web address of your image.



(b) Input the BB code manually.

Simply by adding the open [IMG] and close [/IMG] image tags on either side of your wed address

[img]http://farm4.static.flickr.com/3549/5722231021_13de54b63b_z.jpg[/img]

--- End Result ---

 

[Cactus jACK]

Step 1: Upload your picture online (e.g. flickr, CS gallery, etc)

Step 2: Copy and paste the (i) BBcode or (ii) link into the text edit box in CS
- Option (a) Hyperlinked / Linked Images from Flickr
- Option (b) Linked Image from CS Gallery
- Option (c) Link Using Web Address only

Step 3: Voilà!! So it was a few more than 2 or 3 steps, but once you get the hang of it, it's really easy to share your pictures on CS!!


Leica M8 35mm Summilux-M by myleicamp, on Flickr