Help:Photos
From CACWiki
For making pages, or adding trip reports, we suggest including photos. Here are some tips.
These are tips compiled by the Alpine Club. More extensive documentation is available at mediawiki. We try to provide these links where applicable. The best outside documentation is at wikipedia's picture tutorial and mediawiki's Help:Images page. More technical details are at wikipedia's image syntax page.
Contents |
Uploading photos and then linking to them
In the left toolbar, under toolbox, there's a link called Special:upload, which lets you upload your file. Please fill in the description at least briefly, and put information about who took the photo. Be aware that you are allowing your image to be in the public domain.
Let's say the image is called "Whit08.jpg".
To link to it from a page, the text is
[[File:Whit08.jpg|100px|Caption is ignored]]
Which produces:
If you want to specify height instead of width, put an "x" in front, as in x100px, which produces:
There's a special mode call "thumb"
[[File:Whit08.jpg|thumb|Caption of "thumb" image goes here]]
There are many variations, like changing the size of the thumbnail, specifying right or left alignment, etc. Extensive documentation can be found on the mediawiki site Help:Images
If you want to see what files have been recently uploaded, visit Special:NewFiles.
Here are some good practices:
- Always provide a good description for your photo, so that other students in 10 years will know what the photo is about
- Resize your photo before uploading! We do not want your 5 MB 12 mega-pixel image. Please shrink to 300 kB max. Disk space is limited, so use common sense.
If for some reason you want to directly link to an image file page like this, use
[[Media:whitney10.jpg|this]]
Upload several photos at once
In the left toolbar, under toolbox, there is often a link called Upload multiple files (this link only shows up if you are visiting certain types of pages -- if you go back to the Main Page, the link always shows up).
Now you can upload a bunch of photos at once.
Making a photo gallery
If you have a lot of photos, then you'll want to make a gallery to save you time. For examples on how to do this, take a look at any of the pages in Category:Gallery and view their source, or look at this mediawiki Image gallery help page. In general, it looks like this:
<gallery caption="Ski gallery" widths="120px" heights="120px" perrow="3"> File:couloir.jpg|Mount Dana File:gully.jpg|KearsargePeak, High Sierra File:dave.jpg|Dave Braun and his skier-dog Clyde enjoying the powder in [[the Palisades]] area File:image006.jpg|Eric Wintenberger dropping in at the top of [[Hurd Peak]]'s North Couloir, High Sierra </gallery>
The above code produces the following
 Mount Dana |
 KearsargePeak, High Sierra |
 Dave Braun and his skier-dog Clyde enjoying the powder in the Palisades area |
 Eric Wintenberger dropping in at the top of Hurd Peak's North Couloir, High Sierra |
The perrow controls the number of photos per row.
Linking to photos from other websites
You can embed a small photo (but without a link) just by typing the ULR of the photo, without any special markup needed. For example,
http://www.its.caltech.edu/~alpine/pics/Whitney10_thumb.jpg
is
More powerfully, you can have a thumbnail image that is also a link. We wrote a special "widget" to help you do this. Documentation is at Widget:ThumbnailLink.
For example, this code
{{#widget:ThumbnailLink
|target=http://picasaweb.google.com/lh/photo/Cf3ix7CNLd49gQW_BF6yMg?feat=embedwebsite
|src=http://lh6.ggpht.com/_cmxOBq7EBLQ/S6e88IZuOcI/AAAAAAAARMc/4f0mxW8Dpno/s144/MtWhitney_18.jpg
|caption=Part of our group ice climbing
}}
produces
Formatting the flow of text
Note how this new section does not "wait" for the above picture to finish. If you want to ensure that nothing new starts (e.g. a paragraph, a new section...) until all the pictures have been displayed, then add the following code where you wish the break to be: <br clear="all"> or <br style="clear: both" />
For example, here is the above picture again, but this time, we'll add in the break.
{{#widget:ThumbnailLink
|target=http://picasaweb.google.com/lh/photo/Cf3ix7CNLd49gQW_BF6yMg?feat=embedwebsite
|src=http://lh6.ggpht.com/_cmxOBq7EBLQ/S6e88IZuOcI/AAAAAAAARMc/4f0mxW8Dpno/s144/MtWhitney_18.jpg
|caption=Part of our group ice climbing
}}
<br clear="all">
produces
Linking to photos from Picasa
Linking to a single Picasa image
This can be done via our Widget:ThumbnailLink.
To get the info on the links, sign into your Picasa Webalbum account and go to the picture you want.
There is a link called Link to this photo on the right; click this.
Choose a size (Thumbnail, Small, Medium, Large), and then copy the code listed under Embed image. It should look like
<table style="width:auto;"><tr><td><a href="http://picasaweb.google.com/lh/photo/PqusmjzadD9ai6PicqP9pg?feat=embedwebsite"> <img src="http://lh4.ggpht.com/_cmxOBq7EBLQ/TDpcIJXlf4I/AAAAAAAARpw/rhj2nJOdYt4/s144/Alaska_010.jpg" /></a></td></tr><tr> <td style="font-family:arial,sans-serif; font-size:11px; text-align:right">From <a href="http://picasaweb.google.com/StephenAlpine/1005_Alaska_combined_best?feat=embedwebsite">10-05_Alaska_combined_best</a></td></tr></table>
From this, we extract the thumbnail image, which is
http://lh4.ggpht.com/_cmxOBq7EBLQ/TDpcIJXlf4I/AAAAAAAARpw/rhj2nJOdYt4/s144/Alaska_010.jpg
If you selected the "Image only (no link)" box, then the above process is even easier: just copy the line of code.
Also get the link to the full-size picture, which is
http://picasaweb.google.com/lh/photo/PqusmjzadD9ai6PicqP9pg?feat=embedwebsite
Now, use with our widget as follows:
{{#widget:ThumbnailLink
|src=http://lh4.ggpht.com/_cmxOBq7EBLQ/TDpcIJXlf4I/AAAAAAAARpw/rhj2nJOdYt4/s144/Alaska_010.jpg
|target=http://picasaweb.google.com/lh/photo/PqusmjzadD9ai6PicqP9pg?feat=embedwebsite
}}
<br clear="all">
to get
Now, you can make this fancier, e.g.
{{#widget:ThumbnailLink
|target=http://picasaweb.google.com/lh/photo/PqusmjzadD9ai6PicqP9pg?feat=embedwebsite
|src=http://lh4.ggpht.com/_cmxOBq7EBLQ/TDpcIJXlf4I/AAAAAAAARpw/rhj2nJOdYt4/s144/Alaska_010.jpg
|caption=Denali, seen from the road
|width=150
|align=left
}}
Linking to a Picasa album
We have the cool Widget:Picasa plugin that allows you to embed an album slideshow. For example, the following code will produce the below album:
{{#widget:Picasa
|user=victor.laskin
|album=5196794879516869825
|width=600
|height=400
|captions=1
|autoplay=0
}}
You can find the album ID from the Album RSS feed URL ("RSS" link at the bottom right corner of album page) on your picasa webalbum page. Note that you need to use the numerical album id - copying a custom name from an address like picasaweb.google.com/MyUserName/MyCustomAlbumName won't work.
Linking to photos from Flickr
To include a single image from Flickr, you just need the photo ID, which is the last number in the URL when you look at the photo on Flickr. For example, you can use
<flickr>5411131147|frame|left|The Horror!</flickr>
To produce
Linking to photos from Facebook
At this point, we don't have any special instructions. But we do suggest that if you want to share your facebook album, please go to the album page and look at the very bottom of the page for a link like this:
This URL is special: it allows anyone to view your album, not just those with a facebook account.
Linking to photos from Smugmug
See Smugmug extension for help. We don't have this extension installed, but we can easily install it if there is any demand for it, so email one of the administrators if you really want to use SmugMug.
Photography
See Alpine Photography for material related to taking the photographs themselves.
See Also
- wikipedia's picture tutorial
- mediawiki's Help:Images
- More technical details are at wikipedia's image syntax page.
