|... From 18|
|Inserting Images into the Post|
This can be done in three different ways
• Using the "Add Image" tool button
Using the "Add Image" tool button available on the tool bar present on the text area where you include the post content you can insert the code relating to an image into the post content.
• Adding the relevant HTML code
If you know how to handle HTML code, you can insert an image hosted on any web site, if you know the URL of the image file, by building up the relevant HTML code and including it within the HTML code relating to the post content.
• Directly from the Web Sites Hosting the Image
Some web sites providing free image hosting services allow you to post directly from their web sites to blogger.com. flickr.com provides such a facility to post to blogger directly.
If you are using such a facility it amounts to creating a post and publishing it directly from that site. You will not be creating the post on blogger.com in such a case.
|Images hosted on (uploaded to) blogger.com|
• Inserting into the post at the time of uploading
you can upload an image to blogger only from within the post create or edit page. As a part of the upload process, the blogger program would as the last step insert the HTML code required for inserting an image into to the HTML code relating to the post.
However, the code would be inserted at the top of the post code i.e. the image would appear at the top of the post. You will have to later on move the image oto wherever you want it to appear in the post.
• Any other time subsequent to uploading
If you can copy and save the HTML code relating to the image you have uploaded to blogger, you can use that code to insert the same image into any other post at any other time.
If you just save just the URL of the image file, you can insert that image using the "Add Image" tool button on the tool bar related to the text area where you include the post content or if you know HTML by creating the HTML code required for including an image and including it within the post content.
|Inserting images hosted on any website using Add-Image tool|
This method would be useful in cases where you know the URL of the image to be included but do not know how to create the HTML code required for inserting an image into the post. To insert an image hosted on any web site using this tool, you need to know the image file URL.
HTML code for inserting all the images whose url's you included would get inserted into the HTML code relating to the post content. The HTML code relating to the images would get inserted at the top of the post content.
If you are in the compose mode, you would be able to see the images being displayed one after the other arranged according to the alignment option chosen on the upload form. If you are in the HTML mode, you will see the HTML code.
|URL's of images uploaded to free image hosting Web Sites|
The URL of the images uploaded to the image hosting web site can be found
The image URL's are made available in different forms.
• On Flickr.com
Clicking on any image displayed on this web site would bring up a page displaying the image/photo along with a secondary menu just above the image title. This menu contains various options for handling the image.
Click the "All Sizes" button to bring up the image in another page. In this page you can find a label "Available Size" followed by various dimensions listed with a related link. One of the sizes looks selected. The image displayed below would be in that dimension.
The HTML code required to insert the image (in the displayed size) in the post and the bare URL of the image file are displayed in a text area and a text box respectively present just below the image. You can click in those and copy the relevant code.
If you click the links relating to the sizes indicated above, the image would change and would be displayed in the chosen size and the values relating to sizes within the HTML code below it would also change. would be Just above the image you will find links to choose a size for the image. After clicking the size of your choice, the HTML code is automatically modified to incorporate settings based on your choice.
The HTML code includes both the <img> tag as well as the <a> tag surrounding it. If you include the image in any web page, the <a> tag makes the image work as a link (link back). That link would bring up the web page displaying the image on the web site hosting the image or just the image file on the hosting site.
You can also download the image in the chosen size to your computer. The image would be re sampled to the chosen size and the downloaded file would be the one relating to the re sampled image.
If you are using the HTML code, the image would stay on the flickr.com server in its original size. On any page that you paste the code into it would be displayed in the size that you have chosen.
• on photobucket.com
There are three text boxes in relation to each photo/image filled with three types of code.
|Inserting Images by inserting HTML Code|
If you are sure of your HTML skills you may include the image in your post by inserting the <img> tag along with the required attributes. For this you just need the url of the image that you intend to include.
• HTML Code Inserted on using the Compose Mode
You can create an idea of the code to be inserted from the HTML code inserted automatically on inserting an image when in the Compose Mode. You can view the code by switching to the HTML mode.
• You need to use only the <img> tag
For inserting an image you only need to insert the <img> tag with the required attributes. The <img> tag is surrounded with the <a> tag to make the image work as a link.
You can notice that the href="__" attribute for the <a> tag and the src="__" attribute for the <img> have the same value i.e. the file name with its complete path. This amounts to using the image as a link to fetch just the image file.
• Why create a link?
The image file is used to create a link for two reasons.
|Publishing a post directly from flickr.com|
Some web sites which have agreements with blogger have options to enable you to post images i.e. publish posts with images hosted on their servers. One such site is flickr.com.
Initially, you have to set up your blog for being posted directly from fickr.com. This is also done on the flickr.com web site only.
• Setting up the Blog for direct posting
On the primary toolbar click on the "Your
• Posting to your blog
A confirmation message is displayed with a link to the blog you posted to. Click the link to view the posting in your blog. You can open the post in blogger and edit it if you intend to.
Each image that you post would be published to a separate post.
You cannot think of creating a post without any image from here.
|Author Credit : The Edifier||... Continued Page 20|