| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Bigger Home Page Photo

This version was saved 14 years, 8 months ago View current version     Page history
Saved by Shal
on July 18, 2009 at 11:40:43 pm
 

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

 

Image

 

The key is the HTML <img> tag. 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:

 

<img src="http://d.yimg.com/kq/groups/19045647/tn/1355019353/name/n_a"
     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. This size photo is the icon for the photo which shows in an album of a Yahoo! Group.

 

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 most browsers, the URL of image can be obtained by right-clicking on the image when it is displayed in your group's Photos section. Don't use the URL in the browser's address bar, as that would refer to the whole Yahoo page, not to the photo 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="http://d.yimg.com/kq/groups/19045647/hr/1355019353/name/n_a"
     alt="Knife in a cantaloup."
     width=600 height=800>

 

Resulting image:

 

Knife in a cantaloup. 

 

 

References:

HTML allowed by Yahoo: help.yahoo.com/l/us/yahoo/groups/original/members/email/email-19.html

Overview of HTML elements: en.wikipedia.org/wiki/HTML_element

Specification of <img>: www.w3.org/TR/html401/struct/objects.html#edef-IMG

 

 

 

Comments (0)

You don't have permission to comment on this page.