Bookmark and Share

Inserting Images into the post

... 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.
  • You can insert an image hosted on any web site, if you know the URL of the image file
  • You can insert an image you upload to the blogger server from your computer, immediately on uploading

• 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.

Move To  

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.

• Procedure

  • Click the "Add-Image" tool button available on the tool bar related to the text area where you include the post content. [This tool would be useful for inserting images into the post by uploading/storing images in blogger as well as by using the URL of any image hosted on any web site].

    This will bring up the web page with options for choosing the images to be uploaded as well for inserting URL's relating to images hosted on any web site.

  • Click in the text box with the label URL to its left and enter the "url" for the image file relating to the image you intend to insert.
  • You can insert upto 5 images this way at the same time.

    To add another image file url, Click the "Add another image" link to bring up another text box below the existing one.

  • Choose the alignment options and the size options for the image and click the "Upload Image" button.

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.

Move To  

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
  • On the web pages displaying the list of images in your account in text boxes that can be found near the image.
    (Or)
  • On a separate page displaying the image that you intend to use in your post in text boxes that can be found near the image.

    The images uploaded by others to these web sites are also capable of being used by you (if they permit) in your blog post. You will be able to find the URL's of those images which have been so permitted in text boxes near the image on the pages where the images are displayed.

The image URL's are made available in different forms.

  1. Just the image URL;
  2. The image URL with the HTML code required to insert the image into any web page;
  3. The image URL with the HTML code required to insert the image into any forum where special kinds of tags are used etc.

• 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.

  • One box has with the label Url bare url of the image.
  • Another one with the label Tag has the url formatted with HTML code for being directly included in your post. The HTML code includes both the <img> tag as well as the <a> tag surrounding it to create the link (link back) to the image.
  • The third one with a label Img has the image url formatted for being directly included in forums or bulletin bords which generally have a different type of tag delimiters. (they use [ ] in place of < > for delimiting a HTML tag. Thus [img] is used in place of <img>)

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.
  1. The image is displayed in the post in a size specified by the width and height defined within the <img> tag. The actual size of the image may be something else. The link would help the user to view the image in its original size, by opening just the image in a new window.
  2. Web sites providing free image hosting services would stipulate a condition in their Terms of Services (TOS) stating that if the images hosted on their web site is being used on any other web site, you have to link back to their websites. In case you are using such an image you have to create the link.

    These are the terms that you would have agreed to at the time of registering for the free account with those web sites (if you don't agree the registration process would not move forward). Generally we ignore reading these terms.

Move To  

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

  • Login to your user account.
  • Choose the image you want to use in your blog post and click it

    The image would be opened up in a new page with a secondary tool bar just above the image. The options on this secondary tool bar enable you to choose what you want to do with the image.

  • Click the "Blog This" option on the secondary menu bar.

    If the image that you are using is not the one that you uploaded (one in your account) and it is not enabled for being used by others, you may not find this link. The person who uploads an image decides whether to share the image with others or not.

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

Move To  
Bookmark and Share

♣ Copyright � Krishbhavara. All rights reserved
♣ Site optimized for Internet Explorer 5.5 and above