Thursday 31 May 2007

'Recent Posts' - Where did they go?

From: David McMahon
To: Terry Fletcher
Subject: Request from Jenera Healey

Jenera says, "I'm trying some new things with my template and I'd like to add a Recent Posts section in and I know you have one. How did you get that in your template? I'm having a heck of a time trying to get it in there!"

What's the answer El-Tel? I seem to remember we worked on this one when I first switched to the new template.

David


---------------------------------------------------------------------------------

Must admit that this one caused a bit of consternation because, as David mentions in his email, we DID work together on his template when he did the switch.

The BAD news is that it isn't possible to incorporate the feature into Jenera's template. Simple reason:

  • Jenera is using NEW-Blogger.
  • David is still using OLD-Blogger!

There is no doubt that NEW-Blogger is much more user-friendly and that it has introduced a 'drag-and-drop' feature, but at the same time the designers have integrated certain features. The 'Recent Posts' feature is one of them, and has been integrated into the 'Archives' feature which, in turn, has been expanded to allow different displays of the archived posts.

Win some! Lose some! But I will continue to investigate if it is possible to split the two.

back to the top

 

Sunday 27 May 2007

YouTube . . . My Generation!

Cecilia again (boy, am I glad somebody is asking questions)!

 

Q: How do I add a YouTube feed to my page. I've tried, but somehow it doesn't seem to want to display!

A: Follow these steps.

 

1. Find the video clip on the YOUTUBE site - NOT the clip you've seen being streamed on somebody else's page.

2. This is what you need to copy:

---------------------------------------------------------------------------------

3. This is a 'before' and 'after' of the same code snippet. You can see where I've added the tags to center the YouTube window. You can achieve the same thing by using the 'Compile' or WYSIWYG feature.

---------------------------------------------------------------------------------

The following is an excerpt taken from the blurb that accompanied the release of this video clip:

The oldest and greatest rock band in the world - meet The Zimmers and their amazing cover of The Who's "My Generation".

The single was painstakingly recorded between band members having to sit out sections due to treatment for various medical problems. One fainted in over-excitement before she even reached the studios.

Lead singer Alf is 90 - it's quite something when he snarls, 'Hope I die before I get old' and then a little later kicks over a drumkit. Winifred Warburton is 99 and thrashes away at the keyboard. Buster Martin, 100, is the oldest working man in Britain. You have to watch until the end to see his tour de force.

Tim Samuels, the documentary-maker responsible for this event says, "They are all enjoying the rock and roll ride in a very understated way. Some of them might not be able to stand for too long as their knees might give them a bit of gyp, but they are all sprightly enough."

Altogether, they are a formidable bunch!

 

 

I hope you gained something from the 'tute', but that you enjoyed the YouTube clip more!

Come back again soon.

back to the top

 

Thursday 24 May 2007

Leap of Faith, too . . . Implementing Thickbox

I am about to use one of David McMahon's original high-res photographs that he sent me some time ago, but which he hasn't actually posted on his blog one that he published on authorblog titled Jose, Can You See . . .. This should demonstrate how a 'medium-sized' picture on a Blogger page (as displayed on David's blog and reproduced in a similar size here) can be viewed at its best by using the 'Thickbox' technique. I like the effect very much; you have to decide whether it is something you'd like to use, too!

OK, let us make a start!

---------------------------------------------------------------------------------

1. Choose to make a new post (I don't think I need to add screencaps for the obvious steps - but correct me if I am wrong).

---------------------------------------------------------------------------------

2. Choose your method, 'Compose' or 'Edit HTML'. I prefer the latter because I have more control, but your mileage will vary. Be warned, you will HAVE to use 'Edit HTML' at a later stage.

I prefer to compose the post in a text editor - (click on the thumbnail for a larger image)

I also compose my posts in a text editor outside the post window, and when I am satisfied that everything is as I want it, I copy/paste into the editing window and save it (but, of course, Blogger has introduced an 'Auto-save' feature which is an excellent idea!). You can see from the 'screencap' that I have already started to format my paragaraphs and, where required, to italicise or bold the text.

---------------------------------------------------------------------------------

3. Before I upload the image I need to take a look at its size in 'high-res' format. This one happens to be 3008-pixels-wide and 2000-pixels-high (size: 827,906 Bytes).

  • Far too large to display as a standalone image in a new window; the viewer would be forced to use scroll bars to view the whole image.
  • Far too large to save many images of this size to your (limited) Blogger disk space allocation.
  • Far too large for a user with a dial-up connection (DUN) who would have to wait an interminable age for the picture to download and appear on his or her screen.
'Thickbox' will automatically adjust it to a viewable size that will display centred in the available space in the viewing window, whatever the screen resolution the viewer is using, but the other two factors mentioned above are still important, because Thickbox will NOT resize your raw picture for you.

I will now upload the image after having reduced it to 800px by 532px (size: 22,382 Bytes). I simply used Irfanview (discussed elsewhere) to reduce the width to 800 pixels and it did the rest for me:

The code returned for an uploaded image

The first thing to notice is how Blogger 'codes' the HTML for the image. In the 'screencap' I have deliberately NOT posted any text so that you get an idea of what sort of thing you need to look for when you start to fiddle with the HTML. In any event Blogger ALWAYS places the uploaded image at the beginning of your post, regardless of where you last placed your cursor. This is an annoying quirk but, we can use it to our advantage if we know that the last image uploaded will always be the first bit of text you come across when you're editing in HTML.

I have highlighted and arrowed the characters "-h" that appear immediately after "s1600". REMOVE THEM. Do it the first time you see your code so that you don't forget later when you're adding other bits as explained in step 4 below!

---------------------------------------------------------------------------------

Code changes highlighted and arrowed

4. Here is the same code again, but note the highlighted additions (errmmm... the deletion is obvious by no longer appearing there!).

  1. Added the code for centering the paragraph and 'closed' the tag.
  2. Added the 'class' telling the script to call up Thickbox.
  3. Added the 'title' text.
  4. Added the 'alt' text.

---------------------------------------------------------------------------------

Whew! That was a toughie - FOR ME. I began to get confused as to whether I was adding screen captures or the actual picture. Had to delete and re-upload a couple of times. But, if you've come this far, then here is the original David McMahon photograph (slaps head! - must remember to add the copyright):

 

Sunrise in the City! - (click on the thumbnail for a larger image) Photograph: © David McMahon

 

That's ALL, folks

back to the top

 

Saturday 19 May 2007

Leap of Faith . . . Editing your template for Thickbox

This is your 'leap of faith'. This is where you have to make a decision as to whether stepping out into the unknown is worth the end result. I have shown you what you can achieve; you have to decide whether it is worth the effort. I will hazard a guess that most of you decide that it probably is!

So, let us make a start.

---------------------------------------------------------------------------------

1. Call up your page in a new window and check that you're 'signed in'. You should now have this tutorial and your homepage open, either as two separate windows or two tabs (IE7 or Firefox or whatever), and you will need to switch between windows to complete the various steps I will outline.

---------------------------------------------------------------------------------

2. Click on 'Customize' (I vill zay zis only vunce - all editing is being done on YOUR page!).

---------------------------------------------------------------------------------

Choose to edit the  HTML - (click on the thumbnail for a larger image)

3. Choose to 'Edit HTML' when you are faced with these choices.

---------------------------------------------------------------------------------

Save your template - (click on the thumbnail for a larger image)

4. Save your template (but see below) . . .

---------------------------------------------------------------------------------

My preference for saving a template - (click on the thumbnail for a larger image)

5. My preference for saving a template is to copy the template from the editing window by positioning the cursor in the window, pressing 'Ctrl+A', then 'Ctrl+C' (this will select all the text in the window and copy it to the clipboard). Now paste the copied text into your text editor (Notepad or one of the editors I've recommended previously), by opening it and pressing 'Ctrl+V'. Then SAVE that as a text file, with a name you can recognise easily, and in a place that, if you need to, you can find it quickly.

Note: do NOT use a word-processing package like 'Word' as this will corrupt the text you've just saved. For the 'geeky', the difference is between UTF-8 and UTF-16, but that's another story for another time!

---------------------------------------------------------------------------------

6. Find the last 'close brace' above the '</head>' tag. You could scroll down (see image), but the easiest way is to click the 'Edit ---> Find on this page' link in your browser and type '</head>' (without the quotes) into the box and click 'Next'.

---------------------------------------------------------------------------------

7. Insert two or three returns between the curly bracket and the line that reads "]]></b:skin>". If your template doesn't have this line, insert the following code just above the '</head>' tag and it will still work! Copy & paste the code in the box:


/* ----- thickbox settings ----- */

#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}

* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}

#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}

#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}

#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}

#TB_title{
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
padding:15px;
}

#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}

#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

/* ----- end of thickbox settings ----- */

/* ----- start of Terry's settings ----- */

.img_left { /* terrys hack */
float: left;
margin-right: 20px;
margin-bottom: 6px;
}

.img_right { /* terrys hack */
float: right;
margin-left: 20px;
margin-bottom: 6px;
}

.clear { /* terrys hack */
clear: both;
}

.dropcap { /* terrys hack */
font-family: times;
color: #8CA3BB;
font-size: 70px;
float: left;
padding-right: 2px;
padding-top: 2px;
line-height: 60px
}

/* ----- end of Terry's settings ----- */

---------------------------------------------------------------------------------

8. This is what it should look like after you've pasted in the code. Still with me?

---------------------------------------------------------------------------------

9. Find the '</head>' tag again, then copy/paste the following code just above it:


    <script src='http://www.tapmal.com/thickbox/jquery.js' type='text/javascript'/>

    <script src='http://www.tapmal.com/thickbox/thickbox.js' type='text/javascript'/>

---------------------------------------------------------------------------------

10. This is what your template should look like after you've pasted in the relevant code.

A brief explanation: the code is telling the blogger engine where to find the JavaScript sources for the Thickbox to work. I have currently pointed it to my own server, which will always be available with the most up-to-date "js" scripts for this function. You see, I use this path as well, so you can be certain that as long as I am on the web, you don't have to worry about where to get your JavaScript or your animated 'loading' GIF.

---------------------------------------------------------------------------------

11. You can click on the 'PREVIEW' link, but you won't notice any change to how your blog displays, and that is because the bits of code we've put in don't actually change how your blog is displayed UNTIL you call the specific function. But more about that in the next post.

---------------------------------------------------------------------------------

Now 'SAVE' your template (you already have the original so you don't have to be too concerned) and 'View' your blog. No difference? Bravo! That means all the 'tweaking' you've done was completed successfully!

So far, so good! Now you just have to wait for the second part to see how to 'edit' each of your picture posts to achieve the 'Thickbox' effect.

Come back again, soon!

back to the top

 

Cracked it . . .

This is just here to tell you that I've managed to crack the prickly problem of making 'Thickbox' work with Blogger-uploaded pictures.

More will be added to this post . . . standby!

---------------------------------------------------------------------------------

Update: - (later in the day)

We will have to tackle this in two parts.

  • The first is the 'edit' you need to apply to your template.
  • The second will be what you need to do to get your picture(s) to display in the sexy Thickbox format.

The next couple of posts will deal with each scenario and, just to show that everything actually works as it should, I will display the larger graphics as a Thickbox image!

Edit: change of plan - I will display the pictures as full-sized images so that you can READ the text the image displays!

If you are still not clear about what a 'Thickbox' display looks like, you can scroll down the page to a couple of earlier posts, or if you prefer, click on the following links: Test Post and Picture displays - 101b.

All this is in response to something started by David McMahon, who emailed me with a 'suggestion' that I respond to some questions on his blog, and then subsequent questions and comments by papoosue, phaseoutgirl and B.T.Bear (esq.) (who does a mean tutorial, too)!

Gather round, and the first to claim success will get an 'honourable mention' on David McMahon's authorblog.

back to the top

 

Thursday 17 May 2007

Monitor it . . .

Have you ever wondered whether your visitors see your pages exactly the same way you do? I don't mean the content, I mean the display. Are the subtle colours you've chosen for your site displaying exactly the same way on your visitors' screens? Is that carefully spaced caption or title displaying in exactly the same way in the other guy's display?

  1. They must, mustn't they?
  2. Never given it a thought!
  3. Is this a problem?
  4. Not bothered!

To answer the last observation first; you should be, or you're not putting enough effort into your blogging. Only you know what answer to give to the first two, but the answer to question 3 is an emphatic "Yes".

I have 5 monitors that I check to see how things are being displayed, especially when it comes to the 'size' of the display, but not one of them renders the colours exactly the same as the others. Close, but no cigar! No, this isn't degenerating into a play-ground bully mantra of, "My one is bigger than your one!" I was just trying to make a point that if I can't get 5 monitors to 'synch' to the same colour spectrum here under the same roof, what chance do you think you have of getting your colours to display the way you wish them to, across the internet? But you can do a lot to minimize the problem, and that is where a little 'tool' can come in handy (ouch! that is comparable to the play-ground bully comment above!).

Korax ColourDrop 4: A Color Picker with some subtle features. You can save your swatches too.

(Note: this is a direct link to the installation file. Since the file is an 'executable' I downloaded the file again and ran it through a virus checker and can declare it 'clean'. A habit you should adopt whenever you take stuff off the internet, whether or not you consider the source to be okay! It seems that Korax still hosts ColourDrop 4, but they don’t have a page dedicated to the application on their site).

If nothing else, it is a fun tool to use. You will never need to 'guess' a colour again, and you can even get the value of the colour of a single pixel, if that is your wish. In any case, download this little beauty and start to use it, and you might find you keep returning to it more and more frequently, even if it is only to satisfy yourself that your initial 'guess' was right!

By the way, it is FREE!

back to the top

 

The Tools . . .

I am sure that each of you has your own personal favourite for the categories I mention below. These are mine, and most of them are FREEWARE!

Text Editors

A good text editor is absolutely essential when you're working with the web. Word-processing packages just don't cut it. Honest! I have two in this category. Both are FREE. I use the first one constantly (disclaimer: I use the Pro version), perhaps because I discovered it first. If the first programme can be considered a superb replacement for Notepad, the second is "Notepad on steroids". However, I doubt that many 'first-timers' will want to use the second because of its apparent complexity!

  • EditPad Lite: This is a general-purpose text editor, designed to be small and compact, yet offer all the functionality you expect from a basic text editor. EditPad Lite works with Windows NT4, 98, 2000, ME, XP and Vista. If you are a Notepad user you will wonder how you managed to get things done before you discovered EditPad.
  • ConTEXT: This is a small, fast and powerful freeware text editor, developed mainly to serve as a secondary tool for software developers. The designer says that, after years and years of searching for a suitable Windows text editor, he was unable to find one that completely satisfied his needs, so he wrote his own. I suspect that this little beauty won't remain 'freeware' for much longer, so grab a copy while you can. You may start to use it some time in the future!

FTP Clients

My own personal favourite is WS_FTP Pro, a paid-for tool, that forces me to exclude the link here. The ones I have included are 'freeware' clients, but I have only used the first one and find it a superb tool for the job. I have not actually tried the others although they continue to get rave reviews (for freeware) in the computer press!

  • FileZilla: FileZilla is a free, open source FTP client for Windows. It supports FTP, SFTP, and FTPS (FTP over SSL/TLS). The main features are the site manager, message log, file and folder view, and the transfer queue. The site manager allows a user to create a list of FTP sites along with their connection data, such as the port number to use, the protocol to use, and whether to use anonymous or normal logon. For normal logon, the username is saved and optionally the password. The message log is displayed along the top of the window. It displays the console-type output showing the commands sent by FileZilla and the remote server's responses. The file and folder view, displayed under the message log, provides a graphical interface for FTP. Users can navigate folders and view and alter their contents on both the local and remote machines using an Explorer-style tree interface. Users can drag and drop files between the local and remote computers. The transfer queue, displayed along the bottom of the window, shows the real-time status of each queued or active file transfer.
  • AceFTP: Visicom Media’s AceFTP 3 Freeware is the easiest-to-use free FTP client software available for transferring files over the Internet. Its cool, uncluttered drag-and-drop interface, designed in a Windows XP fashion, lets you transfer files quickly and efficiently and navigate with ease between folders, both on Web sites and on your computer. This robust, free FTP software is a high-speed FTP program. It enables you to perform multiple file transfers simultaneously. Simply put, it beats many paid-for FTP client software products hands down.
  • FTP Commander: Simple and easy to use. It's really the bare minimum with no extra frills or thrills. It offers a no-nonsense interface consisting of two side-by-side local computer and FTP server panels. It's easy as pie to establish a connection. Pre-configuring a list of most frequently accessed servers will make your life easy. All you have to do is select the server you want on the list and push the Connect button. This FTP program occupies far less space on hard drives and RAM than other similar paid programs. It also allows you to delete, rename and and copy files, create and delete directories in the FTP server and work in command line mode. The program is absolutely free and does not contain any annoying ad banners.
  • SmartFTP: A solid freeware FTP client, SmartFTP offers loads of handy features, including a Windows Explorer-like interface, drag & drop support and resumption of broken transfers. Free for personal, as well as educational and non-profit usage. Unfortunately you also get a nag screen asking you to buy the product, but it is not crippled in any way.

Graphics Manipulators

This is a difficult one. Simply put, you get what you pay for! There aren't many 'freeware' programmes in this category, unless you count 'Paint', Microsoft's bundled graphics programme which is almost as good as useless. I use a combination of Adobe Photoshop (that's an OUCH! in the $$$'s department) and Xara Xtreme (much more affordable - and it can do things you never dreamed of!), but when it comes to 'bang-for-buck' the FREE IrfanView takes a bit of beating. Hunt around and you can get many plug-ins for this 'viewer' that will allow you to 'manipulate' your photographs. And did I mention it is FREE?

  • Irfanview: IrfanView is a very fast, small, compact and innovative (FREEWARE - for non-commercial use) graphic viewer for Windows 9x/ME/NT/2000/XP/2003/Vista. It tries to simplify things for beginners, and yet it can be a powerful tool for professionals. IrfanView tries to create new or interesting features in its own way, unlike some other graphic viewers. IrfanView was the first Windows graphic viewer WORLDWIDE with Multiple (animated) GIF support, one of the first graphic viewers WORLDWIDE with Multipage TIF support, and the first graphic viewer WORLDWIDE with Multiple ICO support. Some of the feature set for IrfanView are: Extensive list of supported file formats Multi language support Thumbnail/preview option Toolbar skins option Slideshow (save slideshow as EXE/SCR or burn it to CD) Show EXIF/IPTC/Comment text in Slideshow/Fullscreen etc. Support for Adobe Photoshop Filters Fast directory view (moving through directory) Batch conversion (with image processing) Multipage TIF editing File search Email option Multimedia player Print option Change color depth Scan (batch scan) support Cut/crop IPTC editing Effects (Sharpen, Blur, Adobe 8BF, Filter Factory, Filters Unlimited, etc.) Capturing Extract icons from EXE/DLL/ICLs Lossless JPG rotation Many hotkeys Many command line options Many PlugIns Only one EXE-File, no DLLs, no Shareware messages like "I Agree" or "Evaluation expired" No registry changes without user action/permission! and much much more.

Those are just a few to be getting on with. What are you waiting for?

back to the top

 

KISS

KISS or Keep It Simple Stupid has always been a favourite adage of mine, student or instructor, man and boy!

I spend hours trawling the web for information and it is only when I am researching something specific that I have the patience to read ALL that an article or post contains. Even then I tend to skip huge chunks when it becomes apparent to me that the author is being self-indulgent about his or her subject by mentioning every trivial detail.

Of course, there is a delicate balance in deciding how one imparts information. Assuming that the reader has absolutely no knowledge of the subject is presumptuous and a bit supercilious, and can often give offence. Yet, assuming, often erroneously, that the reader has a basic understanding of the subject and skipping some parts that might seem too trivial to mention, turns the exercise into a total waste of time for many!

To be honest, I don't have the answer to how to handle the balance. So, anything I write in this Blog is just going to have to be aimed at the 'lowest common denominator', which should meet the requirements of the majority although it might be boring for a few. To the latter I just have this to say; I am sure you can find similar information elsewhere that will appeal to your level of intelligence and understanding. This blog is here to help those who are just about to dip their toes in the water!

If you've read this far I have to assume that you have an interest in wanting to do something with your blog, but have been too hesitant to ask. Well, now is your chance. No question or request will go unacknowledged. You'd be surprised at how many people, myself included, glean information by just reading questions and answers. Sometimes it is pertinent, sometimes it can be ignored. But if nobody asks, nobody gains. And my crystal ball is fairly cloudy at the moment!

A Forum would be a better vehicle to handle questions and answers, but actually handling the queries on a Blog page gives the viewer a visual idea of how things should ultimately turn out. The fact that this is a New Blogger blog somewhat limits the information to users of that resource but, since the initial request(s) have been from bloggers who use this software, this is what it will continue to concentrate on.

I shall post a few general 'hints' and 'tips' to keep the ball rolling, but it is only you that can keep the whole thing 'alive'.

Over to you.

back to the top

 

Saturday 12 May 2007

TIP - Copyright . . . (for Cecilia's picture © info)

Cecilia asked about placing copyright information below a picture, possibly in a different font and colour so that it did not merge with the text of the post. My response was that she should highlight the copyright text and then select to 'center' it after choosing the 'font', its 'color' and its 'size'.

She managed this pretty easily when she elected to have the photograph showing in the middle of the page; the copyright caption just became another line of text, centred under the photograph! But when she tried that with a pic aligned to the left of the text, everything went 'pear-shaped'. And I suspect that exactly the same problem will occur if the pic is aligned to the right of the text.

Hmmmmm! Time to revisit the problem.

---------------------------------------------------------------------------------

an original landscape by Cecilia Mercado
Photograph: © Cecilia Mercado

Much research of Blogger Help lines uncovered the fact that the new Blogger engine does NOT support captioning of pictures so, to get the effect, one has to 'fiddle' with the template HTML and the post AFTER you've uploaded the picture and saved the post, as a Draft, so that you can return to it and edit the HTML. No need to throw your hands up in horror. It really is a simple exercise!

In the next post I will walk you through the procedure. However, until I have managed to get comprehensive screenshots of each step I will try not to post anything that ends up confusing the reader. I will also try to add 'plain-text' code that needs to replace what Blogger produces so that you can literally copy/paste the 'edits'.

Stay tuned!

back to the top

 

TIP - Picture displays 101(b)

A bit of blurb on David McMahon - (click on the thumbnail for a larger image)This is an experiment to attempt to 'integrate' the lightbox variant, called "Thickbox", into a standard Blogger post.

If it works, then I've cracked this prickly little problem. Keep your fingers crossed, because if this thing comes off, none of our blogs are going to be viewed the same way ever again!

And if this works I will try the 'Gallery' display for pictures, still using 'Thickbox', but it will require much more editing of the HTML in the post. I am sure that a lot of people will throw their hands up in horror at this suggestion, but I will attempt to walk you through all the processes, step by step, until editing your pictures becomes second nature.

And I will explain HOW in the next post.

Promise!

---------------------------------------------------------------------------------

A bit of blurb on David McMahon - (click on the thumbnail for a larger image)

Update: 11 May 2007

Darn, but it only works 'partially'.

The script is being called successfully in both these examples, but the larger image that was uploaded to the Blogger server for the first attempt is 'refusing' to open!

The image on the right opens as it is expected to, the only difference is that the larger image is on a different server (my own). Don't understand why this is happening, but I am investigating . . .

Watch this space!

Promise!

---------------------------------------------------------------------------------

Update: 19 May 2007

Cracked it! I will post the step-by-step 'tute' as soon as I've managed to get all the screen captures necessary to make things crystal clear.

Watch out for a new post!

back to the top

 

Thursday 10 May 2007

TIP - Copyright

This post is in response to a question by phaseoutgirl (Cecilia) who hosts a blog called 'Dance with the Sun' (what a terrific name; doesn't it just invite you to visit?). She wished to know how to post a copyright note at the bottom of her pictures, similar to how David manages to copyright his own pictures. So let's deal with that first:

Thyson being introduced to a baby lovebird to remind him it isn't a snack!Thyson being introduced to a baby lovebird!
Photograph © 2007 Terry Fletcher

 

Follow the normal steps you use to post a message and an image, by using the 'Compose' (WYSIWYG) editing window. After you've inserted the picture and arranged it to display where you want it, hit return once and type in your copyright information. Then highlight those words and select 'center' and the text 'font-size-colour' you want it to display in (note: If you didn't already know, you can get the © symbol by simply using the key combination "Alt+0169" on your number pad - doesn't work with the numbers on the top row of your keyboard!).

Done!

Not one to stop with just a single example (hey, that's my weakness and you'll just have to put up with it) I decided to add these, too:

 

 

If you use a graphics programme that supports 'layers' (Photoshop, etc.), you can type in information as in the example above and superimpose it over the original picture.

  • the first is Cecilia's copyright info on a transparent background so that it can be copy/pasted over any of her photographs just by lifting it off this page (go for it, Cecilia!).

  • the second is displaying the same information over a gradient background composed of the colours from the background colour of my page and that of Cecilia's page to show that, regardless of the background, the lettering always shows through clearly.

  • the third displays the same info over a gradient of white leading to the background colour of Cecilia's page background, showing that regardless of what the background colours are, the lettering will always show up clearly.

If you use this idea you should make the lettering white (hex #FFFFFF) and give the layer drop shadow properties of the following:

Opacity=100% | Angle=120º | Distance=1px | Spread=0% | Size=1px

and you will find that wherever you place the copyright information on your picture it will always show through.

That's all, folks!

back to the top

 

Wednesday 9 May 2007

W3C . . . who, what, when? . . . NOT!

W3C is the World Wide Web (W3) Consortium. It was formed by Tim Berners-Lee (Sir Timothy John Berners-Lee, KBE, FRS, FREng, FRSA - the acknowledged 'father of the web' and a Brit, no less) with the aim of setting standards & rules for all users of the WWW to abide by. Of course it doesn't happen, but the more 'anal-retentive' people like myself try very hard to meet their standards. Hand over heart, I can say that all but one of the 12 sites I've built (and currently administer) meet those standards, and if you stumble across one of my sites and see the W3C button proudly displayed, you can be assured that clicking on it will confirm that it is so!

Imagine my horror to find that a 'virgin' Blogger site (this one), with only the template loaded and NO posts, did not meet the validation standards, and managed to serve up an error count in the high 80's. Further checks on other Blogger sites I visited confirmed that this is the norm. A search for an answer to this anomaly threw up an explanation that, since Blogger changed to their new format, NO site validates correctly. And that all users are advised to accept this state of affairs until such time as things are rectified. If they ever are!

Aarrrgggghhhhhh!!

I am not about to launch into a discourse on the advantages of standards validation; it is a boring subject and you need to be a bit 'geeky' to even want to investigate it. But I will mention that if you don't try to meet the basic requirements of "Accessibility" then you aren't being very kind to some of your visitors.

  • Visually impaired users ( some are even blind) make up a large number of web surfers. They generally use software called 'screen-readers' that will speak every character it comes across. So try and remember that all your 'pretty pictures' aren't much use unless you add some descriptive text in the 'alt' tag. Screen-readers can't unravel graphics. And rather than say something like, "this is a picture", try and make it a bit more descriptive like, "this is a picture of an underwater-basket-weaver". Get the picture?

  • You are probably connected to the internet over a broadband connection and have a humoungus-sized computer with a gigantic 22-inch flat screen LCD or TFT monitor. But what about the poor guy with a dial-up connection (DUN), a piddly little P3 and a 14-inch CRT? Exaggeration? Perhaps a little, but there is a small percentage of this kind of user out there and you really ought to take them into consideration when you build your site!

If some of that made you think, even just a little, then we're well on the way to designing super sites that are also accessible to all types of users.

If you are in a masochistic frame of mind, take a trip to the W3C Markup Validation Service, enter your site URL in the box, then sit back and view the results - with horror!

It just has to be the way ahead!

back to the top

 

Tuesday 8 May 2007

TIP - Picture displays 101(a)

Let us step back to the original request about how to insert a picture within a post so that, when clicked, it will take the viewer to a larger version of the same picture, hence allowing more detailed examination.

The only caveat I would add here is that you should try and keep your original pic to a reasonable size, say 800 pixels wide, so that people with slower dial-up connections don't have to wait an age for them to be downloaded to their screen. The real down-side to making the pictures 'huge' is that people might stop visiting if they feel that they have to wait an unnecessarily long time for something to display!

My Cyprus Garden - View 1

These are views of my garden when I was lucky enough to live in Cyprus for a short time. The house and garden were perched on top of a cliff that overlooked the blue Mediterranean. Glorious!

My Cyprus Garden - View 2

I just uploaded the originals to Blogger, chose to have them display as 'centred' and in a 'medium' format (size) on the page, and Blogger did the rest.

Now that Blogger had done the hard work I then clicked on the 'edit' icon below the post and chose to edit the HTML version, but only to add a couple of little 'extras'.

image edit screencap

You should make it a rule for any picture you display on your site to 'identify' it by giving it some 'alt' text. This helps the visually impaired who may be using a screen reader to access your blog. I did this in the code that Blogger generated. The second thing I did was to insert target="_blank" at the end of the code line so that when a viewer clicks on the picture it is opened in a new window. Frowned on by the W3C standards validation people, but I will explain my reasons at a later date!

Nothing difficult about that, huh?

back to the top

 

Let's take another tilt at this windmill . . .

I started the 'Sandbox' on the 29th April in response to questions on David McMahon's authorblog, about how to achieve simple picture displays.

In my haste I completely overlooked the fact that I was hosting my blog on my own server, and that editing it to achieve the results I was after was a bit 'geeky' and that it concentrated on editing HTML code. Not something everybody is familiar or comfortable with!

A comment on the Sandbox by 'papoosue', who has a blog called Random Blethers, gently reminded me that not everything I assumed was a simple task, was actually that 'simple'. I gulped, and decided that, to meet the needs of the visitors to David's superb blog, who come to him with many questions and varying degrees of ability, that any explanation needed to concentrate on how things are done using Blogger's excellent built-in system of 'editing'.

The ability to edit most of your display, especially by manipulating the template you've chosen, already exists within the Dashboard elements of Blogger, so why not give your site that 'unique' look?

You could even register another blog, not publish it, but use that as the 'testbed' for any changes you wish to introduce. That way you won't break your original, and when you're satisfied that you have achieved the design of your choice, then copy it across!

So, what are you waiting for?

back to the top

 

Monday 7 May 2007

My Profile

My email

This is information about me that does not appear on my Blogger profile. I've added it here to test out the functionality of an 'additional' profile that expands on what Blogger publishes.

  • I was born in India in 1944 and studied in various English-medium (Anglo-Indian) schools, some as a day scholar, most as a boarder, until the age of 16.
  • By the time I'd turned 17 my parents decided that the only hope for me to make my way in the world was to pack me off to the UK.
  • I arrived in the UK in March 1962, and stayed with friends that originally came from the same Railway Colony in which I lived in India.
  • I arrived on a Sunday and had landed a job by Thursday. An 'apprenticeship' that ultimately turned out to be a con, but that's for a full post some time in the future!
  • Dissatisfied with the mind-numbing, repetitive task of producing 'electrical cable twists', from the sort of light stuff (pun intended) you use every day, to heavier lengths that often ended up as 'undersea cable', I applied to join the military.
  • My first port of call was the Army, but they didn't have vacancies for 'tradesmen', only canon-fodder in the infantry. I declined and approached the RAF.
  • The RAF welcomed me into the 'Communications' trade and that's what I spent the next 36 years doing, never bored, because you never knew what awaited you when you signed on for your shift. One of the highlights was speaking to an aircraft tasked to carry HRH, The Prince of Wales, whilst it was still on the deck in Kathmandu. I happened to be on a tiny, remote island in the Indian Ocean, thousands of miles away. That, too will appear as a post some time in the future!
  • I met Maria during my last months in the RAF, and in 1998 I joined her in Portugal to start another life. Which I am still living. Eat your hearts out!

That is a quick résumé, to which I might add from time to time, as the notion takes me  ...

back to the top