RP HOWTO Pages‎ > ‎

Post an image using FlickrCode


The FlickrCode web page allows you to add a frame and title to photos before you post them to RP. For Flickr users it also maintains the correct link-back to the photo page required by Flickr's Community Guidelines.

To post a photo in the RP forums, journals, or private messages, the photos must already be on the web someplace. FlickrCode works primarily with Flickr, Picasa, and Photobucket, but does provide a bit of support for other sites (see Raw Input, below).

There is an RP forum thread, FlickrCode updates, for announcements and discussions.

To use FlickrCode, you'll take these steps, each described in later sections:
  • Get the HTML for your photo.
  • Enter the HTML in the FlickrCode page.
  • Select the formatting options for your photo.
  • Generate HTML and copy it to your RP post.

Get HTML From Your Photo Site

Visit your photo's web page. Somewhere on the page will be an option to generate HTML to link to the photo.

Photobucket

  1. If your image is larger than 500 pixels wide, use the Photobucket Edit Images function to resize it to 500. Photos wider than this cause problems in the RP forums.
  2. Look for Links box on the right side of the screen. Click the arrow next to it to expand the box, if needed.
  3. Copy the text in the HTML code box.

The Post a Scaled Image from Photobucket (basic) page has some information about resizing photos.

Picasa

  1. Look for Link to this Photo on the right side of the screen. Click it to open the link options.
  2. Set Select size to Medium-400. Anything larger will cause problems in the RP forums.
  3. Ensure Hide album link is checked, and that Image only is not.
  4. Copy the text in the Embed image box.

The Post an image from Picasa page gives details in the Use the HTML Button section.

Flickr

  1. Click the Share button above the photo.


  2. Click the Grab the HTML/BBCode arrow to expand that section.  Select Medium - this will be the 500x??? or ???x500 size. Anything larger will cause problems in the RP forums. Finally, select the HTML option at the bottom.


  3. Copy the text in the Copy and paste the code below: box:

Raw Input

If your photo is hosted somewhere else, you can still use FlickrCode.  You will need:
  1. The HTML address of the photo. This starts with http:// and ends with .jpg. With Firefox on Windows, you can right-click the image and select Copy image location. Other browsers and operating systems will have something similar.
  2. Optional: The HTML address of the page to be presented if someone clicks your photo. This starts with http:// and usually ends with .html. For a photo in a blog this might be the address of the blog page.
  3. Optional: The HTML address of a larger version of the photo that will be presented if someone clicks the "larger" link for your photo. This starts with http:// and ends with .jpg.

Enter HTML In FlickrCode

If the Input section is not displayed, click the Input button.

Photobucket / Picasa / Flickr

Ensure that Raw input is not checked. Then paste the HTML from your photo site into the input box.

Raw Input

Ensure that Raw input is checked. Then paste:
  • The photo address into Image URL. If this photo is wider than 500 pixels, check the Force to 500px box to generate code that directs browsers to resize the photo when it's displayed. This will prevent problems in the RP forums.
  • The page address into Image link, if you have one.
  • The larger photo address into Larger link, if you have one. It's OK if this photo is wider than 500 pixels.
Note: Don't check the Force to 500px box unless you need to. If you set this and your photo is smaller than 500 pixels, it likely will not look good - most browsers do a poor job of enlarging images.

Select Format Options

Click the Format button to display the Format section, then select the options you want. The preview will change to match your choices, so feel free to experiment. The size and formatting is very close to how it will appear in RP.

Formatting options are Border, Title, and Larger; they're described next.

Border

The Border option determines how your photo is presented. It's followed by two color selection boxes. Click the down arrows to display the possible formats and colors.
  • Mat formats the photo as if it were matted. The first color selection box is for the mat color; the second is for the mat core color. Two additional boxes are presented under the Border options, where you may specify the widths of the mat and the mat core.
  • Frame centers the photo and surrounds it with the color you select in the first color box. (The second color box is disabled.)
  • None displays the photo with no formatting. (Both color boxes are disabled.)

Title

The Title option determines where the title of your photo is displayed, the color to be used, and the title text.
  • Top places the title above your photo.
  • Bottom places the title below your photo.
  • None does not display a title.
FlickrCode will attempt to extract the title text from the input HTML, and you may override it if you wish.

Larger Link

The Larger link option is present only for Flickr and Raw inputs. It determines where the "larger" link is displayed and the color to be used.
  • Top places the link above your photo.
  • Bottom places the link below your photo.
  • None does not display a link.
For Flickr input, an additional option box is displayed to select the "larger" size. Two options are available:
  • Original uses the original size of your photo.
  • Large uses the "large" size of your photo.
Note: If you uploaded your photo using the Flickr Loadr the "Large" size may not exist, depending on your upload options. Experiment to find out.

Generate HTML For RP

When you're satisfied with your photo's formatting:
  1. Click the Output button to display the Output section and the HTML that FlickrCode has generated.
  2. Copy the HTML in the box.
  3. In your RP post, click the HTML button on the right side of the editing bar.
  4. Paste the HTML you copied from the Output section into the HTML editor window, then click the Update button.
  5. Preview your image to verify it looks OK; the image as it's shown in the editor may not be completely acccurate.
Comments