Bigger Home Page Photo

You can take control of your group's home page photo, even have multiple photos, with just a little bit of HTML coding.


Your group's home page description can be written as either plain text or as HTML, Yahoo decides how to interpret it based on whether it notices HTML coding. If your description is currently plain text, when you add some HTML elements the formatting of the surrounding text will change; you may need to add HTML paragraph tags or other elements to correct it.




The key is the HTML <img> element. It will look like this:


<img src="..." alt="..." width=... height=...>

The ... above are placeholders for values you must enter. The src and alt attributes are required for images, width and height are recommended, and are listed as required by Yahoo for rich text messages and home pages.


HTML ignores whitespace, treating line breaks and spaces alike, so lets look at a filled in example formatted for readability. The image in this example is the icon for a photo which is displayed in an album of a Yahoo! Group.


<img src=""
     alt="Knife in a cantaloup."
     width=72 height=96>


Resulting image:


Knife in a cantaloup. 



src attribute


The value of the source attribute is a URL. Note that the image must be hosted somewhere on the web, not on your PC and not in your group's Files section (because that section can only be accessed by members of your group).


With IE, the URL of image can be obtained by right-clicking on the image when it is displayed in your group's Photos section, select "Properties" and then copy the URL from the pop-up Properties page. In Firefox right click the image and select "Copy Image Location". Don't use the URL in the browser's address bar, as that would refer to the whole Yahoo page, not to the image itself.


alt attribute


The value of the alternate text attribute is a description of the image. This text will be displayed if the image can't be loaded for some reason and is also used by screen-reading software for vision impaired users, so it should be descriptive, not a title.


width and height attributes


The value of these attributes determins the size of the image on the user's screen. They may be stated either in pixels or as a percentage of the available space and the image will be scaled to fit them. They are recommended so that the user's browser can immediately reserve space for the image, before it has actually retrieved it; but if omitted the browser will use the actual size of the image (once it is loaded).


I generally recommend that these attributes be filled in exactly matching the actual size of the image. If the attributes are smaller than the actual image that wastes time loading an image that is bigger than necessary for display. If the attributes are bigger than the actual image the resulting display may appear "pixellated" — blocky or fuzzy. If the actual size of the image is inconvenient for the layout of your page, I recommend making a copy of the image which has been resized instead of using these attributes to shrink or streatch the image.



Go Large


Using the same uploaded photo, this time using the URL of the "Original" size photo.


<img src=""
     alt="Knife in a cantaloup."
     title="Assimilate This!"
     width=600 height=800>


Resulting image:


Knife in a cantaloup. 




HTML allowed by Yahoo:

Overview of HTML elements:

Specification of <img>: