Over the last few weeks I created the Worth Another Look custom object using tables to place images. Now, using your suggestions here, I've added a little bit of spit and polish to it. Thanks!
mark d.
BTW: The link for the color table didn't work for me. I did find one here:
http://www.w3schools.com/html/html_colornames.asp
Michael Hoyt - Dec 21, 2006 4:50 pm - Hasn't voted
Re: Excellent!
Mark,
Thanks for pointing out the problem with the link to the color tables at Web Source - just a typing problem on my part and it's fixed now.
I added you w3schools.com address to the "link list" - it looks like a pretty good site for HTML help. Thanks again,
And I liked your "Worth Another Look" page. Excellent!
There's one thing I miss though.
The info on how you make the photos votable. When I see for example a nice looking medium sized photo (like the one in this section), I would like to give it a vote.
The problem is; I can't, unless I try to find it in the archives of SP. This can be a really time consuming job.
Michael Hoyt - Dec 21, 2006 4:55 pm - Hasn't voted
Re: Good info!
I miss the "votable borderless" picture, too. I'm still working on a good solution. So far I've only got a work-around using clickable captions, but I'll keep trying.
Thanks for posting this, Mike. I have always wondered how one can place photos three in a row on a page since some do it but the SP format doesn't seem to do it on its own. Maybe your different codes will help me do that. Vernon Garner once had the same question; I hope he sees this.
Bob
Michael Hoyt - Dec 21, 2006 5:03 pm - Hasn't voted
Re: Very Helpful
Good to hear from you Bob. A three-in-a-row table is a good solution for puting three (small or thumbnail) pictures side by side - it's just a single row table. If you need help, give me a holler.
And, from the look of his newer pages, I think Vernon has already got it figured out.
Photohiker, this is a great resource and I will no doubt be making use of it. I note you don't make mention of one handy process for sizing any photo to be displayed on a page, and that is the use of the width and height tags (settings). I've used these tags on my pages, most recently on my WA 2kP page to get a manageable size for images in the table (70 pixels wide by 53 pixels high). With these tags you can even abnormally stretch images.
The format is (removing spaces as necessary after and before < and >):
< a href="picture page URL to link to" > < img src="image URL to link to" width="enter integer herepx" height="enter integer herepx" >< /A >
(Note that img src URL has to have quotes around it now. Quotes are also necessary for the A HREF URL.)
As an example, here are four versions of a picture of mine at different W and H settings (70 x 53, 100 x 76, 100 x 110, 200 x 108). I've linked to the main/medium image in this case but could link to any old image, even an image not at all related to the A HREF URL.
Michael Hoyt - Dec 21, 2006 5:45 pm - Hasn't voted
Re: Photo sizing tip
Hey thanks.
I knew someone would come along with even more information. I certainly do appreciate it and will try to incorporate your input into the article in the next few days.
Quotes might not be necessary. I looked online for more info. I did find this tutorial. You will find it useful for some additional information to put onto your page.
There is also some good info here. In particular, it looks like you can insert white space or a border around an image. See sections 13.7.2 and 13.7.3. Although, as seen in the image below, I can't get these tags to work. Help?
Here's a run I've made for a border. I was summarily turned away by the Border Patrol...
I think use of the border tag has become "deprecated" meaning it is no longer supported. Deprecated is one step short of obsolescence.
Also, the ALT command (see section 13.8) can be handy. It puts up a comment box in which you can say anything. See nartreb's comment below for more info. Hover the mouse over the image below:
Be careful about copying code from tutorials, some are quite out of date. The one you link to is mostly quite good, but the BORDER attribute is technically deprecated for IMG tags.
All browsers I know of still allow it, but the SP website happens to be an example of a situation where it no longer works the way you'd expect.
Most browsers are pretty forgiving, for example I don't know any that will always require quotes around an element value (like WIDTH=33px). (But it's a good habit to put in the quotes anyway. They're required, for example, if the value has spaces in it.) Most browsers can in fact change their behavior if a Web page includes a declaration telling them to enforce standards more strictly. It's best to follow standards as best you can, because you never know how future browsers might behave on nonstandard code.
Different browsers behave differently. The ALT tag you mention, for example, was intended to be displayed only by browsers that can't display the image (either because they can't handle a particular image type, or because it's a text-only browser, or because it's being used by a voice synthesizer for a blind user).
A certain installed-by-default (but horribly insecure) browser from the maker of a certain installed-by-default (but horribly insecure) operating system displays the ALT attribute's value as a "tooltip" when you hover the mouse over the image, but most other browsers show the value of the TITLE attribute instead.
For maximum compatibility, include both attributes. But keep in mind the real intended use of ALT (blind readers, primarily) and keep the description short and clear.
A tutorial that won't steer you wrong is the one at the W3C School.
Yep, this works: forget the old-fashioned BORDER attribute and use CSS style instead. (I guess that a site-wide CSS stylesheet for links and/or images is interfering with the BORDER attribute; it works outside of SP)
<A HREF="http://www.summitpost.org/image/84265/Mt-Spickard-and-beautiful-.html" target="_blank"><img src="http://www.summitpost.org/images/medium/84265.jpg" width="70px" style="border-style: solid; border-width: 1px; border-color: black;"></A>
One more thing: unless you love arithmetic or are deliberately trying to distort your image, don't give both HEIGHT and WIDTH. Just specify one and the browser will automatically scale the image to maintain its original proportions.
(This behaviour is not explicit in the standard, but it's the only sensible outcome and all visual browsers act this way.)
Thanks for your input (including the border solution).
I agree with you about not using both HEIGHT and WIDTH in most cases. However, there is a case where putting both in is mandatory: when you're trying to maintain a uniform sizing for multiple images whose originals aren't at the same WxH proportion. Such is the case for my WA 2kP and WA Top 100 pages. I needed all the images to be of the same width and height (70 x 53) so that A) the image column (70 pix wide) is fully engulfed by all of the photos in it else some blank space at the right edge of narrower photos will be introduced and B) so that each row is of the same height (53 pix high). Some thumbnail images were distorted slightly when doing this but it was a small price to pay in order to get the table looking nice.
3 options for that situation:
1) Set the size of the table cell and clip the image to fit within the cell using the CSS property overflow: hidden (set this for the cell, not the image). SP does this for the thumbnails at the bottom of its pages. Fills the cells exactly but sacrifices the edges of some images.
2) set the HEIGHT of some and the WIDTH of others, depending on the aspect ratio of each image. Leaves irregular whitespace, which may not be the look you want.
3) what you did. May cause distortion.
Michael Hoyt - Dec 22, 2006 1:27 am - Hasn't voted
Re: Photo sizing tip
Thanks for the discussion, guys. I'm sure many others will find it as helpful as I have.
swm88er - Dec 21, 2006 3:48 am - Voted 10/10
GreatGreat!! Thanks for posting. This is very helpful and a nice way to make things look professional. Good work!
Michael Hoyt - Dec 21, 2006 4:47 pm - Hasn't voted
Re: GreatThanks,
I appreciate your comments.
Mark Doiron - Dec 21, 2006 1:22 pm - Voted 10/10
Excellent!Over the last few weeks I created the Worth Another Look custom object using tables to place images. Now, using your suggestions here, I've added a little bit of spit and polish to it. Thanks!
mark d.
BTW: The link for the color table didn't work for me. I did find one here:
http://www.w3schools.com/html/html_colornames.asp
Michael Hoyt - Dec 21, 2006 4:50 pm - Hasn't voted
Re: Excellent!Mark,
Thanks for pointing out the problem with the link to the color tables at Web Source - just a typing problem on my part and it's fixed now.
I added you w3schools.com address to the "link list" - it looks like a pretty good site for HTML help. Thanks again,
And I liked your "Worth Another Look" page. Excellent!
Corax - Dec 21, 2006 1:48 pm - Voted 10/10
Good info!A lot of helpful info.
There's one thing I miss though.
The info on how you make the photos votable. When I see for example a nice looking medium sized photo (like the one in this section), I would like to give it a vote.
The problem is; I can't, unless I try to find it in the archives of SP. This can be a really time consuming job.
Michael Hoyt - Dec 21, 2006 4:55 pm - Hasn't voted
Re: Good info!I miss the "votable borderless" picture, too. I'm still working on a good solution. So far I've only got a work-around using clickable captions, but I'll keep trying.
Thanks for your comments.
Corax - Dec 21, 2006 7:12 pm - Voted 10/10
Re: Good info!There's good info in this part of the FAQs
Michael Hoyt - Dec 22, 2006 1:24 am - Hasn't voted
Re: Good info!Jeez! How did I miss that - so obvious. Oh well!
Bob Sihler - Dec 21, 2006 3:24 pm - Voted 10/10
Very HelpfulThanks for posting this, Mike. I have always wondered how one can place photos three in a row on a page since some do it but the SP format doesn't seem to do it on its own. Maybe your different codes will help me do that. Vernon Garner once had the same question; I hope he sees this.
Bob
Michael Hoyt - Dec 21, 2006 5:03 pm - Hasn't voted
Re: Very HelpfulGood to hear from you Bob. A three-in-a-row table is a good solution for puting three (small or thumbnail) pictures side by side - it's just a single row table. If you need help, give me a holler.
And, from the look of his newer pages, I think Vernon has already got it figured out.
/Mike
Klenke - Dec 21, 2006 5:28 pm - Voted 10/10
Photo sizing tipPhotohiker, this is a great resource and I will no doubt be making use of it. I note you don't make mention of one handy process for sizing any photo to be displayed on a page, and that is the use of the width and height tags (settings). I've used these tags on my pages, most recently on my WA 2kP page to get a manageable size for images in the table (70 pixels wide by 53 pixels high). With these tags you can even abnormally stretch images.
The format is (removing spaces as necessary after and before < and >):
< a href="picture page URL to link to" > < img src="image URL to link to" width="enter integer herepx" height="enter integer herepx" >< /A >
(Note that img src URL has to have quotes around it now. Quotes are also necessary for the A HREF URL.)
As an example, here are four versions of a picture of mine at different W and H settings (70 x 53, 100 x 76, 100 x 110, 200 x 108). I've linked to the main/medium image in this case but could link to any old image, even an image not at all related to the A HREF URL.
Michael Hoyt - Dec 21, 2006 5:45 pm - Hasn't voted
Re: Photo sizing tipHey thanks.
I knew someone would come along with even more information. I certainly do appreciate it and will try to incorporate your input into the article in the next few days.
Thanks again.
Klenke - Dec 21, 2006 6:13 pm - Voted 10/10
Re: Photo sizing tipQuotes might not be necessary. I looked online for more info. I did find this tutorial. You will find it useful for some additional information to put onto your page.
There is also some good info here. In particular, it looks like you can insert white space or a border around an image. See sections 13.7.2 and 13.7.3. Although, as seen in the image below, I can't get these tags to work. Help?
Here's a run I've made for a border. I was summarily turned away by the Border Patrol...
I think use of the border tag has become "deprecated" meaning it is no longer supported. Deprecated is one step short of obsolescence.
Also, the ALT command (see section 13.8) can be handy. It puts up a comment box in which you can say anything. See nartreb's comment below for more info. Hover the mouse over the image below:
nartreb - Dec 21, 2006 7:23 pm - Hasn't voted
Re: Photo sizing tipBe careful about copying code from tutorials, some are quite out of date. The one you link to is mostly quite good, but the BORDER attribute is technically deprecated for IMG tags.
All browsers I know of still allow it, but the SP website happens to be an example of a situation where it no longer works the way you'd expect.
Most browsers are pretty forgiving, for example I don't know any that will always require quotes around an element value (like WIDTH=33px). (But it's a good habit to put in the quotes anyway. They're required, for example, if the value has spaces in it.) Most browsers can in fact change their behavior if a Web page includes a declaration telling them to enforce standards more strictly. It's best to follow standards as best you can, because you never know how future browsers might behave on nonstandard code.
Different browsers behave differently. The ALT tag you mention, for example, was intended to be displayed only by browsers that can't display the image (either because they can't handle a particular image type, or because it's a text-only browser, or because it's being used by a voice synthesizer for a blind user).
A certain installed-by-default (but horribly insecure) browser from the maker of a certain installed-by-default (but horribly insecure) operating system displays the ALT attribute's value as a "tooltip" when you hover the mouse over the image, but most other browsers show the value of the TITLE attribute instead.
For maximum compatibility, include both attributes. But keep in mind the real intended use of ALT (blind readers, primarily) and keep the description short and clear.
A tutorial that won't steer you wrong is the one at the W3C School.
nartreb - Dec 21, 2006 7:33 pm - Hasn't voted
testingYep, this works: forget the old-fashioned BORDER attribute and use CSS style instead. (I guess that a site-wide CSS stylesheet for links and/or images is interfering with the BORDER attribute; it works outside of SP)
<A HREF="http://www.summitpost.org/image/84265/Mt-Spickard-and-beautiful-.html" target="_blank"><img src="http://www.summitpost.org/images/medium/84265.jpg" width="70px" style="border-style: solid; border-width: 1px; border-color: black;"></A>
nartreb - Dec 21, 2006 8:03 pm - Hasn't voted
Re: Photo sizing tipOne more thing: unless you love arithmetic or are deliberately trying to distort your image, don't give both HEIGHT and WIDTH. Just specify one and the browser will automatically scale the image to maintain its original proportions.
(This behaviour is not explicit in the standard, but it's the only sensible outcome and all visual browsers act this way.)
Klenke - Dec 21, 2006 9:13 pm - Voted 10/10
Re: Photo sizing tipThanks for your input (including the border solution).
I agree with you about not using both HEIGHT and WIDTH in most cases. However, there is a case where putting both in is mandatory: when you're trying to maintain a uniform sizing for multiple images whose originals aren't at the same WxH proportion. Such is the case for my WA 2kP and WA Top 100 pages. I needed all the images to be of the same width and height (70 x 53) so that A) the image column (70 pix wide) is fully engulfed by all of the photos in it else some blank space at the right edge of narrower photos will be introduced and B) so that each row is of the same height (53 pix high). Some thumbnail images were distorted slightly when doing this but it was a small price to pay in order to get the table looking nice.
nartreb - Dec 21, 2006 9:53 pm - Hasn't voted
Re: Photo sizing tip3 options for that situation:
1) Set the size of the table cell and clip the image to fit within the cell using the CSS property overflow: hidden (set this for the cell, not the image). SP does this for the thumbnails at the bottom of its pages. Fills the cells exactly but sacrifices the edges of some images.
2) set the HEIGHT of some and the WIDTH of others, depending on the aspect ratio of each image. Leaves irregular whitespace, which may not be the look you want.
3) what you did. May cause distortion.
Michael Hoyt - Dec 22, 2006 1:27 am - Hasn't voted
Re: Photo sizing tipThanks for the discussion, guys. I'm sure many others will find it as helpful as I have.
Deb - Dec 21, 2006 5:35 pm - Voted 10/10
Great Stuff!I'm sure we'll see your teachings all over SP now with some beautiful pages. Thanks for the info plainly stated in one place.