Hilary's Guide to Images: About Pages

Be sure to look at other guides in this series:

monkey Meetup Guides








Basics



Step 1: Your Image




First you need an image. It can be something you created yourself on your computer, or something you saved from another website.


Finding images

The easiest images to find are ones you have created yourself. But, if you are not that kind of visual artist, here are some other options:

  • Search for images on the web using clip art sites or a more specific google image search. Most images on webpages can be saved by right clicking on the image and saving it to a file on your computer.

  • Popular Sites
    These have been mentioned on the Meetup Message Boards again and again:

    • emoticons4u -- lots of really fun emoticons in one place
    • bestsmileys.com, which has a very different selection (and divides it into more categories) than emoticons4u
    • cooltext -- create free logos and buttons
    • istockphoto -- Not free, but incredibly cheap and wonderful stock graphics, costing between $1 and $5. Membership is free, so join and search!



  • Ask photography meetups if any of their members have a picture of "x" that they would be willing to let you use in exchange for credit and a link back on your about pages.


    An image requested from the organizer of a photography meetup.





Those pesky copyright issues

Before taking an image from the web, please check to see if you can use it. If the website says that it's free clip art, go for it. If it does not, you might want to contact the site and ask for permission to use the image. My own experience has been that many copyright holders freely give this permission so long as you give them credit and link back to them.


Please do not take images from other about pages without prior permission!
  • It's not polite.
  • They may have spent hours making those images, or they have purchased the rights from somewhere else.
  • It is a violation of Meetup's Terms of Service.
  • For more details on why this is a bad idea, please see this discussion on about page copycatting.




Step 2: Image Hosting




Before your images can show up on your About Page, you must get your images on the internet. So how do you get them there, and where do you put them?


Option A: Your Meetup Group's Photo Albums



Many images can reside in the photo albums of your meetup groups.

  • Linking to images in your Photo Albums. If you have it saved in your meetup gallery, you can link to it from there.

    (Note these images are automatically resized when uploaded into these galleries, take consideration of this when wanting a larger or higher quality image.)

    Right click on the image. If you are using firefox, choose "copy image location." If you are using IE or another browser, save the property of that photo, and from that you paste that link within the [img] [/img] tags.

    Here's an illustration, courtesy Mary Pinson:




  • When NOT to Use Your Meetup Group's Photo Albums.

    • Large or oddly shaped images. Meetup will automatically shrink images to fit in the photo albums. If your image needs to be a specific size, don't upload it to Meetup's photo albums.



      A lovely divider (and header) image, not in a standard size.




    • Anything that is not a JPG file. There are an awful lot of cute gif files -- especially dancing emoticons -- that just won't upload to Meetup's photo albums.


      Yup, a gif image.





Option B: Your Meetup Group's Files



Many image files that cannot be stored in the Meetup photo albums can be uploaded as files in the files section of your Meetup group. You can right click on the link to the file and then copy link location.


Some groups may not want to have their image files be visible... In that case, try out third party image hosting websites.


Save the image files so that they are visible to everyone! If you save the image files so that only group members can see them, prospective members will see a bunch of broken links on your page!


Option C: Image Hosting Websites



Here are two of the most commonly recommended sites from the Meetup message board:

  • Flickr -- Allows images to easily be resized, rotated, etc. And it has a lot of other cool features too.
  • Photobucket -- Very popular!




Step 3: Editing the About Page




Step 3A: Copy the URL of the image.


  • Photobucket will list it for you right under any picture you have uploaded.
  • If you have it saved in your meetup gallery, click on "Link to this photo" and then copy the address in your browser. Or you can right click on the link that says "Link to this image", and then copy link location.

Step 3B: Use the Image Button (or code by hand)


  • Once you have the URL copied, click on the "Image" button at the top of your message post, or the top of the page when you are editing your "about" page, and paste it in where it says enter image address.
  • You can also make your pictures "clickable" by adding another website address to direct people to another webpage when they click on the image. Do this by entering the address where it says optionally enter a link address.
  • An example of an image and code:





    Coding for just the image:

    [img]http://members.dsli.com/aldiaz305/M%20of%20the%20month.jpg[/img]


    Coding for image as a link:

    [url=http://bellydance.meetup.com/55/about/]
    [
    img]http://members.dsli.com/aldiaz305/M%20of%20the%20month.jpg[/img][/url]





Step 3C: Preview Your Work!



The more complex your image use, the more the preview button will be your friend.








Advanced Tips and Aesthetics



Creating & Manipulating Images



A step-by-step guide on how to create and manipulate images is beyond the scope of this guide. My goal instead is to give you ideas so that you can explore your own programs.

Getting Started

First, check your own system to see what you might have available for image software. Most microsoft or mac program packages include basic paint and photo editing programs.


With most basic programs you can:

  • crop -- include only the parts of the image you want
  • rotate -- turn your image until it looks best
  • resize -- very important to prevent horizontal scrolling (see below)
  • move elements -- select parts of the picture and reposition them




this image was created using only: cooltext, a basic photo editor and a basic paint program




A Step-by-Step Example of Image Creation

Pat Finegan explained how to create an image using common microsoft products in response to a question by Steve Savicki.


Graphics

You can do a lot of font manipulation without resorting to using images. For more information on this, please check out Grant's Guide to Message Board Formatting.


However, graphic images can add spice to a page. One great source for free Logos and Navigational buttons is the cooltext generator.

Here is an example of navigational buttons created using cooltext:



each of these buttons leads to a different part of this Meetup group





Other Ideas to do with Custom Images



Include "white space" in your image to position it properly on the page



There are currently only two ways to position images:

  • Default -- Image is positioned in the left margin
  • Centered -- Image is centered


However, all Meetup about pages have white backgrounds. If your images also have white backgrounds, you can position individual elements within the image to create pretty much any effect that you want.





Creating Custom Maps





And here's how it was created.


Including Text in the Image


By including text in the image, you can:

  • vary the look of your page
  • integrate images and text
  • control where these elements are positioned


an example:




The Downside of Including Text in Your Images


To paraphrase Walter:
Search engines can't see the words in images. And search engines bring new members to your group.

  • Some headings in images -- okay.
  • Some buttons in images - okay.
  • But try to avoid putting the highly descriptive main text of the page in images, especially if key words that describe your group (your town's name, the type of group you are) only appear in that image and not in plain text anywhere on the page.


Photo Collages



You can easily create a simple grid photo collage using picasa, a free program from Google:





But here are some other lovely examples of pages with photo collages that are more advanced. See this discussion for more information on software to make photo collages.


Animated Images

There is freeware out there to create animated images, if you really want to do so.


motion photography

and an explanation of how to create it



okay, this isn't from an about page, but I couldn't resist including it:

and here's an explanation of how it was created.



A Slideshow



Trying to choose which of your best photos to feature on your about page? This technique lets you show them all in a single slot.



This was created with Nano Webtools. The program is not cheap, but the slideshow is really cool.



Tips to remember



Prevent horizontal scrolling! It's ugly! It makes your pages hard to read!

  • Keep images on the your Main About Page less than 540 pixels in width!
  • Keep images on your subsequent pages less than 800 pixels in width.




When Images are Too Much



Too many images can be overwhelming, and make your pages hard to download. If you have lots of animated images together, the effect can be especially nauseating and cluttered. Use images like spice, and try to achieve a balance.


Free Programs



gifworks -- make images transparent, change the resolution, or simplify the color scheme. Simplifying the color scheme will compress the image and make it load faster.

picasa -- image organization and processing software.






Sunnie wrote the first version of this tutorial. Hilary did a subsequent version, with more examples and formatting. Mary offered revisions, images and many insights.

The images here are taken from actual about pages, and link back to those pages.



Table of Contents

Page title Most recent update Last edited by
Dean's Video Posting Guide March 27, 2009 1:14 AM anonymous
Video Posting Guide September 18, 2006 10:06 AM anonymous
Chris C's Guide to Animating Images October 16, 2006 8:50 PM anonymous
Hilary's Guide to Images: About Pages February 20, 2007 9:11 PM anonymous
Grant's Guide to Meetup Smilies October 17, 2006 7:41 PM anonymous
Grant's Guide to Message Board Formatting October 18, 2006 9:34 PM anonymous
About X: Virtual Test Subjects of the Meetup Conspiracy June 28, 2007 2:45 AM anonymous

Organizer:

Grant Neufeld
Contact

Fealty tithe

CAD1,000.00 for Grant's Lego

This covers:

Payment is accepted using:

  • PayPal
  • Cash or check

Your organizer will refund you if:

  • Please contact your organizer for more details.

Log in

Not registered with us yet?

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy