Google Analytics

Monday 25 July 2016

My Picture Book of Ships

On the bottom shelf of my dad’s bookcase were some of his childhood books. He was nearly as daft as me for keeping things. There might have been many more treasures but for mum’s propensity for throwing things away, although the bookcase was sacrosanct, even to her.

I always knew he had them, of course, but never took the time for anything more than a superficial glance at the pictures. He must have treasured them greatly. All have his name and address inside and some also the date.

My Picture Book of Ships

The earliest and most dilapidated is My Picture Book of Ships which he got in 1926 at the age of five. To a child at that time the cover must have looked thrilling: the vast bulk of the ocean liner soaring proud above the waterline, the towering hull and funnels, the dense spray from the bow-wave hinting at the rumbling power of the great engines and propellers, the huge anchor tight against the ship’s side. People yearned to travel in the luxury of these floating palaces. They were the dream machines of their day: the supersonic jets, the Lamborghinis, the spaceliners, the high speed trains, the earth moving machines, the ice road truckers. Even their names implied substance and opulence: Majestic, Britannic, Olympic, Leviathon, Edinburgh Castle.  

My Picture Book of Ships White Star Line Majestic at Boston Dry Dock

We used to look at it together when I was little. We studied the sixty two illustrations but never read it. The text tells of two children, Tom and Betty, who ceaselessly ask Father question about ships. They also play at ships: Tom is Captain and Father the pilot, while Chief Officer Mother sleeps “on watch” below and poor Petty Officer Betty gets ordered around.

Father of course answers all their questions patiently, knowledgeably and at length. He tells them about how the voyage of an ocean liner is organized, how sailors are trained, shipbuilding, shipwrecks, coal and oil power, sail, cargo vessels, lifeboats, light houses and light ships, paddle steamers and ferries. How he knew all this stuff is not clear. He just did. Perhaps he was a seaman himself, or maybe like my own dad his grandfather had been a Captain and his cousin was at sea. Oh yes, all dads knew everything there was to know about ships; especially when they had grown up in a Yorkshire port.

London Docks 1920s Harwich-Zeebrugge Train Ferry 1920s

Dads could describe and explain all the pictures: cargo being unloaded at London docks, the Harwich-Zeebrugge railway ferry with wagons on board, a big ship under construction inside a massive gantry, and boys lining a high mast at a sailors’ training school. I certainly would not have wanted to have been the baby thrown through the air to a lifeboat in a rescue at sea. My dad used to pick me up and pretend to act it out.

Harland and Wolff Shipyard 1920s Sea Training School Rescue at Sea

But that is not what used to frighten me most. I was terrified of the strange double-page cartoons inside the front and back covers. Why a factual book about ships should contain such irreverent drawings is a mystery. They are not even proper ships. They show traumatised people in canoes, punts and rowing boats on an overcrowded river, being attacked by pigs, cows and swans, knocked overboard by clumsy oarsmen or tormented by badly controlled fishing lines. They all have ugly ears, gaping mouths and grotesque faces. I could never bear to look. It is still difficult now.

As Nick Ross used to say: “Don’t have nightmares. Do sleep well.”

My Picture Book of Ships
My Picture Book of Ships

My Picture Book of Ships published by Ward Lock & Co. (c1922) is believed to be out of copyright.

Sunday 24 July 2016

Side By Side Images in Blogger

(An off-topic post)

This post shows how to change the default layout of multiple photographs or other images in Google Blogger so that they appear side by side on the page instead of sequentially underneath each other. It works for two, three or more images. It can also be used for videos.

There are different ways to do this. Some people suggest using HTML tables, others using an image editor to combine several images into one. I have used both these techniques elsewhere in my blog, but the following is simpler. As well as being simple it has the advantage of keeping the images separate so that if desired any one could be changed later.

First upload your images in the normal way by means of the Insert Image button on the toolbar. Let us assume for now that you have just two images. By default, Blogger displays them consecutively on the page, one above the other as shown below. The issue with this is that readers might have to scroll quite a long way down before they come to the next piece of text.

First Image

Second Image

To put the images side by side, go to the HTML part of the editor. At the top left click the HTML tab as indicated and you will see the underlying code for the page, like this:

Image code in Blogger

You now need to find the code for the images. The file names for mine are Image01.jpg and Image02.jpg and you can see these names each inside the middle of some complicated looking chunks of code. But in between these chunks you can see the following which begins at the end of one line and continues on two more lines (as highlighted above):

                                                                                </div>
           <br />
           <div class="separator" style="clear">; both; text-align: center;">

All you then need to do is to delete this section of code. Be aware that, depending on how you have uploaded your images, the <br /> line might appear more than once or might be completely absent. If there is more than one then delete them all. If it is absent then don't worry. Basically you should just delete everything from </div> to .... center;">.

Be very careful not to delete anything else. Do not delete anything other than </div> at the end of the first line. You might want to make a copy* of your blog post first so you can recover if you make a mistake.

After deleting the code, your images will be positioned like this:

First Image Second Image

Technically, what this achieves is to place both images inside the same <div> section of the page, rather than in separate divisions as occurs by default. 

You might have problems if your images are too wide for the page layout you are using. You will have to resize them. For example, my images are portrait orientation and set to the Blogger Medium size, but if they were in landscape orientation then they would not fit across the page. The second image would overflow to the next line so they would still appear one above the other. I could get round this by using the default Blogger Small size instead of Medium. 

You can use this technique to place three or more images side by side by deleting the two lots of intervening code. For three images I do need to resize them to Small to get them side by side across the page as shown. This works when viewed on a computer. It might not always work when viewed on smaller-screen devices such as phones and tablets.

First Image Second Image Third Image

To display a greater number of images side by side, even the default Blogger Small size might overflow to the next line. I can get round this by specifying the size of the displayed images directly, but this requires more detailed editing of the HTML code which needs greater care.

The code for each image will look something like the following. It specifies the image size, in this case height="200" and width="133".

<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd_oY1BcXPgmgjdGKXBNI6yHwCO5z509MALmHiJMlHNsns3Jq08pHsMhmAua5RRozX5xNyXcP0XQcri8-2qD7MZtZprdKn_9TZN0p3Xs98fKv4m47aB2X6SrZODj2YFFFSHmfNpcRZ-8/s200/Image01.jpg" width="133" />

If I reduce these dimensions by a scale of 0.7 so that height="140" and width="93" then it is possible to place more images across the page.

First Image Second Image Third Image Fourth Image Fifth Image

Readers can always click on the images to look at them full size.

In the above I have also removed the code style="margin-left: 1em; margin-right: 1em;" associated with each image (i.e I have had to remove five instances of this) to reduce the margin spacing and pack them closer together.

The remaining frames and shadows around the images are defined at a higher level - the css level - and will appear on all images on all posts on your blog. It is possible to remove these too, but to do so for a single image is beyond the scope of this post. However, if you want to remove the frames (but not the shadows) from all images on a single page, then insert the following code in the HTML editor at the very beginning of the blog post.

     <style type="text/css">
     .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
     .BlogList .item-thumbnail img {padding: 0; border: none; background: none;}
     </style>


Be very careful when editing HTML. It is so easy to wreck the whole page or lose it irrecoverably. When you have a lot of content it is usually best to play safe and make a backup copy.*

To see another example, I have used this technique for the cigarette card album at the end of my post Cartophilic Concerns. However, the first composite image in that post was put together using an image editor.

Finally, you can also use these techniques to place videos side by side. In the following, the video thumbnail images have been resized and placed within a single division rather than the default two. Again, this has the proviso that it works when viewed on a computer but not necessarily on phones or tablets, or in email feeds.

  

* One way to make an exact copy of a blog post is to go into the HTML code editor, place your cursor anywhere within the content, press CONTROL-A to select all the content, then CONTROL-C to take a copy. Close the window (do not save if prompted), begin a new blog post and give it a name such as 'Backup', go into the HTML editor and place your cursor in the empty window, press CONTROL-V to retrieve the copied content. Save but do not publish the post, then close the window. If you then make a mess of editing the original blog post you can always delete it and rename the Backup with the name of the original.