Dressing up your Geocoin's Page

[+Jackalgirl]

Howdy --

 

I've noticed that more times than not, when I go to look at a geocoin's page, there is no picture. Waaah! I like pictures! So in the interest of being helpful, I have written up a really basic description of how to get pictures onto your coin's page (if, of course, you didn't already know about this).

 

It can be used to post photos or graphics -- such as if you were to create a title graphic or had other pictures you wanted to use to illustrate the text.

 

How to Use Images on Your Geocoin Page

 

1) Upload an Image

Your trackable page has a menu on the right-hand side called "Trackable Item Options". One of these options is "Upload an Image".

 

This is a very quick and handy way to upload a picture and have it automatically displayed on the geocoin's page. Just follow the prompts and presto! you're done.

 

Note one: do NOT post a picture that has your coin's tracking number displayed on it. This allows people to log your coin without ever having seen it, or even remove it from your inventory or it's current location. Groundspeak may actually lock your geocoin, too, if it's absued in this way. So make sure that you edit this out. You can use any graphic editing program (Microsoft's "Paint" program, available on the Start -> Accessories menu, works fine for this) to paint over or erase the tracking number.

 

Note two: if the file is very large, the Groundspeak server will re-size it. This can do weird things to your picture. Check your graphic or photo program's help files to see about its resizing / optimizing options. You can resize pictures in Microsoft Paint by changing the "stretch / skew" options. I HIGHLY[/b/ recommend that if you do this, that you SAVE AS (not "Save"!) and save your file as a different file name (e.g., "mypic_small.gif"). That way, you still have your source picture at its original size to play with.

 

Some very basic optimizing information:

.GIF - designed to compress graphics well that have large areas of the same color (for example, logos, b&w line art, cartoons, or other graphics with a simple color scheme). Not so good with photos, which is why photos saved as .GIF often end up looking pixelly.

.JPG - designed to compress photos or other photo-type graphics. Not so good with graphics that have large areas of the same color (which is why you might see "halos" or weird pixels in areas of the same color in a .JPG)

.TIFF (or .TIF) - Best quality (even when compressed), but the files are HUGE. This format is designed for print layout, so is best not used for online (web page) content. By all means, make your source pictures and store them in .TIF (every time you save a .JPG or .GIF, you lose a little quality, because you are recompressing the file), but export them to .GIF or .JPG for uploading to a place like Groundspeak.

 

2) Upload an Image, Part II

If you have your own hosting service, or use Photobucket or one of the other online photo-sharing services, you can upload pictures there and "call" them into your geocoin page's description.

 

First, you have to find out what the URL (Uniform Resource Locator, or web address) is for your file. The easiest way to do this is to go look at the picture. Keep selecting it until the location in your browser's location bar (where it would normally say "http://whatever.whatever.what.wha/whatever.html") ends in .GIF or .JPG (or .TIF), so that you're basically looking at the bare, plain picture. Highlight the contents of the address bar and select Edit -> Copy to copy the address to your clipboard.

 

Now, go to your Geocoin page and select "Edit this item" (again, it's on the Trackable Item Options" menu on the page's right-hand side). You have two main areas in which you can insert a call to your picture: the Mission and the Description. Here is the basic code that you can use to insert a picture:

 

<img src="***" alt="my pic: alternate description">

 

replace the three asterisks with the contents of your clipboard (Edit -> Paste). The "alt" part of the code is what appears when a viewer "hovers" his or her mouse over the image, and is used by many applications for the visually-impaired also, so it's always a good idea to include it.

 

This will insert a picture into your "Mission" or "Description" block. Note that any text you type around it will not wrap around the picture -- your text will appear above or below your picture, depending on where the <img> tag is in the text.

 

If you want it to wrap around the picture, use the following code:

 

<img src="***" align="left" hspace="0" vspace="0" alt="my pic: alternate description">

 

In this, I'm aligning the picture to the left and the text will wrap around it very tightly. You can also align to the "right" (and "center", though I've never tried this so I'm not exactly sure how it would turn out).

 

The values in "hspace" ("horizontal space") and "vspace" ("vertical space") determine how closely to the picture the text will wrap -- the higher the number, the more whitespace around the picture.

 

Would you like the image to be bordered?

 

<img src="***" align="left" hspace="0" vspace="0" border="1" alt="my pic: alternate description">

 

I've told the browser to draw a one pixel border around the picture. You can, of course, make this border thicker.

 

3) Upload an Image, Part III

What if you don't have an image-hosting service? You can upload your pictures to Groundspeak's server. Just write a note for your geocoin. When you're done with the note and have submitted it, you'll notice that the results page (the one that shows you what you've posted) has an "upload image" option. Use this to upload images (and each time you upload an image, you're presented with an option to upload another image, so you can keep doing this until you're done).

 

Once you've done this, view your geocoin page. You should see an option just above the area for the logs that lets you "View the Gallery". Keep clicking until you are looking at the bare graphic (the address in the browser's address bar will end with .JPG, since that is the format to which Groundspeak will convert your picture), then copy that location into the "src=" portion of your <img> tag.

 

4) Adding a caption

This is a bit more tricky. I'm going to include the basic code for you to copy and paste.

 

<table align="right" hspace="0" vspace="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img border="1" src="***" alt="my pic: alternate description"></td>
</tr>
<tr>
<td align="center"><font size="-1"><i>my caption</i></font></td>
</tr>
</table>

 

This will align the picture and its caption to the right. You can replace "right" with "left" to align it to the left. It also centers both the picture and its caption. If you change anywhere where it says "center" to either "left" or "right" (your preference), it will align the picture and its caption to the left or right, respectively.

 

It will also generate a caption that is in italic text and that is slightly smaller than the surrounding text.

 

---------------

 

If you have any problems with this (that is, if I've messed up the instructions), let me know and I will fix this post. I hope to see more coin pages with coin pictures -- thank you!

[+Just a Trifle]

Gee thanks for this info Jackalgirl. I too like to see pictures on the trackable page, but my computer skills are lousy and all I have been able to manage in the past is posting a picture in the gallery. I will have to try and fix this up now.

[+Team Professor X]

Something like this

All my coins have pictures: KLICK

[+Sparticus06]

I try to have pics on all my coins' pages. Right now I am very behind on the taking of the pics and getting them edited and posted. Maybe with it being so cold and windy out today, I will work on some of them. Thanks for the info Jackalgirl.

[+Papa EGTH]

I've noticed this as well.

 

Not everyone is adept at taking pictures of coins...

 

I try to capture the coin's image from the seller's website at the time I purchase the coin.

 

If the seller's webpage is no longer available, then I search for the same coin in someone else's geocaching profile (using the generic name of the coin with the Search for a Trackable Item by Name function on the Trackable Items page) until I find a page with the image I want to use.

 

For Internet Explorer users: right click on the image, select "Save Picture As...", and save the picture to a location on your computer where you can find it to uplaod to your coin's page.

[+Jackalgirl]

Thanks, everyone, and I hope it works out well -- let me know if you run into any problems; I'll happily adjust my original post.

 

And good point, EGTH -- on a Mac, I believe it's option-click to get the pop-up menu that lets you save the graphic.

 

If you do this, though, remember that you're using someone else's image. It's a good idea to ask the seller if it's okay (I can't imagine that they'd say no). If you want to be especially generous, you can turn the image into a link that links back to the seller's store:

 

<a href="seller's website URL" target="coinview"><img src="***" align="left" hspace="0" vspace="0" border="1" alt="my pic: alternate description"></a>

 

Note that if you change the pixel size of the border to "0", there will be no border around the image even though it is now a link.

 

What this will do is open up the seller's website in a new window named "coinview" (so it does not close or replace the window with your geocoin page in it).

 

You can also use this to link your coin to the applicable page for the coin (if there is one) at the Geocoin Wiki, which I think would be an excellent idea.

 

(By the way, the Wiki also has photos of many of the coins, if you're looking for a photo. I don't see anything obvious on the site granting permission for hotlinking or the use of photos, and it's a group-maintained site, so I'm not sure who you'd ask for permission -- if you use the graphics, I'd definitely recommend linking back to the site at a minimum.)

 

One of my georesolutions is to photograph all of the coins I possess and try to collate data about them (such as the stories behind their designs) to update that site, and I think that as the Wiki grows to include this kind of data, it'll be a really interesting thing to link to.

Edited December 22, 2008 by Jackalgirl

[+Sparticus06]

I had that problem once. Someone decided to snag a pic of my one coin and use it for themselves. Since then, I put Sparticus06 on all of them. I dont mind others using my pics, just ask me first and I can even send ya the one without my name on it to use.

[+Clan Doyle]

Great info. Can someone add how to place the map on the coin page, instead of having to click a link? I've seen a couple like that, and would love to add it to my coins.

[+Jackalgirl]

Something like this

All my coins have pictures: KLICK

 

I really like the way you've dressed up your pages. This is exactly what I love to see -- especially if I'm reading about a coin I've never seen before. Now I get to see it. Thank you! : )

[pauljsurfer1]

This is really informative and helpful!!! You should find a way for a website to host this and write it up as a How-to guide (you've basically done that). I can't wait to get more coins so I can do this. Thanks!

[+GEO*Trailblazer 1]

I have been trying to keep up with mine.

Thanks for adding the how to.

 

I will aslo be updating mine as the weather is not fit to go out in.

http://www.geocaching.com/profile/default....20-03bc0ac8e4d3

[+Papa EGTH]

Jackagirl makes a good point about copyright material. I sent an email to coinsandpins.com asking about their policy. Instead of individual permission, it would make more sense to me if they had a blanket policy for all. Below is the message I sent:

 

I have been using the pictures of the geocoins from your website for coins I have purchased on my Geocaching geocoin's webpage. Someone pointed out that I may have be infringing on copyrighted material. I make sure the "CoinsandPins.com" watermark is on each picture so others viewing my coin page will know where to go if they're still on sale (or where to find other coins).

 

Do you have any policy regarding the use of your coin photos?

 

There's a recent geocaching forum thread regarding dressing up your Geocoin's page: http://forums.Groundspeak.com/GC/index.php?showtopic=210188.

 

If you do have a certain policy, then perhaps you can post it on your FAQ page as well

 

If they reply to me but do not post here then I'll post their reply.

[+Mar-elendili]

I like to have pictures on the pages of my travellers, so that people could identify them quickly. But for the Geocoins I leave as virtuals in caches, I don't post pictures so as not to spoil the pleasure of the visitors upon their discovery.

 

Anyway, thanks for the great tutorial! There's a lot of coding I didn't know about.

[+MissJenn]

Thanks, Jackalgirl, for this very helpful information.

 

Just so y'all know, at this time javascript is off limits at www.geocaching.com .

[+DJ.J.ROCK]

let me tell you about how you can make fancy lettering for html,,

 

goto cooltext and make the lettering you want ,,when it renders the letters it comes in gif.formatt,, to get html you just do a quick sign up with the page,and it make your code for you then you just copy and paste,,,,easy as cutting cake any one want to know whats possible look at our profile..

[+Jackalgirl]

Thanks, Jackalgirl, for this very helpful information.

 

Just so y'all know, at this time javascript is off limits at www.geocaching.com .

 

Thank you for pointing that out -- I'd reported my own post to Eartha for clarification and she said that that's the case, which is why the post in question is now gone. A pity, because you can do some neat things with Javascript -- on the other hand, I completely understand why they'd want it off-limits (security issues).

 

There's still a fair amount that you can do with HTML and CSS to dress up a page, though, so it's not as if there still aren't plenty of ideas to write about and suggest.

[+Jackalgirl]

let me tell you about how you can make fancy lettering for html,,

 

goto cooltext and make the lettering you want ,,when it renders the letters it comes in gif.formatt,, to get html you just do a quick sign up with the page,and it make your code for you then you just copy and paste,,,,easy as cutting cake any one want to know whats possible look at our profile..

 

Absolutely. You can do this with your graphics program (if you have one), too. With text, I definitely recommend .gif (it compresses better), unless you've overlaid your text onto photos (in which case .JPG is probably better).

 

I recommend that you make sure to keep the "alt" tag in there, and have it "say" the same thing as the text. For example, if your text is "DJ.J.ROCK'S AWESOME GEOCOIN", the <img> call should include something like:

 

<img src="http://source of graphic/pic.ext" alt="DJ.J.ROCK's AWESOME GEOCOIN" border...etc etc etc>

 

It is possible to get pretty good text effects with HTML and CSS -- but, of course, it all depends on what the viewer's browser supports. Have you ever seen something like:

 

<font face="Garamond, Times New Roman, serif">

 

It's telling the browser: "Use Garamond. If you don't have Garamond, use Times New Roman. If you don't have Times New Roman, use a serif font." Which means that you can't ultimately control exactly how the text will display.

 

OTOH, using DJJR's method lets you control exactly how it will appear. But if someone has his/her graphics display turned off, the picture won't appear. But they should (I think, I am not sure) still be able to read the "alt" text. Plus, again, the "alt" text is what's "read" by browsers for the visually-impaired.

[+Papa EGTH]

Here's the response from Aaron Weed from coinsandpins.com:

 

Hello,

 

Our photos are made by us and copyrighted, so I appreciate that you are

asking. You are welcome to use our pictures as long as you leave the

watermark on the photo. If there is not a watermark, then please give

credit to us for the photo within your text.

 

You are welcome to post this statement in the thread.

 

Thank you,

 

Aaron Weed

[+Tethys C]

You can add slide shows as well with Photobucket (I'm sure other programs work). Check out my geo-dog Jasmine's geocoin page at TB1H64C.

[+Jackalgirl]

You can add slide shows as well with Photobucket (I'm sure other programs work). Check out my geo-dog Jasmine's geocoin page at TB1H64C.

 

I like that -- and it's an <embed> tag, using Flash, rather than javascript -- so this should be okay, right?

 

My only personal problem with Photobucket is that (for some reason) I can't see them at work (I think the work-related servers block Photobucket, as they do Myspace). But the page looks pretty cool here at home. Thanks for the tip!

[+Jackalgirl]

Thanks very much also to Elk Grove Treasure Hunters for getting that blanket permission information (and request) from coinsandpins.com. That is awesome!

[+DJ.J.ROCK]

YEAH!! I like working with html as I can control my layout better, but im still learning,, my method is for the simple minded user that really need or is just learning any graffix methods, as html is pretty simple but its complex untilll you know the commands and the layout of the html code to get what you want..,, CSS i have not dove into , i do believe that code is how some video games are written,,,

 

but cool text is for joe smoe that dosent know any html but still wants to be able to controll graffix words. ive used cooltext many many many times over the years and love the thousands of configureations of fonts and effects, and its free,, as your normal software that does a good job will take a good chunk out of your wallet to get. Love this thread tho,,it is very good infos!!

[+Jackalgirl]

<grumble> The Forum decided to stop working and it ate my (rather lengthy) post!

 

I just wanted to write a bit about CSS ("Cascading Style Sheets").

 

It's a system that lets you control a large number of properties of HTML elements, where "elements" refers to those things you define with tags -- for example, the <b></b> sets the text between the tags as "bold", which most browers automatically interpret as a heavier, "darker" version of the regular text. With CSS, if you decided that you wanted to define "bold" as "heavy, purple Times text with a yellow background", you could do that. You have a lot of control over how the individual elements appear.

 

It is correspondingly complicated -- there are a lot of element properties that you can change, and you have to be familiar enough with HTML to know how to manipulate the elements.

 

One of CSS' strengths is that you can do all of your element definition in a central file, then "call" that file within the header of your web page. In fact, if you call the same central file in the headers of a group of web pages, any change to the central file will be instantly reflected on all of the pages that "called" it. For example, if you decided that although you'd set up your <b> tags to show up as heavy, purple Times text with a yellow background, but then suddenly decided that you wanted them to show up as italicized white Courier text on a background consisting of a dark-purple-and-pink 'Hello, Kitty' graphic, you just change the CSS specification in your central file and bam! Hello, Kitty, on all of your pages at once!

 

The problem is that we can't do this with our cache/profile/geocoin/travel bug pages. When you edit the descriptions on your pages, the text you enter is inserted into the center of a page -- you have no access to its header. So you can't actually reference a central file for all of your geocaching.com pages. Bummer!

 

You can still use CSS, but you have to put the specifications into the actual element tags. For example:

 

<b style="font-family: Times; font-weight: bold; color: #330033; background-color: #ffff00;">Check out my bold text!</b>

 

Then you have to do this every time you invoke the <b> tag. This will chew up a considerable amount of your available space, since there is a limit on the size of your descriptions (5000 characters, I think).

 

I think that your Cooltext solution, DJ (or just using a graphics program to set up graphics the way you like) is actually the better way to go, since it probably uses up the least number of characters -- so that's what I'd recommend.

 

Still, if anyone's interested in looking further into CSS, I highly recommend W3School's CSS Tutorial.

 

Even better, they also have a HTML Tutorial, which can help out with learning the basic HTML elements in the first place, and which I also very highly recommend. Good stuff!

Edited December 27, 2008 by Jackalgirl

[+Jackalgirl]

Howdy!

 

I found a useful online tool for resizing images. I know that there are lots of online thumbnail makers, but the one at:

 

mypictureresize.com

 

is not only fairly simple but also lets you resize (scale) and crop images pretty easily (and the interface seems pretty intuitive to me. And it's free.

 

Enjoy!