Edit

wikiHow:Use Advanced Image Syntax



Adding images to an article enhances its presentation and makes it easier for others to learn. Generally, for consistency, the default wikiHow article layout displays well-sized images above the step they're on, automatically, without manual manipulation. However, when editing non-article pages, like user pages or wikiHow namespace pages, knowing some advanced image syntax can help you display images where and how you want them.

See How to Align a Photo in a wikiHow for more clarifications and options about alignment in articles steps themselves, but use these guidelines to help when you're making more precise image adjustments, particularly on user pages and in other areas where image layout isn't automatic.

EditPreparation

EditInsert Images

Insert an Image

  • Use [[Image:FILENAME.PNG]] to add an image.
  • Replace FILENAME.PNG with the name of your chosen image.

    Mediawiki_logo_sunflower_Tournesol_5x_rev2.png

Insert an Image and Caption

  • Use [[Image:FILENAME.PNG|frame|CAPTION]] to add an image, with a caption, to the right of a page.
  • Replace FILENAME.PNG with the name of your chosen image.
  • Replace CAPTION with your chosen description.
  • This retains the original size of an image; the image cannot be resized.
    CAPTION




Insert a Thumbnail and Caption

  • Use a thumbnail to decrease the size of a large image.
  • Use [[Image:FILENAME.PNG|thumb|CAPTION]] to add an image, with a caption, to the right of a page.
  • Replace FILENAME.PNG with the name of your chosen image.
  • Replace CAPTION with your chosen description.
  • Click on the thumbnail to view the enlarged image.

    CAPTION




EditResize Images

Resize an Image

  • Use [[Image:FILENAME.PNG|NUMBER OF PIXELS]] to add an image to the left of a page.
  • Replace FILENAME.PNG with the name of your chosen image.
  • Replace NUMBER OF PIXELS with a number and px, such as 150px.
  • Example of an image resized to 150px:

    Sample_Image.png

Resize a Thumbnail Image

  • Use [[Image:FILENAME.PNG|thumb|NUMBER OF PIXELS]] to add a thumbnail image to the right of a page.
  • Replace FILENAME.PNG with the name of your chosen image.
  • Replace NUMBER OF PIXELS with a number and px, such as 150px.
  • Example of a thumbnail image resized to 150px:

    Sample_Image.png

EditAlign Images

Align an Image to the Left or Right

  • Use [[Image:FILENAME.PNG]] to add an image to the left of a page.
  • Use [[Image:FILENAME.PNG|right]] to add an image to the right of a page.
  • Replace FILENAME.PNG with the name of your chosen image.
  • Example of an image to the left of a page:
    Sample_Image.png
  • Example of an image to the right of a page:
    Sample_Image.png




Align an Image in the Center

  • Use this code:

<center>[[Image:FILENAME.PNG|100px]]</center> or this code: <div align="center">[[Image:FILENAME.PNG|100px]]</div>

  • Replace FILENAME.PNG with the name of your chosen image.
  • Adjust the number of pixels (px).
  • To make:

Sample_Image.png

Align Images in a Row

  • Use this code:
 {| |- | [[image:FILENAME.PNG|75px]] | [[image:FILENAME.PNG|100px]] | [[image:FILENAME.PNG|125px]] | [[image:FILENAME.PNG|150px]] |} 


  • Replace FILENAME.PNG with the name of your chosen image.
  • Adjust the number of pixels (px).
  • To make:
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png

Align Images in a Row in the Center

  • Use this code:
 <center> {| |- | [[image:FILENAME.PNG|75px]] | [[image:FILENAME.PNG|100px]] | [[image:FILENAME.PNG|125px]] | [[image:FILENAME.PNG|150px]] |} </center> 


  • Replace FILENAME.PNG with the name of your chosen image.
  • Adjust the number of pixels (px).
  • To make:
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png
Mediawiki_logo_sunflower_Tournesol_5x_rev2.png

Align Thumbnail Images in a Row

  • Use this code:
 {| |- | [[image:FILENAME.PNG|thumb|75px|CAPTION]] | [[image:FILENAME.PNG|thumb|75px|CAPTION]] | [[image:FILENAME.PNG|thumb|75px|CAPTION]] | [[image:FILENAME.PNG|thumb|75px|CAPTION]] |} 


  • Replace FILENAME.PNG with the name of your chosen image.
  • Adjust the number of pixels (px).
  • Replace CAPTION with your chosen description.
  • To make:

EditTips

  • Use exact capitalization, spelling and syntax in an image code.
  • The character | is located above the Enter key on your keyboard.
    • It is to the left of the Z key on British keyboards.
  • The character [ is located to the right of the P key on your keyboard.
  • A standard thumbnail image is 150 pixels.
  • Keep the size of images to less than 600 pixels.
  • Click here to learn more about wikiHow's syntax.

Article Info

Categories: Help | Using Images