How to Add Photos to Pages

• The Simple Method
  • The Code
  • The Steps
• Additional Info & Methods
  • For a new photo
  • For a photo already in the Image Gallery
  • How to add a caption
  • How to change the width of the photo
  • Left align photo
  • Right align photo

The Simple Method

When you want to add a photo of a plant to a page and the photo is already in the Image Galleries, you'll need to know three things: 1) The name of the plant, 2) The photo's ID number, and 3) the name of the photographer (if known). All three can be found with the photo you want to add, written just under the image on its Image Gallery page.
    You have the option of the photo appearing on the left or the right side of the page, with the text flowing around it. Below you'll find two lines of code: one for aligning the photo on the left and the other for aligning the photo on the right. All you have to do is PASTE the appropriate line of code into your text, fill in your photo's ID number where the xxx's are, and write in the plant's and photographer's names. Simple!

The Code

Start by deciding which side of the page you want your photo to be on, then COPY the appropriate block of code below:
Align photo left:

{IMAGE(src=show_image.php?id=xxx, link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=xxx, width=300, desc=''Plant name'', photo by Photographer, align=left, border=margin-right:10px)}{IMAGE}

{IMAGE(src=show_image.php?id=xxx, link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=xxx, width=300, desc=''Plant name'', photo by Photographer, align=right, border=margin-left:10px)}{IMAGE}

The Steps

Be sure to log-on, then...

1. Go to your photo and jot down the photo ID number, plant's name, and photographer's name.
2. Now go to your page and click on the Edit button or an Edit icon to get to the Edit box.
3. Left-click the cursor on the line where you want to place the photo.
4. PASTE the line of code you just copied.
5. Then replace your photo's info in the appropriate parts of the code you just pasted.
6. Click the Preview button to see if everything looks good.
7. If it does, click the Save button and you're done.
8. If it doesn't, make adjustments or try to figure out why, and if you can't, don't hesitate to contact nargsspreadsheet@gmail.com.

Additional Info & Methods

For a new photo

1. Upload the photo to the Image Gallery (first see About Photos for the Wiki, How to Prepare Wiki Photos and How to Upload Photos).
2. After the upload is confirmed, look for a block of code like the following at the bottom of that page:

   You can include the image in a Wiki page using one of these lines:
   {img src=show_image.php?id=506 }

3. Select the second line and COPY it.
4. Then go to your Wiki page and enter Edit mode.
5. Place your cursor where you want the photo to appear.
6. PASTE the code you just copied.
7. Click on the Preview and/or Save buttons.

For a photo already in the Image Gallery

1. Go to the appropriate Gallery, find the photo's thumbnail & click on the magnifying glass that appears just beneath it.
2. You will now see an enlarged photo with some of the photo's details listed beneath, as well as a block of code like the following at the bottom of that page:

   You can include the image in a Wiki page using one of these lines:
   {img src=show_image.php?id=462 }

3. Select the second line and COPY it.
4. Repeat Steps 4-7 above.

How to add a caption

For a little fancier photo placement, here's how to add a caption to your code:

1. After the id= part of the photo code, insert desc=''your plant name'', photo by Photographer
2. The desc= part tells the Wiki to display what follows as a caption, which will appear in a smaller font centered beneath the photo.
3. The double single quotes '' around your plant name will render it in italics.
4. This is what the final code should be:

   {img src=show_image.php?id=462, desc=''your plant name'', photo by Photographer}

5. (You can also just COPY & PASTE the code above, and then just change the image's id number and caption text for your chosen photo.)
6. Click on the Preview and/or Save buttons to see how it looks on your page.

How to change the width of the photo

If your chosen photo is very big, you should change its width to something that will fit better on the page:

1. Add width=300 to the photo code, which will make the photo 300 pixels wide.
2. This is what the final code should be:

   {img src=show_image.php?id=462, width=300, desc=''your plant name'', photo by Photographer}

3. The full-size photo can still be displayed, in a separate tab or window, by adding link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=462 to the code.
4. This is what that final code should be:

   {img src=show_image.php?id=462, link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=462, width=300, desc=''your plant name'', photo by Photographer}

5. (Simply COPY & PASTE the code above, and then just change the image's id numbers, width and caption text for your chosen photo.)
6. Click on the Preview and/or Save buttons to see how it looks.

Left align photo

By default, adding a caption or width tag to your code will make your text wrap automatically around the photo on the right:

1. This will push the photo to the left & make the text flow around it on the right.
2. This is what the final code should be:

   {img src=show_image.php?id=462, link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=462, width=300, desc=''your plant name'', photo by Photographer}

3. (Simply COPY & PASTE the code above, and then just change the image's id numbers and caption text for your chosen photo.)
4. Click on the Preview and/or Save buttons to see how it looks.

Right align photo

Wrapping text around the photo on the left requires an additional tag:

1. Add align=right to the photo code. This will push the photo to the right & make the text flow around it on the left.
2. This is what the final code should be:

   {img src=show_image.php?id=462, link=http://nargs.org/nargswiki/tiki-browse_image.php?imageId=462, width=300, align=right, desc=''your plant name'', photo by Photographer}

3. (Simply COPY & PASTE the code above, and then just change the image's id numbers and caption text for your chosen photo.)
4. Click on the Preview and/or Save buttons to see how it looks.