Read my latest posts!

Tuesday, July 31, 2007

Image Tips & Et Cetera.

One of the things that irks me is when I'm reading comments on folks blogs is that when there is more than a pageful of comments and I scroll down towards the bottom, and I'm reading suddenly the page pops back up towards the top. The more comments, the worse this seems to happen. Its irritating.

I know why it does it, too. It does it because folks are using blogger accounts to make the comments, but they aren't using blogger to store their profile pictures.

So here goes, I'm going to tell you what to do to make your picture show up almost instantly and quit bothering us with your slow butt servers. Pay attention, this works well for other uses, like the image you use for your FavIcon (the one that shows next to your URL in the address bar, it doesn't have to be that omnipresent orange & white "B" (more on that later, like how to add one like mine.))

First you need your image file, whether or not its on your computer, or you can get it from another server on the internet.

Go into your Dashboard to create a new post, we aren't really going to create a post, but this makes available the tool we're looking to use. Hey, there's the "Add Image" button, just what we're looking for! Click it. This will bring up a dialog box, with "Add an image from your computer" and "Or add an image from the web" as our two optional methods. "Choose a layout," is below, and I haven't experimented with them, but have always just chosen "None" and "Large." Of course if your image is on your computer you'll want to click the "Browse..." button and go to wherever you have your image, and if you have your picture elsewhere on the web enter the URL to it in the appropriate URL box. Click the orange "UPLOAD IMAGE" button (what is it with Blogger and orange?)

A window will popup showing your image and telling you 'Your image has been added.
After clicking "Done" you can change your post and publish to your blog.' At the bottom click the blue "DONE" button (Thank goodness it wasn't orange.)

Now you want to select the tab that says "Edit Html." You should see something that looks similar to the following:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_3rn2_IX8B5Q/Rq-a-M7ZWZI/AAAAAAAAACA/JAVHNktLlOY/s1600-h/MonaIcon.jpg"><img style="cursor: pointer;" src="http://3.bp.blogspot.com/_3rn2_IX8B5Q/Rq-a-M7ZWZI/AAAAAAAAACA/JAVHNktLlOY/s400/MonaIcon.jpg" alt="" id="BLOGGER_PHOTO_ID_5093460096992237970" border="0" /></a>

For those that didn't notice, there's actually two (2) URLs shown there. Hmm, Blogger stores two different images every time you upload an image. Maybe the s400/s1600 is a resolution or compression setting... That explains how you can click an image and see it full resolution...
Anyway, to get back on subject, what you want to do is select the portion of the above between the quotes following the "href=" or the "src=" and copy it to your clipboard or write it down (ugh, what am I saying? Write? What do they make computers for?)

If you want to check, you can open a new browser window or tab and paste your URL in and it should show you the image on the blogger server (you can use the example above, its real and an icon made from Mona's profile picture.)

Now that out image is uploaded, we don't need that post we started, and chances are excellent that it already auto-archived. So let's delete it. Click "Edit Posts" under the "Posting" tab, near the right in the fourth column from the right, you will see in orange the word draft next to "by your name" , which is next to the date or time. To the right of all of it, is a blue "Delete." Click that word "Delete."

The page changes, and you get " Are you sure you want to delete this post?" near the top. This is where you want to be careful. You can delete your image here. It tells you:

"The following photos will also be deleted from Blogger. Please uncheck any that you wish to keep.
(It may take up to 24 hours for them to be removed)."

It shows your image near the bottom, above two buttons, and above that, there is a small checkbox (checked) and the word "Delete." Before continuing, un-check that box and you'll see the word "Delete" change to "Keep."

Now you can safely press the orange(!) "Delete It" button.

I detailed the heck out of this, its really very much easier than it sounds. So let's move on to that FavIcon.

FavIcons are pretty cool to have for your blog. They make it easy to recognize which tab is for your blog, and help establish a feel for your blog and are easier on the eyes than actually reading (what kind of person reads on a computer?)

Again the first thing you'll need is the image to use. I'll point you to Canadian Mind Products for an explanation and tools. Just create it as instructed, upload it as I instructed above, and copy the URL.

Now what you want to do is goto your dashboard, Click the "Template" tab, and make sure you have "Edit HTML" selected. Near the top (it may be several lines down) you will find a tag "<head>." you can add a blank line by clicking after the tag and hitting Enter or on that line, you want to add '<link rel="shortcut icon" href="">'
Click between the parenthesis and paste your URL.
Save your template by clicking the orange (there it is again) "SAVE TEMPLATE" button.

I need to change mine, apparently it doesn't show for IE (I guess I should have read about it first.)

UPDATE: It seems that only jpeg or gif images can be uploaded, which keeps us from using ico files.

Labels:

27 Comments:

At Tuesday, July 31, 2007 at 9:47:00 PM EDT, Blogger MONA $visitorIP said...

:( It really doesnt shpw in IE

Charles!! :) :) :)

For the first Time I was able to understand The Computer speak completely! YAAAY!
Even the two HTMLs in the Edit Htmls

I guess it must be laycomputerspeak actually....

At Tuesday, July 31, 2007 at 9:53:00 PM EDT, Blogger Charles $visitorIP said...

I still haven't changed it.

At Tuesday, July 31, 2007 at 10:35:00 PM EDT, Blogger no.good.at.coding $visitorIP said...

Hi Charles,

Had no idea you had a Favicon! I use IE 6 at home and IE 7 at work ( only because I can't get it to uninstall! Some other user's installed it and only he/ she can do it! ). Will check your blog out using Firefox today.

Hm, come to think of it, I've visited your site using IE 7 and haven't see the Favicon. And IE 7 supports 'em.

You know what? I think the problem may be with using JPGs or GIFs as the icon! IE 7 ( as opposed to Firefox, dunno about others ) will only accept actual icons; *.ico files that is. It will not use other image types. Even the old trick of renaming a small .bmp file to .ico will not work. IE will ignore those. This is what I'm aware of anyway.

Also, you're right about the s400/ s1600-h. They're the resolution settings. You can also have s144 ( Thumbnails: 144px ), s288 ( Small: 288px ) and s800 ( Large: 800px ). I think the 'h' in s1600-h stands for 'high' as in 'high-resolution'.

Now that Google owns both Blogger and Picasa, your Blogger photos get uploaded into a web-album on Picasa Web Albums

I'm not a big fan of orange, but it does add a dash of colour :D I find Wordpress to be rather drab; and they use all my favorite colours, grays, blacks and blues.

At Tuesday, July 31, 2007 at 10:36:00 PM EDT, Blogger no.good.at.coding $visitorIP said...

I just re-read the post. Seems you already know about the problem with JPGs and GIFs that I mentioned before :) My bad.

At Tuesday, July 31, 2007 at 11:00:00 PM EDT, Blogger lime $visitorIP said...

oy, it's late and i had to read this twice to grasp the process but i think i get it now....i sure am glad you knwo what you are doing....and yes, that popping drivves me nuts too...

At Wednesday, August 1, 2007 at 12:37:00 AM EDT, Blogger MONA $visitorIP said...

Guess I will have to download Firefox to be able to see it.

At Wednesday, August 1, 2007 at 9:18:00 AM EDT, Blogger Charles $visitorIP said...

NGAC,
You don't need to uninstall IE, just install Firefox, they will peacefully coexist, as long as you turn off the default browser checking of the one you don't want as default.
Good to know that I had an assumption right, thanks.
MS would seem to be rather stubborn in its rejection of anything but one specific file format.
Yes, I'm sure blogger and the former Picasa are sharing pipes, its definitely faster than some of the other locations that allow photo storage.

Lime!
Nice to see you. I'm sure you got it the first time, and just read it to review. Yes, its frustrating to be reading and then have to find where you were. Unfortunately, we can only fix our own, and neither of us are offenders.

Mona,
I believe I already gave you a link to the Firefox install. Just in case you or anyone else may want it, here it is.

At Wednesday, August 1, 2007 at 11:53:00 AM EDT, Blogger no.good.at.coding $visitorIP said...

Oh, I know that Charles :) In fact, at work I have IE, Firefox, Opera, Netscape and Safari; because some of my work involves JavaScript and I need to make sure I get consistent behaviour on all browsers. Why do they consider it a standard again? :D

When I said I'll try out Firefox I meant to convey that I use IE by default. Except when I face problems with the scripting or rendering, like with Technorati.

At Thursday, August 2, 2007 at 3:31:00 PM EDT, Blogger S E E Quine $visitorIP said...

` Thanks, Charles, for making this as confusing as possible for my brain! I'm sure to not change my avatar again! Pttbtbbtbtbt!

` Alsos, what is a favlcon?

At Thursday, August 2, 2007 at 4:47:00 PM EDT, Blogger Charles $visitorIP said...

Hey Sara! I thought that you were from Washin'somethin', not the Bronx. That was for folks that wanted to put their picture on Google owned servers, so that they load faster. I broke it down to the very most elemental steps, so that anyone could just follow along. I want them to put the pictures on the same servers as their profiles, so that everybody's enjoyment isn't disturbed. Nothing confusing about it.
So did you tell about how this PB thing works?
Until we meet again, I bid you a loud and hearty cheer (as in the Bronx variety.) :)

At Thursday, August 2, 2007 at 6:45:00 PM EDT, Blogger lime $visitorIP said...

i just read your comment at my place....you shaved your head?????!!!!! say it isn't so!!!!! oh i am in mouring. your picture shows such a wonderful head of hair! to think it has been sacrificed.....oh woe!!!! and it was such a nice blend of salt and peper (and yes my salts have a mind of their own too. i do understand). oh i am brokenhearted.....grow it back please! please? (makes very sad puppy dog eyes....)

At Thursday, August 2, 2007 at 10:59:00 PM EDT, Blogger Charles $visitorIP said...

Yes, indeed. I now have a bald pate. It actually makes me realize why I've been so warm lately. The hair just had to go though. I can't stand when its poking me in the eyes. I let it grow for longer than usual, but the tips just wanted to stay at eye level. Its a done deal now.;)

At Friday, August 3, 2007 at 6:36:00 AM EDT, Blogger MONA $visitorIP said...

Lime... add me to the list of mourners...But I do not lose hope... Charles taught me not to, so he will not disappoint me I know...& I see it growing a one hundreth of an inch daily...

But to tell you the truth..I do fancy Baldness I am just mourning the poor magnificent hair lying on the floor to be swept away...I would have saved it in a bottle...

At Friday, August 3, 2007 at 7:45:00 PM EDT, Blogger snowelf $visitorIP said...

Okay Charles...now you're just showin' off. ;)

Just kidding Sweetie!! Hugs!!! I am eventaully going to follow these directions. ;)


--snow
(p.s. I'm on ch-5 so far)

At Friday, August 3, 2007 at 7:58:00 PM EDT, Blogger snowelf $visitorIP said...

ps-- I just read over at Serena's...I only know a little Perl, and thne visual logic--which barely qualifies as a language... ;) Sorry...I can cable like a speeding demon on crack though and I can practically program routers and switches with my eyes closed, all while explaining the magical mystery of dhcp...
(yea, who's showing off now. ;))
hehehehe

--snow

At Wednesday, August 8, 2007 at 8:16:00 PM EDT, Blogger S E E Quine $visitorIP said...

` PS, speaking of pictures, I have the first pictures of my baby aliens - I mean kittens - on Spurious Brainchildren!
` I also have pictures of my boyfriend being an action hero (except in the film he actually gets killed).
` It really freaked out one of the readers in my Bethink Avenue blog when they saw it, and they made sure Prof Daveed (Mercury) knew all about it because it's obviously his fault and has nothing to do with, say, the author of the blogs!

At Wednesday, August 15, 2007 at 7:25:00 AM EDT, Blogger Top cat $visitorIP said...

stopping by to say hi charles.:)
tc

At Wednesday, August 15, 2007 at 8:15:00 AM EDT, Blogger Charles $visitorIP said...

I know, I know, I've been neglectful.

Hey Snow, you didn't want to be a programmer, I can tell. I didn't want to be a programmer, either. I wanted to be an admin that could program, and make my work easier as I went along. I should have just gone with being a programmer.

Hey Sara, your aliens are too cute, if only we could keep them like that. Mercury is a brain, I'm sure.
I hope your AH/BF isn't mad at me. I imagine that those complexions are pretty darned common in your area. I liked his reference to the pale rider, that was a good way to do that, it made me laugh. He must be a really great guy, being honest and protective. Hang on to that guy, you won't find many honest one's out there.

TC, Buddy. You feel free to stop anytime, you'll always be welcome here.

At Friday, August 17, 2007 at 9:39:00 AM EDT, Blogger no.good.at.coding $visitorIP said...

Hey Charles,

I was sitting idle at work today and so I ran a Google search for this message. Turns out, there's a solution, if you don't mind lowering your security a bit.

As most of the results indicate, the problem seems to be that for URLs beginning with https ( indicating a secure connection ), if the page also contains nonsecure content like images or ads, IE ( and other browsers, though less frequently and less annoyingly ) detect mixed-content and the default action for that, under IE, is to prompt.

The solution given is that this can be changed by going to the Tools menu > Internet Options option > Security tab > Custom Level button and scrolling about half-way down to set Display mixed content to Enable.

Hope this helps :)

At Friday, August 17, 2007 at 10:59:00 AM EDT, Blogger Top cat $visitorIP said...

Have a great weekend charles.:)
tc

At Friday, August 17, 2007 at 1:54:00 PM EDT, Blogger Charles $visitorIP said...

NGAC,

So what you are saying is its related to mixed content as far as secure browsing is concerned? I never get that message from Firefox, and the problem images always are the ones that show on my status bar as the ones that are being waited upon. The fact that most profile pics are nonsecure should point out that the mixture isn't the problem, since a browser wouldn't know whether the google servers (Picasa) are google's or not. I think if everyone would simply use google to store profile pictures, it would help immensely. It isn't exactly hard to use, and it would free up the space on other servers in addition to helping the rest of us enjoy our blogging.

TC,

You have a great one, too. Enjoy it for all its worth, and then some. :)

At Saturday, August 18, 2007 at 12:26:00 AM EDT, Blogger no.good.at.coding $visitorIP said...

Oh no, Charles. You're getting a little mixed-up about mixed content there :) By mixed-content, I meant secure content ( stuff whose URL begins with https ) and nonsecure content ( stuff whose URL is a simple http ). Nonsecure indicates unecrypted and not using https protocol and not just that it's on a different server.

Consider your comments' popup window. The URL is https://www.blogger.com. This means the page is SSL encrypted, making it secure. But your image that is displayed is being linked to as http://3.bp.blogspot.com. This puts it on a different server from the page and using simple HTTP making it nonsecure content. And this, as you rightly pointed out, is the problem.

Potentially, with active content like scripts, a malicious designer could cause problems by loading them insecurely even on a secure login page and hence possibly leak your username/ password out in cleartext.

But usually, it's simply images being loaded insecurely ( there is no need to encrypt them ) from an image server which causes the browser to complain. In Firefox, this setting is disabled by default. You'll get this with Netscape too, I read, but less frequently.

If you go to https://www.gmail.com, Google now randomly serves up a 'Sign Up' image. It's not always there, but cycles randomly. Whenever it appears, you'll get the same warning about secure and nonsecure content. This is because the login page is secure, but the image being loaded is not. Even though it's from Google's own servers, but like you said, the browser can't know that. All it sees, is that there is some sort of unencrypted, and so potentially unsafe, content on an otherwise encrypted page.

The problem can be solved at the code level by using relative URLs for images etc instead of absolute. Of course, it's not always possible, so the next best thing is to turn off the warning completely.

Take care :)

At Saturday, August 18, 2007 at 12:32:00 AM EDT, Blogger no.good.at.coding $visitorIP said...

Um, just realized that nowhere in your post do you mention the popup saying '...contains secure and nonsecure content...'.

I don't know how it occurred to me that that was what you were talking about! Eek! And here I've been giving long-winded replies about how it happens!

But that is the most irritating warning that IE gives and it always occurs on the comments' pages.

In case that is what you were talking about, then great :D If not, then, well, we all learned something today :D

At Saturday, August 18, 2007 at 8:56:00 AM EDT, Blogger Charles $visitorIP said...

Ah, now you understand. :)
I knew it wasn't about the mixed security. As I said, it has never been an issue, as it would have popped up the warning for most comment pages. I've never had to contend with it. The issue is how slow the access is to images from other services. I really doubt that they have the bandwidth that Google has, or servers as fast as Google has either for that matter.

At Saturday, August 18, 2007 at 10:18:00 AM EDT, Blogger MONA $visitorIP said...

ah! There is something I learned about that non secure msg on that comment page here! I had always wondered why they happen to be non secure and why do we get that warning!
Now I know :)

At Thursday, August 23, 2007 at 1:41:00 PM EDT, Blogger Mike M $visitorIP said...

It happen because comment profile pictures are loading. When they are done, the scroll returns to the top of the page, regardless of what you were doing

At Thursday, August 23, 2007 at 2:57:00 PM EDT, Blogger Charles $visitorIP said...

Mike,
Yeah and in those cases, the profile pics are sourced from servers that aren't Google's. That was kind of the point I was making, that and telling them how to make things better for everyone.

Post a Comment

<< Home