Tips And Tricks: photos

Showing posts with label photos. Show all posts

Wednesday, October 28, 2009

Updated post editor: remove image border

First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

and the result of that edit is this photo minus the border:

Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:

Tuesday, October 20, 2009

Images and the Blogger updated post editor

Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

Monday, September 28, 2009

Picture to link to label page or any webpage

"I have a picture on my side bar, I would like to link it to all labels containing say books. There are five post under that label, and when my guest push the picture of the books, I would like the page to pop up only the posts with the label, Books."

Well, that is easily done. First you have to be familiar with hyperlink, namely using <a href="URL of target webpage">anchor text (some text descriptive of target webpage)</a>. And since you want the link to go to the label page "Books", that URL will be the URL of the label page of "Books" which you can get by right-clicking on the label "Books" in the sidebar and selecting "Copy link location".

You also need to be familiar with uploading pictures to the web and getting the picture URL like what is described in Using Blogger to host pictures.

Now the required codes are

<a href="URL of target webpage"><img src="picture URL" /></a>

and if that is not clear enough, ask.

Tuesday, September 15, 2009

Display images in larger sizes

"why is it that my images are big but when i upload them they become so small?"

When you use Blogger's photo upload icon to display images, you can chose 3 different default sizes - large, medium and small. If your image is very large, Blogger will shrink it to a smaller size for display. However, if you are in the COMPOSE mode, you can use your mouse to grab the edge or the side and drag-drop it to create a displayed image that can be larger or smaller than the default.

Alternatively, you can use the HTML image tag <img src="photo URL" /> to display it in the original size or use that tag with a width attribute <img src="photo URL" width="some number" /> to display it in whatever size you choose.

Related posts:
Using Irfanview photo editor for your blog

How to add caption to photos

New Blogger template for posting large photos

Bubbleshare, another way to display photo album

How to make clickable (hyperlink) pictures

Put photo of authors in post footer

Putting author's photo in center bottom of post

Add series of photos in blog footer

More later.

Saturday, August 29, 2009

Using Blogger to host images for various purposes

Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.

Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon

. However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.

You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).

One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.

I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.

When you upload a photo to Blogger using their photo uploading icon

and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:

Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:

Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:

Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed

<html>
<head>
<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjO04dFMLYzjVMsSbn_HnO6eHWm4HN-oIhxQCvzmY9YrPmtHvLOmXvilXPV-PWFiCrKiHBpV_UwBCdTRuEFpcjYP5e84eNm4Ri14qDul-gZPYaS-V97m3emNeCHp7mFNgU-Wg_SO53F8/s1600/lewis+apple+5.JPG" alt="[lewis+apple+5.JPG]" border=0>
</body>
</html>

and within the code is the photo URL (in red above) which you can use for inline linking.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjO04dFMLYzjVMsSbn_HnO6eHWm4HN-oIhxQCvzmY9YrPmtHvLOmXvilXPV-PWFiCrKiHBpV_UwBCdTRuEFpcjYP5e84eNm4Ri14qDul-gZPYaS-V97m3emNeCHp7mFNgU-Wg_SO53F8/s1600/lewis+apple+5.JPG

Thursday, August 27, 2009

New Blogger post editor - birthday gift?

Blogger has launched a new post editor (as a 10^th birthday gift?) which they say is an improvement over the old pre-birthday post editor. You can switch to the new post editor by signing into Dashboard and go to SETTINGS > BASIC. At the bottom in Global Settings (this means your choice is not limited to a single blog but to all the blogs in your Blogger account), you will find the choice to select either the ( ) old editor or the ( ) Updated editor. You can read about the updated editor at An overview of the new post editor.

Blogger claims improved image handling with the new post editor. Now when you upload a photo, it will be placed at the insertion point (cursor) rather than always at the very top of the post editor and dragging it (in the COMPOSE mode will not kill the link to the enlarged photo as with the old editor. However, this "improvement" comes with a price. The photo upload icon is missing from the toolbar in the updated post editor in Edit HTML mode. Looks like Blogger have dropped the video upload icon for that is missing in both Edit HTML mode as well as the Compose mode

Compare the toolbars of the old and new editors below:

Toolbar in EDIT HTML mode with old post editor

Toolbar in EDIT HTML mode with new post editor

Toolbar in COMPOSE mode with old post editor

Toolbar in COMPOSE mode with new post editor

I have tested the photo upload with the new editor and I don't like it. Fortunately one can easily toggle between the old post editor and the updated post editor. Go to Dashboard, SETTINGS > BASIC and at the bottom, you will find the Global Settings (meaning whatever changes you do here will apply to all the blogs in the same Blogger account). There you can select the old editor again. May try the new post editor again sometime in the future. I understand Blogger may do some tweaking after negative feedbacks. See screen shot below:

Saturday, May 9, 2009

Tips: Uploading images via Blogger post editor image upload icon

If you are already familiar with Blogger HTML codes for displaying uploaded images, alt and title tags, skip to Tip to avoid having to upload twice after making a mistake editing

Well I don't know how much of a tip this is going to be, but it is a procedure that I follow when uploading images through Blogger post editor and which I figure is important if you are even just a little teeny weeny bit serious about blogging and also if you want to avoid problems. I always use the EDIT HTML mode and practically never the COMPOSE (WYSIWYG) mode. To the uninitiated, that may be a bit unsettling as when in the EDIT HTML mode, the image is replaced by a block of seemingly undecipherable codes like the one below (please don't get frightened by the "gibberish" as you do not need to understand fully the codes in order to productively uses it):

which is code to display the image below:

Sivakumar being manhandled by Special Branch thugs

Now I sincerely hope that those who shun HTML and always use the COMPOSE (WYSIWYG) mode will seriously consider switching over to the EDIT HTML mode as that offers various advantages and will allow one to do things that one cannot do in the WYSIWYG (what you see is what you get) mode.

One of them is you will be able to complete the alt and title tags in the HTML code to display the image. The alternate (alt="") tag is for you to write some texts descriptive of the image which when for some reasons the image cannot be displayed, instead of an empty box, the alternate text will be displayed in place of the image. There is a further advantage from the point of view of SEO (search engine optimization) as while search engines cannot read images, it can read the text in the alt="" tag and so can tell the search engines what the image is all about.

I also add a title="" tag and this is to enable visitors to hover the mouse over the image whereupon a "tool tip" will appear with the text you write into the title="" tag (try hovering your mouse over the photo above).

Now it is possible that when editing the image HTML codes for example when editing the alt tag or adding the title tag, having the INSERT mode off, editing caused part of the codes to be over-written and caused the image HTML codes to be corrupted thus forcing you to upload the image again. To avoid this, read the next section.

Tip to avoid having to upload twice after making a mistake editing

Now by default, irrespective of where your mouse cursor is when uploading image, the image (or its representative codes if in the EDIT HTML mode) will always be at the top of the post, and if you want the image elsewhere, you will have to move it there. My habit is to copy-paste instead of cut-paste. This is because when I edit the image and if something goes wrong (I mistyped or deleted something) while editing, instead of having to re-upload the image (and wasting storage space), I just delete the messed-up codes and recopy-paste from the original codes. When all editing have been done correctly and safely, I will then surround the original codes with the comments tags <-- and --> and the original code will be hidden and not displayed. To make this clearer, I will reproduced the image codes below together with the comments tags to hide the image:

<--
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s1600-h/090508+siva03.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s400/090508+siva03.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5333720398637462818" /></a>
-->

Saturday, December 16, 2006

How to get rid of the border in images uploaded via Blogger Dashboard

A reader asked how to remove the border from the image uploaded via Blogger dashboard. At first I thought all one need to do is to edit the attribute border="1" to border="0" in the <img> tag, but that is already the default in all images uploaded via Blogger dashboard, and the image still have a thin border. The only difference will be a thicker border if you put a larger number in border="X". The answer is to add a CSS (Cascading Style Sheet) to the code. Add in the <img> tag the following: style="border:none;" and the border will be gone.

For example, in the post Sibu Island, Johore, Malaysia, there is no border around the image. This effect was achieved by adding style="border:none;" (in red) in the <img> tag. The HTML for the image is in the scroll box below:

NEWER POST

HOME

OLDER POST

Hide image border by merging border with background

A commentator has also suggested editing the template so that the color of the image border merge with the main column background color so that the border becomes invisible.

Tips And Tricks

Ads 468x60px

Pages