Tips And Tricks: pictures

Showing posts with label pictures. Show all posts

Monday, September 20, 2010

Make images uploaded via Blogger unclickable

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

CODES FOR THE OLD POST EDITOR:

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSy7opQ4DpA5L_nLA7XeCWYhLTmmFbObLQDaYgzD2ukOS4vZJCiv6LZBeLT5jNFMl3ljtTWyAkPbTOn0ddLtP6eJ9EdsLHzTMXzM1jG3EmVEqvIIlOqBtSb7XBML2YPdM3iVW9hQX79-n/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

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

Tuesday, July 10, 2007

Change background color or image of main column of blog

Blog reader asked this question and I figure I might as well answer in a post.

Add/Change background color of main column (posts)

To change the background color of ONLY the main column (posts), sign into Dashboard, click LAYOUT (now called DESIGN) in the section for the relevant blog, click EDIT HTML sub-tab to open the template editor window. Look for this block of codes in the template:

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)

Add any of this to the block of codes:

background:pink;
background:blue;
background:#D4FFFF;
etc.

The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").

After addition, the block of code may now look something like this:

#main-wrapper {
background:#D4FFFF;
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Add background image to main column (posts)

Do exactly as above, but this time, upload the image to the web either using the free Photobucket or use Blogger to host the image as described in this post Use New Blogger to host your pictures for the profile photo, sidebar, blog Header, etc.. Get the photo URL.

Then add this line of code into the blocks mentioned above:

background: url(photo URL);

So the block of codes become:

#main-wrapper {
background: url(photo URL);
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup

Friday, June 22, 2007

Add a series of photos in blog footer

A blog reader asked how to put the profile photos of each author in a blog footer. That require a long answer, so I will answer in a post. Actually, the method described can be applied to the Header as well as the footer. You just click the right Add a Page Element in the right section in the LAYOUT.

I will proceed to explain how I put a series of 4 photos in the footer of My photo store. The first thing I did was to find out what is the width of the footer, and to do that, I click the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor window. I search and found this:

#footer {
width:660px;

That tells me the width of the footer is 660 pixels wide. I plan to put a series of 4 photos in the footer. 660 divided by 4 gives me 165. There are 2 ways to proceed, I will use the method that conserve storage space for my Blogger account and describe a slightly different method later. I will first resize the photos to width 160 using Irfanview (click BACK button to get back to this page). I then uploaded the photos to Photos for footer. I clicked on the photo one by one to get to the webpage that shows only the photo, and for each photo, I click VIEW in the menu bar and chose "View source". I copied the URL of the photo from the source and paste it into a Notepad file for later use. After getting the URLs of all the 4 photos, I then proceeded to the next step.

I clicked the TEMPLATE tab to get to the LAYOUT, click "Add a Page Element" in the footer section (if you want it in the Header, you will click "Add a Page Element" in the Header section), chose HTML/Javascript, then type this HTML for a table:

The actual HTML I used to display the series of 4 photos in the footer in My photo store I give in the scroll box below:

You will have to adjust the method described according to the number of photos you plan to put in the footer.

As promised, I will now described briefly an alternative method with will take up more Blogger storage space. You can upload the photos in its actual size, them for the <img> tag, write the tag as follows:

<img src="photo URL" width="160" />. Of course, if your footer width and/or the number of photos you want to put is different from mine, you will have to adjust the width="W" according.

All about digital photography

Thursday, May 10, 2007

How to add background picture to the sidebar

A blog reader asked about how to add background picture to the sidebar. This can be done. The first thing you need to do is to upload the picture to the Web, perhaps using the method outlined in this post Getting New Blogger to host the photo for your profile, sidebar, Header, etc. (click BACK button to get back to this page) or use a photo host like Photobucket

What you need to do to to sign into Dashboard, click LAYOUT, then click EDIT HTML and look for this block of codes:

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background:
}

Type this into the block of codes:
url(photo URL);

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background: url(photo URL);
}

You can see the result here: Dummies Test Blog. The links and wordings are a bit hard to see though because of the color. I probably have to choose another photo to demonstrate.

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