HOME BANNER

Scrapbook URL's

To reset page to original
color, reload page.


Getting URL's for "Scrapbook" Images,
in order to link to them in other
webpages, or Email.


Why you need them

Each Webtv unit has 6 user names, each of which has a scrapbook, once "Pagebuilder" has been activated by creating at least 1 blank webpage, for each user that wishes to use their own scrapbook.
Pagebuilder is accessed from your "Web Home" page, by clicking on the drop down menu labled: "MORE", and then selecting "Pagebuilder".


Images can be placed in the scrapbook through an email that has an "attached" image, which makes the "scrapbook icon" visble on the left sidebar while you are viewing the opened email.
If you have a Plus unit, you can make these types of attachments by using the "Photo" capture feature when writing an Email.
(once you send it to yourself and open it.)
They can also be "snagged" from the internet with an UPLOADER, or image extractor, such as the "Cap-n-Fila" extractor I have included on my uploader page.
And finaly, images can be placed directly into the scrapbook, or onto a pagebuilder page when on that page's editng area.
(Note: Photo captures, or Vidcaps are only available with Webtv Plus units, - not Classic units. Sorry.
For a more detailed overview of making vidcaps, including the 3 diferent sizes you can obtian, see my Vid-Caps tute.)
"Photo Captures" or "Vid-Caps" can be from a Plus unit's TV Tuner, cable box, camcorder, VCR, digital camera, an E-Scanner, video game system, or any other device that has a yellow composite, "Video Out" wire.


Lets face it; making webpages by inserting images directly from our scrapbook, or "Capture" feature stinks, because pagebuilder aligns them on whatever side it wants to, depending on which background you choose, instead of where WE want them to be placed on the webpage.
Therefore, its best to make a "Storage Page", so-to-speak, to store all our scrapbook images, so that we can "Link" to them in Email or other "Important" webpages, using HTML.


Making a "Storage Page"

You can't link to an image that's only in your scrapbook, because pics dont have a FULL URL there. They first have to be on a published webpage, to have a full URL.
First, lets make a "storage page", by clicking "CREATE" and then choosing any old background, since this page won't be viewed by the public.
Now in my example, we are going to title this page:

pics

by clicking on the "Choose A Title" at the top of the page.
We are also going to say in this example that your "User name" is:
JohnDoe@webtv.net

Now choose "ADD ITEM", then "PICTURE", and then "FROM SCRAPBOOK".
Click on a picture that's in your scrapbook, and now it will give you the option to write a title or caption for the pic.
At the top, click on "VIEW THIS IMAGE". Now it will show you the pic against a black background. Notice in the "Status Bar" at the bottom of your screen, that it will say something that looks like:
mailedD2_jpg

(it may have a different number, also pics that have been uploaded into the scrapbook may say:
importD2_jpg, or importD2_gif, captureD2_jpg, etc.)


These are the "extension URL's" assigned to the image by the scrapbook, according to how they arrived there, and in what order, and what type of image it is.
Write down exactly what you see, making sure the D is upper case.
Now hit your "BACK" button, and enter what you've written down, in the bigger "CAPTION" area.
Now delete the _ and put a . (period)in its place.
It should look something like this: mailedD2.jpg
Now click "DONE", and you will be back on the editing area of your new page.


Repeat this process, untill all the images in your scrapbook are on this "Image Storage Page".
Then click "PUBLISH" on the left side bar, and continue the publishing process all the way through.
Now the URL for this webpage will be:
http://community.webtv.net/JohnDoe/pics/
Write down the URL it gives you for later use.
Now the FULL URL for the "mailedD2.jpg" you just published on a page, in this example will be:
http://community.webtv.net/JohnDoe/pics/scrapbookFiles/mailedD2.jpg
(forget the -1 or -2 etc, after the word "community. This will not be used, when Linking with HTML.")
Note that the F in scrapbookFiles is Uppercase, and also the D in mailedD2.jpg


This Full URL can now be used, in linking to this image in important webpages, or email, and can be positioned as you see fit.
Each individual FULL URL will be identical for images used by this user, on this storage page, except for the last part: importD2.jpg .



Now the easy way:

The above method for obtaining your URL's was covered FIRST, because it is very beneficial to have a working knowledge of how our scrapbook pics get URL's. With practice, the manual method above is actually faster than the easy method, provided that you keep a notebook for all your images that includes all info about each image on your storage pages.
The manual method actually TEACHES you something, and the following easy method simply lets you skimp by without learning at all, - more or less.


An easier way to obtain the URL's for every pic on a published storage page is to use the "view images" option on the Cap-n-Fila tool.
While viewing your storage page, either tap the F-key you have the tool saved to, or copy & paste it's URL into the tool, then click "view images".
Here, you'll see all the images at once, along with each one's URL, and detailed information. A quick CC&P of each text URL can be pasted into a blank email or a new webpage for future retrieval or use, when you need the image.



Linking to images
in other Webpages

Now that you have all your images published on an image storage page, you can use each image's URL to your advantage, on important real webpages, intended to be seen by the public.
Instead of useing the ADD ITEM feature to install it directly from the scrapbook, I would instead, LINK to it with HTML.


Linking to an image instructs the browser to display the image thats from another source,
(your image page that you just created), on the page that your viewing now.
In pagebuilder, most of the HTML is already generated for you, so all you have to do is add the code to display the image, in any textbox, or header. You can even add a little images beside links, in the ADD LINKS ITEM.
Say for example, that this tute page was on pagebuilder, and that I wanted to put an image on the CENTER of this tute page.
Here is what you would type:
<center><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif"></center>

which will give you this:


You can also put an image on either side of the page with alignment attributes, like this:
<img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif" align="left">











<img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif" align="right">










Or 2 beside each other:

<img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif" align="left"><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif" align="right">











One further note:

Images will load alot faster, if you specify how high & wide they are, inside the image code.
To find out the size of any given image, there are multiple sites you can enter in the url for, and they can tell you the size, such as the "Cap-n-Fila" image extractor on my Uploader page.
To add your image's size attributes to the HTML code, you would expand your image tag to look like this:

<img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif" height="119" width="180">


Linking to images in Email

Now linking to your images in email requires more HTML, because while the pagebuilder templates already does most of the HTML for you, your "Signature Box" for your Email doesn't.
To put an image in your email, go to your "Mail Settings", and click on "Signature".
If you already have something in your "Sigbox", delete it.
Now you need to tell the "sigbox" that it needs to display HTML code, by putting this tag at the very beginning of the sigbox:

<html>

Now to put an image in your email's BODY, you need to put in a body tag:

<body>

And so far you will have this:

<html><body>

Now insert the image code, and then, so far you will have this:

<html><body><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif">

Now to center that image, we will add opening and closing center tags on each end of the image code, and the whole thing will look like this:
(closing tags are basically the same as opening tags, except for an added slash: / )

<html><body><center><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif"></center>

And now, we need to close the opening BODY tag, telling the sigbox that no more content will be in the body of the email, and to finally, close the opening HTML tag to tell the sigbox that no more HTML is to be recognized.
Now the whole ball of wax will look like this:

<html><body><center><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif"></center></body></html>

Click the DONE button below the sigbox.


Changing the background
and text colors in Email

So... You say that just having an image in your email isn't fancy enough, huh?
Well you can change the colors very easily, by using and expanding the OPENING <body> tag, used in the above example code.
Say for example, that you want a white background, with red text, in your email.
We will take the basic opening <body> tag and expand it like so:

<body bgcolor="white" text="red">

To change only the background and text colors, here is the entire code for the sig box:

<html><body bgcolor="white" text="red"></body></html>

And now the code from the above tute, (with an added centered image), will appear in your signature box like so:

<html><body bgcolor="white" text="red"><center><img src="//community.webtv.net/johndoe/pics/scrapbookFiles/importD30.gif"></center></body></html>



Instead of typing out the word "white", and "red", It would be much better if you used HEX codes, rather than the name of the color.
Doing this will make your email load slightly faster, and is easier for browsers to understand.
The hex code for white is: #FFFFFF, and the hex code for red is: #FF0000.
To find out the hex codes for your OWN choice of colors, scroll to the top of this page, and you will find a
"Color to hexcode converter".
Likewise, for in your future needs, I also have one by itself on this page.



This tute is dedicated to PonyThatWalks, for recovering this page after I lost it many months ago, and thought all hope was lost.


Copyright 2006 Ambassador Martok



Counter