Putting pictures side-by-side in a blog post or gadget

This article shows how to put pictures side-by-side in Blogger (or any other website) using HTML, in a way that works for visitors using mobiles (smartphones and tables) as well as larger screens.

Previously I've explained how to use a table to force photos (and other things) to all show into a line, even if the user's screen is too small to display them all at once.   And I've looked at putting text and pictures side-by-side - assuming you're only working with one picture.

Tables are great if you are showing data and need rigid alignment, or if you don't mind your mobile device visitors having to either scroll, or to pinch their screen so much that they cannot read the text.

But there is a way to lay out pictures so that they display side by side if there's room on the screen, or start on a new line if there's not.

I've done this recently on a blog where really wanted to make a display for last / next week and last / next year on two different dimensions. It looks like this on a smartphone vs a tablet.   Notice that on the tablet, the two middle pictures are on the same line.

How to lay out several pictures side-by-side if there's space, or one-under-another if not

Start to prepare your post in the usual way.

Add your pictures to the post in the usual way. Ideally, put them just before or just after some marker text that you can use to help you to find the code for it in the next step.

Hover over each picture, and choose the small size (you can change this later)

Go into HTML mode.

Find the place where the pictures are.   (If you've used marker-text, just use your browser's search feature to go to it.)

Add this code, just where you want the line of images (or other items) to end up.

<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 0em; width: NN;">
IMAGE CODE FOR PICTURE</div>

That has space for three pictures - you can delete one or add more lines if you want to - just make sure that the very last one has margin-right: 0em; and the others all have margin-right: 2em;

Now, for each picture that you added,

• Find the HTML code for it.   (This post has a detailed explanation of what the HTML code for a picture)

• Delete the height = "nn"  part from it   (nnn = whatever number is there)

• In the width = "nnn" part, replace nnn with  "100%", so it says   width = "100%"
  Note:  this is saying to make the picture take up the whole width of the division you have assigned it to.   You can make it smaller than 100%.   But you want to do it put a bigger margin between the two pictures, then you can do this by increasing the value in   margin-right: 2em;      

• Move the picture code to where it says IMAGE CODE FOR PICTURE

• Decide how wide the picture should be, and change the value in Width: NN within that DIV statement to the right amount.
  You can either use pixels (eg width: 100px;), ems (eg width: 20em;) or percentages (width: 40%;)   If you use percentages, then the total amount for all the pictures should be a little less than 100%, so allow for some space between the pictures:  for example, with a 2em margin and three pictures in a row, you may need to make the total approx 90%.

Go back into Compose mode, and check that your pictures look roughly right - if necessary, you may need to adjust the picture sizes.   (See the note below under Troubleshooting for more about this.)
Delete the marker text.


Job done!   Your pictures will now display side-by-side if they can all fit into the user's screen, or one under another if not.

Troubleshooting

Getting the pictures right can be quite fiddly, so I recommend preparing the blog post in private, so you can do this in stages, and save your work regularly as you go.

Your pictures will be vertically aligned on the bottom axis, and this means that the approach will work best with pictures that are the same height.    (I'm working on another article looking at alignment issues - it's they're quite tricky.)

Post editor view vs your visitor's screen

An issue that many new bloggers struggle with is that what they can see in the post editor is not the same as what their blog-visitors will see.

The post editor screen is only a certain width.    Most times, it is smaller than the width of the main body of your blog.  So, if you have used fixed-widths (ie in pixels, or ems, not percentages), more pictures fit on the same line in your blog than in the post editor. But if a visitor is using their smartphone to read your blog (and I do a lot of my blog-reading on the phone these days) - the screen width is less than it is in the post editor.

This is why using <div> statements instead of <table>'s is a good idea.  But it does means that sometimes you will have to compromise on whether things can be put together.

Is this only for pictures?

No - you can use this technique with blocks of text, videos - in fact anything that you can put into your blog.

What about gadgets?

You can use this technique anywhere that you can edit the HTML.  So, you can put pictures in a row in your sidebar, header or footer by using a HTML-gadget.    (This post shows a handy way to get the picture code when you're making gadgets.)

Captions

I don't recommend using captions with this this technique.   Blogger shows them using tables:  they put the photo and text into a one-column-two-row table, and this makes working with the picture code a lot more difficult.   If you really want to use them, then add them after you have moved your picture code inside the <div>...</div> statements.

---

Related Articles:

Using a table to display data in your blog

Marker text helps you to find places in your blog post

Putting text and photographs side-by-side 

How to add a picture to a blog post

How to get the HTML code for a picture when you don't have an insert-picture icon on the toolbar

Introducing the "Free high-quality picture search" tool

This article introduces the Free High Quality Picture Search tool which has been added to this website.

Today I've added a new feature to Blogger-Hints-and-Tips.

The Free High Quality Image Search tool is available from the menu bar. It is a tool to help you locate free, high-quality pictures to use in your blog posts or other website projects.

It is based on a Google-custom-search engine, and a carefully selected set of websites that offer images you can use for free on your blog, even if it is "commercial" (ie you have advertising or any other way of making money from it).

The difference between this and the images that you can get from a general-purpose search using the Creative Commons image and multi-media search tool is the resolution of the images that are found and/or their photographic quality.

How to use the Free-image-search tool

• Choose it from the menu bar on this blog, or navigate directly to it at  http://blogger-hints-and-tips.blogspot.ie/p/free-image-search.html

• Type a description of the image you want to see into the search-bar.

• Press Enter

• When the results display, click the Image tab, to see what photos are available.
  (Hopefully this step is only temporary, and I can soon manage to have the search-results default to images and still use the tool in Blogger.)

• Use the numbers in the lower-left side to move to different pages in the image-search results.

• Choose an image that you would like to use.

Once you have chosen an image, you can either link directly to if (if the site allows), or download a copy, put it on your own image-service (eg Picasa-web-albums), and use it in your blog.   The latter approach is required if you want the image to be used as the thumbnail for your post.

Copyright

By definition, all images returned by the search-tool should be free-use and so not subject to any copyright rules.

However some do have attribution requirements, and you may need to use image-captions or similar to make sure that these are followed in your blog.

Related Articles:

Finding free photos for your blog, using Creative Commons

Introducing Google-custom-search engines

Summarise your blog-post with post.snippet and post.thumbnail

Copyright, Blogs and Blogging, an introduction

How to take better pictures - no matter what sort of camera you have

This weekly blogger tip is complements of Shutterfly:   tips about how to take great photos, of various types, no matter what sort of camera you use.

Why?

Why take your own pictures, when there are so many free-photo-search tools out there?

Well, if you want your blog to be copyright-legal, then you need to either find free-use photos, or make your own. Creating your own post-photos is especially useful to prove that your local blog really is local (like this) - and taking pictures that I take myself and host pictures in Picasa / Google+ Photos means that my posts always have a thumbnail image.

How?

Great tips from the pros, here: http://www.shutterfly.com/how-to-take-the-perfect-photo/

The best bit is that this isn't just a glossy, or a snobby "fancy-cameras-only" guide.    There are tips for every combination of  camera type:

• DSLR
• Smartphone
• Point and shoot

and photo type:

• Portraits
• Selfie
• Bokeh
• Macro
• Action shots
• Close up
• Wide angle
• Food
• Candid
• By the water
• Landscape
• Panorama

PS Shutterfly said

"Please share this interactive on your site or blog. Just copy and paste the code below"

So I did. But it looks like it's not working 100%. To get into their tool, click here: http://www.shutterfly.com/how-to-take-the-perfect-photo/


Happy snapping!

Use diagrams to make pictures for your blog posts

This post from the Weekly Blogging Tips series is about a cost-effective way to make pictures for blog postings.

The best blogging advice is that every post should have at least one picture:  is a stunning professional-looking shot which perfectly illustrates the point you are making perfectly.

This is a great idea if you're a professional photographer and have all time in the world, or if you can afford to purchase images which are custom made for your blog.

But most of us just aren't in that league.

Sometimes, you can use a search tool to find a re-usable photograph that you can put into your posts. (Remember to download your own copy and put it into a Google picture host, to make sure that it's accepted as the thumbnail picture for the post.)

But another option is to use a diagram - like this.

The picture above is a diagram that I used in a blog-post to emphasise that budgeting for an event is on-going through the planning phase, not a one-time job   I spent quite a while thinking about how to make the point about the original plan vs the on-going feedback loop.

Diagrams don't have to be complicated. Sometimes something as simple as showing a bullet pointed list in a different shape can be an effective way to add "visual texture" to your post and thus make it more appealing for people to read.

There are various tools that you can use to make diagrams.

• PowerPoint is fantastic especially in in Office 2010 and 20123 where it has shape placement guidelines, as well as the usual squiggly word-art, smart-shapes, gradient-fills etc. 

• Google Spreadsheets is catching up, though they've got a way to go yet, and your have to use screenshot tools to get an image (JPG, PNG or BMP) file from it. 

• And most other drawing and word-processing tools include some drawing tools too.

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).  

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget:

1  Make sure you know where the original picture is and that you have copyright permission to use it.


2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.  
(This article tells you how to find the URL of a picture that's already stored in Picasa.   To find the URL of a picture on the internet, you can often right-click on it and choose "copy image location")

3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4  In the Configure-Image box, enter the options you want for your picture.   These include:

• The title for the Gadget,
• The caption for the picture
  (the small words that go underneath it, usually explaining it, or where it came from),
• What should happen when a reader clicks the picture - put this into the Link field
• Where to find the picture
  (ie the file-location that you copied in step 2)
• Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.


6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

  

What your visitors see:

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 

<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>

---

Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's location in Pisasa-web-albums

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

Stop Google from "fixing" pictures that are loaded through Blogger

This article is about how you can stop Google from automatically "enhancing" pictures that are loaded in Blogger - even if you do not have a Google+ account.

Google has started automatically "fixing" new pictures as they are added to your blog

In May 2013 Google added the Auto-Enhance and Auto-Awesome features to Google+ Photos. These are meant to make your pictures look better, ie more like those which are taken by professional photographers.

These features are turned "on" by default. And because:

• Photos loaded using Blogger are stored in Picasa-web-albums, and
• Picasa-web-albums and as Google+ Photos actually have the same collection of photos - yes, even for accounts that do not use G+,

the effect is that auto-enhance and auto-awesome are applied to all images loaded through Blogger's post-editor, header-picture loading tool and gadget-picture loading too;.

Why is this a problem

In many cases, these features work as they are intended to, and the illustration that is shown on your blog is more attractive than the one you uploaded - it's brighter, clearer and loads faster.

But there are some situations where the effect of the auto-enhancement is not good. These include:

• Pictures with some transparency - which is auto-corrected to either light grey or black
• Pictures that are intended to be dull / dark / shady - these are automatically lightened.]
• Pictures that are loaded at a certain photo quality - are automatically downgraded to a lower quality (which is fine for viewing on screen, but not so fine if you actually want to use your blog to share high-quality photos).

Blogger users who have a non-white background, and who deliberately upload images with a transparent background so their blog background will "show through" the image have been particularly annoyed by this.   And I have been less than impressed by the faint grey "wash" added to the background of some of my diagrams - for example:

The left-hand picture was auto-enhanced, the right hand one was not

How to turn off photo auto-enhance if you use Google+

If your blog - and the account you use to post to the blog - is linked to your Google+ profile, then you can stop your photos from being changed by:

• Opening the Google Plus settings tab.
• In the "Photos" section, un-ticking "Automatically enhance new photos"

This stops the auto-enhance and auto-awesome tools being applied to any new photos that you upload from now onwards using Google+ Photos, Picasa-web-albums or any Blogger feature that lets you load a picture (the post-editor, the header widget settings, the picture gadget settings).

Alternatively, you can turn off the auto-enhance and auto-awesome changes that are made to specific pictures by by finding them in Google+ photos and un-ticking "Auto-enhance" in the "More" menu.

How to turn off photo auto-enhance if you do not use Google+

There is currently no option in Piscasa-web-albums to turn off the auto-enhance feature.
This means that if you load photos to either Blogger or Picasa-web-albums, using a Google / Blogger account that is not linked to a Google+ profile, you cannot stop auto-enhance from happening.

Some people have suggested that the way around this is to:

• Temporarily link the blog to a Google+ profile (either your own one, or one that you create just for the purpose - eg "Mr John Smith")
• Turn off the auto-enhance feature using the Google+ procedure listed above
• Fix up the damage to any pictures that you loaded through Blogger or Picasa-web-albums between mid May 2013 and today by finding them in Google+ photos and un-ticking "Auto-enhance" in the "More" menu.
• Unlink the blog from the Google+ profile.

However I do not believe that this is entirely correct:   my tests suggest that whether or not photos are auto-enhanced is controlled by the settings on the Google+ account that is used to upload the pictures, no matter whether the blog is attached to a Google+ profile or not.

(I've been testing this a lot because I have a number of blogs that are linked to Google+ Pages that are in my personal profile, but which I generally post to using a different Google account that has a more generic name like "Editor, Table Quiz Helper", and it's own separate set of Picasa-web-albums:   I want to be able to hand these accounts on to my successor when I leave the community groups that they are for.)

Previously, the main options that I identified and recommend were:

• Making a Google+ profile for the Google account that you use to upload the pictures, or

• Giving your Google+ account permission to upload pictures to the Picasa-web-albums of the Google account that owns the blog.  
  This option is tedious, but more line with Google's terms and conditions for use of Google+, while still letting a separate non-individual Blogger account own the underlying blog and supporting pictures etc.

However another option, which I now think is better, is to:

• Make a Google+ Page for the blog
• Give that Page it's own login-name and password - effectively turning it into a separate new Google account
• Give that new Google account administrator rights to the blog
• Make the setting change described above in "How to turn off photo auto-enhance if you use Google+" while you are logged in as the new Google account
• Use the new Google account to load photos to the blog:   this will mean that the photos are placed in the Google+ Photos album associated with the page, and so you can access them using either Picasa-web-albums or Google+ Photos.

Other Options

If you really don't want to use even a minimal Google-plus account, then your options are limited.

Use another picture host

You could load the pictures that you want to use in your blog to another picture-hosting service (eg Flickr) - however doing this means that you posts will not have a thumbnail image.

Minimise the damage

If you make sure that pictures which you load have a white background (or whatever colour background your blog has) instead of being transparent, then the impact of auto-enhance will be a lot less.    I have found that if you use a .png file rather than a .jpg, the background is white instead of transparent.   (This is fine for me, because I use white blog backgrounds.)

Wait for things to change

A very simple fix would be for Picasa-web-albums to use default values of "No" instead of "Yes" for auto-enhance and auto-awesome, or to set these up as settings in the PWA profile.

Another option is that Google may improve the enhancement algorithms (ie rules which control how pictures are "touched up").

Fingers crossed, one of these will happen soon.

---

Related Articles:

Giving another Google account Administrator rights to your blog

Turning a Google+ Page into a separate Google account

Post.snippet and post.thumbnail - how they are derived from your blog post

How to add a picture to your blog, using the picture gadget

Making a Google+ profile for the Google account that you use to upload the pictures,

Giving your Google+ account permission to upload pictures to the Picasa-web-albums

How to edit a picture in Picasa Web Albums or Google+ Photos

This article is about how to edit pictures in Picasa web albums, and how to use Picasa-destop to edit pictures in your Google+ Photos.

Picasa-web-albums vs Google+ Photos

Picasa-web-albums is a on-line photo storage and management tool, now owned by Google.   It is the on-line version of Picasa, a desktop-tool.   (Learn more about PWA and Picasa here.).

Google would ideally  like everyone to use Google+ Photos.

But there are many people who store pictures in albums that are not associated with their personal Google+ accounts:  these may be for businesses, schools, clubs, etc.

So it is likely PWA will continue to exist for a good while yet.   And I am sure that Google appreciate this:  they have made a number of changes to Picasa-web-albums to make it work better both with Google+ and without it.

Options for editing pictures that are are uploaded to Google

• If you have a Google+ account, then there are two ways of editing photos that you have loaded to Google (it doesn't matter whether you loaded them using Picasa-web or Google+Photos).  
  
  Both of these options are described below.   Using the Google+ editor (option 1) doesn't need any software installed on your PC.   But it's very slow to load, offers you less control, and is currently missing some key features - and it only works if you are using Chrome as your web-browser, not Firefox or Internet Explorer.

• If you don't have a Google+ account, then Google / Blogger only provides only one way to edit photos that you have loaded to it (apart from downloading the photo, editing it on your PC and re-uploading it - which changes the URL you need to use to link to the photo).   This is Option 2 below.

Option 1:   Using Google + edit a picture in Picasa-web-albums

Log in to Picasa-web-albums, using your Google+ account.  
(See here for what do to if you are automatically re-directed from PWA to Google + Photos)


Navigate to the photo that you want to edit.  
(Make sure you're looking just at that photo, not at the album it is in - this can be confusing in cases when the photo is also the album cover.)


Choose Edit in Google+ from the Actions drop-down menu.

This opens a new window or tab:


If you are not signed in with your Google + account, you will be invited to join.

If necessary, sign-up for Google+, or sign in with the correct account, and start again.


Now, you will be looking at the photo in the Google+ Photos picture view.   From here you can do simple edits:

• Crop the photo
• Tag people
• Rotate the photo

as well as using the other Google+ Photos features (share, slideshow, delete, zoom)


To do more changes, choose Edit (yes, you need to choose it a 2nd time) from the top menu.

If you are not using Google Chrome, then you will get a message saying that the Google+ photo editor only works with Chrome, and giving you a link to download it.    If necessary, switch to Chrome and start again.

Wait while the photo editing tools are loaded  (this does take a while, perhaps even a minute or two).


Once loading is finished, the current Google + Photo editor functions are available from the right-hand bar, like this:

At the moment these are:

• Tune (brightness, contrast, saturation, shadows, warmth)
• Selective Adjustment (lets you specific areas for other options to be applied to)
• Details (sharpness and structure)
• Crop and Rotate

• Black and white
• Centre focus (adjust brightness and blur around the centre)
• Drama
• Frames
• Tilt-shift
• Vintage
• Retrolux.

When you  are happy with your photo, click the Finished Editing tick box at the bottom of the right-hand bar, and the changes will be saved (this may take a few moments).


You are left in the open Google+ Photos tab or window, not returned to Picasa-web-albums.   When you go back to Picasa-web-albums and refresh the page (F5), the changes that you made in Google+ photos will be shown.

Option 2:   How to use Picasa-desktop edit a picture in Picasa-web-albums

This option only works if you have Picasa desktop software installed on your computer.


Log in to Picasa-web-albums, using your Google account.


Navigate to the photo that you want to edit.   (Make sure you're looking just at that photo, not at the album it is in - this can be confusing in cases when the photo is also the album cover.)


Choose Edit in Picasa from the Actions drop-down menu.

A pop-up window will tell you that your web browser wants to open another program (ie Picasa-desktop) to do the editing.

(The exact text is something like:   "External Protocol Request:  [your web browser] needs to launch an external application to handle picasa: links.   The link requested is ... The following application will be launched if you accept this request   c:\Program Files\Google\Picasa\Picasa3.exe ... If you did not initiate this request, it may represent an attempted attack on your system.   Unless you took an explicit action to initiate this request, you should press Do Nothing.")


Choose Launch Application.

Picasa will load on your computer, and you will be asked to confirm that you do want to edit the selected picture.   Choose Edit Image.

A copy of the picture that you want to edit is opened in the desktop-Picasa editing tools window.


From here you have access to all Picasa's standard photo editing tools (including the text tool for adding watermarks).

The photo you are working in is a copy taken from your Picasa-web-albums, it is not the same as the copy of the picture which may already be on your computer.   It is stored in a directory of your Picasa-installation called "Online Edits", not in your main My Pictures directory.   So if you choose a function like "Back to Library" you are taken to the Online Edits folder inside Picasa-desktop.


From here you can use all of Picasa-desktop's editing features, including straightening, red-eye reduction, text-editing, re-setting the neutral colour.    The only exception is the Edit in Creative Kit option:  this is still one of the options in Picasa-desktop, but if you use it, it takes a long time to load and then eventually says "Error connecting to Creative Kit... error 500" - and explains that Creative Kit has now been discontinued.


When you are finished editing, to put the edited photo back into the same Picasa-web-album that it came from, with the same file name and URL:

• Make sure that you are logged in from Picasa-desktop to the same Google account that you were using initially.   (Picasa-desktop remembers your sign-in details from the last time you used it - if it's different from what you need, just choose sign-out from the top-right corner, and then sign in to the correct account when asked.)     AND EITHER:

• Choose Share on Google+    (if you are using a Google + account)
• In the sharing-details window that opens, change the Album-name from Online Edits to  the album that the photo came from originally and choose Upload
  
  OR
• Return to the Online Edits folder / library
• Save the changes using the Save icon
• Choose Enable Synch from the Sharing drop down.
• Wait for the changed photo to upload.
  
  (I think Google have some work to do here - you can only control synching for the whole album, not for individual photos.   I expect this to be improved in the future.)

Job Done:  your Picasa-desktop-edited photo appears back in your online Picasa-web-albums with the changes that you just made, and any existing links to it (eg from your blog posts) will show the changed version of the picture.   And you can put the edited picture into your blog posts or other websites in the usual way.

---

Related Articles:

Introducing Picasa and Picasa-web-albums:   an overview

Stop automatic redirection to Google+ Photos

How to put a picture into a blog-post

Tools for applying copyright protection to your blog

What is Creative-Kit, and how to use it

This article describes Creative Kit, which was a photo-editing tool for enhancing pictures in your Picasa-web and Google+ albums.

Update:

In mid 2013, Google Plus replaced CreateKit with a new photo editor (which only works on computers running the Chrome web-browser).    Therefore it is no longer possible to use Creative Kit. 

Picasa-web-albums still has  a link to Creative Kit.   But this does not work, and PWA now has other options for editing pictures that have been uploaded to it via Blogger or otherwise.

---

A little history: Picasa, Picnik and Creative Kit

In 2002, a company called Lifescape created a program called Picasa, which people could use to manage photos on their PC.

Google purchased this in 2004 and then integrated it with web-storage, linked to a person's Google account, to make Picasa-web-albums: see Understanding Picasa and Picasa-web-albums for more information about how they work together with Blogger.

Picasa has some photo-editing functions (cropping, red-eye removal, sharpening, lightening, making collages, etc).  Useful, far easier to use than Photoshop - but without features that some people wanted. So in 2010, Google integrated a photo-editing tool from Picnik, a small company that was offering a subscription-based photo hosting and editing service.

Picnik's editor did some cooler things than Picasa, (applying visual effects, watermarks, etc).   The tool  had some serious fans, and a quirky culture which saw them show messages like "packing the lunch" "watching the flowers", "chasing butterflys" while Picnik was loading.  The type of messages that are funny the first few times, but quickly get tedious. And people using Picnik via Piscasa-web-albums often found that it was very slow.

In 2012:

• Picnik announced that they were closing down their separate photo hosting service, and moving the product to Google+.

• Google's announced that they were were closing Picnik, and using Picnik's engineers to “continue creating photo-editing magic across Google products."   (ref:  closure announcement).

Today, the original Picnik photo-hosting-and-editing service is most definitely closed.

The Picnik photo editor has been either replaced with or re-badged as "Creative Kit", and is available through Google+.  They may have intended to make it available through Picasa-web-albums too - but as I noted in previously, this feature isn't working. Possibly this is about selling additional storage space:   Picasa-web-albums are available to any Google account, while Google+ Photos is only available to named individuals.   So each person can have lots of Google / Picasa accounts (with free storage on each one), but only one account Google+ account.

How to access Creative Kit today

To start creative Kit, so you can edit a photo with it:

• Go to Google+, and log in to your Google account that has Google-Plus enabled.
• Go to your Photos page (which may be on the left-sidebar, or under the More tab on the left sidebar if your screen is small)
  

• Go into an album, and open the photo you want to edit.
• On the menu at the top of the screen, click the Edit button.

This opens the photo inside a window with photo-editing tools. The screen just looks like another set of options within Google-Plus, but actually you are now inside Creative Kit, and you can use it to edit your photo.

When you are finished editing, choose the Save button from the top-left hand side. This give you an option to apply your changes to the current file, or to save a new copy of the file.

• If you choose Replace then any places (eg blog-posts) that link to the existing photo will now link to the edited photo.

• If you choose Save a new copy then your existing file is not changed and a new copy of the file will be made in the same folder as the existing one but with a slightly different name.

If you upload pictures into your blog-posts inside Blogger, then the picture files are stored in Picasa-web-albums LINK. If you have Google+ enabled for your account, then you can access these photos directly through either Picasa-web-albums or through Google+, even if you have not linked your blog and your Google+ profile. So you can use the Creative-kit method of editing these pictures, even if you didn't load them via Google+.

What features are available in Creative Kit

At one point Picnik used a "fremium" approach: Basic features were free for everyone to use for free, while people needed to sign up and pay a subscription to use the Premium ones. This has changed, though,and now features are are all free.

At the time of writing, the features include:

Basics

• Black and White
• Bocal B&W
• Boost
• Soften

Camera

• Lomo-ish
• Holga-ish
• HRD-ish
• CinemaScope
• Orton-ish
• 1960s

Colours:

• Tint
• Vibrance
• Duo-Tone
• Heat Map 2.0
• Cross-Process

Touchup

• Blemish Fix
• Shine-be-Gone
• Airbrush
• Sunless Tan

Google Plus Exclusives

• Daguerreotype
• Reala 400
• Green Fade
• Magenta Fade
• Polaroid* Plus
• Sun Aged

Troubleshooting / Where to get help

Creative Kit uses Adobe Flash Player. If Creative Kit doesn't work inside Google+, try installing a newer version of Flash Player.

If that doesn't help, try:

• Clearing your cache

• Clearing Flash shared objects
  These are data files are created by the Creative Kit on your computer, like cookies.  To clear them, go to Abobe's Flash Player help web site.
  The Settings Manager that you see is not just an image; it's the actual Flash Player Settings Manager. Scroll through the list of sites and select www.picnik.com and www.gstatic.com.
  
  Click the Delete Website button for each, and confirm the deletion.
  
  Open the Global Storage Settings Panel. Check both of the following boxes:
  - Allow third-party Flash content to store data on your computer.
  - Store common Flash components to reduce download times.
  
  Once you've cleared your local shared objects, clear your browser cache again.
  

• Using a different browser, eg Chrome or Firefox.

• Disabling ad-blocker or flash-blocking extensions

For more assistance, there is a Creative Kit help-centre in Google:
https://plus.google.com/100432630524345907101#100432630524345907101/posts

Is Creative Kit just Picnik with a new name?

Most probably: the controls and features are very similar, and the press-releases seem to tie up. There is one screen that names both while the photo-editor is loading in Google+>Pictures.

But on the other hand there's no official confirmation either, and there are some product differences. It's possible that Google's engineers were simply inspired by the former Picnik colleagues to create similar controls, and that the underlying photo-editing tool is different. Who knows.

What we do know is that many of the much-loved Picnik features are available in Creative-Kit, provided you're willing to load your photos to a Google+ account.

TL;DR

You can edit a photo in Creative Kit by uploading it to your Google+ account, then choosing the Edit button when you are viewing it.

This may be the same Picnik photo editor that was available in Picasa-web-albums until 2012. Or it may not. Either way it lets you crop, re-colour, apply lots of filters etc for free.

Don't want to put your photos into Google+? Bad luck, there's no other way to use Creative Kit / Picnik on them at the moment. Find another on-line editor instead.

---

Related Articles:

Creative-kit works with pictures accessed through Google+, but not Picasa-web-albums

Adding a picture to a blog post

Introducing Picasa vs Picasa-web-albums

How to find free pictures for your blog, using Creative-Commons search

This article describes the Creative Commons search tool, which you can use to look for pictures, videos, music etc that are available for other people to use under a Creative Commons license.

What is Creative Commons

Previously I've described how copyright applies to bloggers, how you can protect your blog-content from copyright theives, and what you can do if they take you work anyway.

The focus in that series was looking after your own rights.

But rights always come with responsibilities. The details vary by country, but in general you cannot just copy other people's recent work without their permission - in the same way that they cannot copy yours.

Some people, though, are happy to give other people permission to use their work, often with certain conditions (eg you must including an attribution link to the creator).

Creative Commons is an easy, legal way for creators to give permission for things they create to be used by other people. It is a framework which offers "licenses" that creators (writers, artists, composers, poets, etc) can apply to their work to say that other people can make copies, and what conditions apply  (eg non-commercial use, only if you attribute me, etc)

To use it, authors, artists, etc don't need to register their work. Instead, they go to the Creative Commons website and get code / text to put with their published work to show what rules apply.

Then they can publish or upload their pictures, writing etc anywhere they want, and by linking to the licence the work is as protected as anything on the internet can be.

How to find pictures & music that are Creative Commons licensed

Creative Commons have a very useful search tool, found at http://search.creativecommons.org

This is not a search engine. Instead it is a front-end-tool that lets you choose:

• The keywords you want to search for (the search words)
• The type of license that you need (use for commercial purposes - yes or no, modify, adapt, build upon - yes/no)
• Which of the file host/search services to use (eg flickr, Google, Open clip art library - etc)

Once you have entered the search options, click on the source that you want to look in, and you are  taken to that site and shown the results of the search-query and options you entered.

For example, when I entered:

• "Christmas"
• Commercial allowed (because I wanted to make a picture to use in Blogger-HAT, where I have advertising)
• Changes allowed (because I wanted an image that I could use as the basis for another one, rather than exactly as it is now)

and clicked on Fotopedia, I was shown:

From here I could use the search tools in Fotopedia to refine my image-search and find just the right picture that I could use to represent a Christmas carol worksheet on my blog.

What sources are included

Today, the sources that are linked to from Creative Commons search are:

• Eurpoeana - media
• Flickr - pictures
• Fotopedia - pictures
• Google web - web search results
• Google images - pictures
• Jamenda - music
• Open Clip Art Library - images
• SpinXpress - media
• Wikimedia Commons - media
• YouTube - video
• Pixabay - images
• ccMixter - music
• SoundCloud - music

It wouldn't surprise me if this list grow/shrinks, as sites become more or less useful as sources of public-domain or creative-commons-licensed materials.

Things to watch out for

Creative Commons cannot guarantee that the results of searches that start in their tools will always be available for re-use: source systems may change their approach, items may be mis-tagged, content owners may change their mind, etc. So they recommend that you should always click-through to the original image in the source site, and double-check the license and attribution requirements there.

Also, some sites may allow you to link directly to the copy of the image on their site. this can be a lot quicker than making your own copy, uploading it and included it in your blog.  But doing this means that the image will not be used as the thumbnail-image for your post. And if the picture is ever removed from the original site - or its web-site address there changes - then the link in your blog will not work any more.

---

Related Articles:

Bloggers and Copyright - an overview

Protecting your blog-contents from copyright theft

Taking action when someone has used your copyright materials

Thumbnail images - a picture to summarise each post

Adding a picture to Blogger

Creative Kit photo editor works in Google+, if not in Picasa

This Quick-Tip is about using the Creative Kit, which has been giving me grief recently when I tried to use it from Picasa-web-albums.

---

Sept 2013 update:   Creative Kit has now been totally discontinued.   Use either Picasa-web-albums or the Google+ photo editor instead.

---

For ages, I've occasionally used the photo-editor in Picasa-web-albums (the online version of Picasa) to edit photos that I've already uploaded, and want to change without changing the URL.   This editor was originally Picnik - until Google sold that product and replaced it with Creative Kit a while ago.

This has sometimes been slow, which was annoying, but I put up with it because it was just so useful.

But recently it stopped working totally:  it would load, the progress-bar would get about half-way along the screen, and then hang, with a message:

We noticed Picnik is loading slowly. It’s possible waiting
may solve this issue. If you’re still having trouble:
[t1]   Click for Assistance»

Waiting never solved the problem for me (trust me, I tried), so eventually I tried the help-link, which went to this Picnik help page.

After following lots of the instructions, I finally found this helpful line in the Adope Flash Player re-installation instructions:

If you are using the Google Chrome browser, Adobe® Flash® Player is built-in but has been disabled. To enable Flash Player, follow the steps in this TechNote

Which sounded hopeful - it's only recently that I've switched to use Chrome all the time, so maybe this was the problem.   But it didn't help - despite what they said, Flash was enabled in my setup.

Eventually, it occurred to me that since I have a Google Plus profile, my albums are now accessible via the Plus interface too.   So I went there, chose Photos, found the album, opened a photo, chose creative kit ... held my breath for a few seconds ... and the editor opened up and worked nicely.

I'd still like to get this working from Picasa, because it just looks so much nicer from the small screen that I use a lot of the time.   Suggestions are very welcome!


PS   Thanks to Hardeep of Widget Craft who used the picture that I'd made as the thumbnail picture for How to Edit Your Blogger Template in one of his articles, and thus inspired me to start putting my own name onto the image files I make.

How to put pictures into unusual shapes, using PowerPoint

This article explains how to put a picture that is one shape (a "square peg") inside an image of another shape (a "round hole" - or star, elipse, octagon, etc) - using Microsoft PowerPoint.

Original title:   How to put a square peg into a round hole - in pictures

Recently, I've been using PowerPoint to make the thumbnail image for my posts. This means that I own the copyright of the pictures, so can share them without worrying about copyright issues.

One approach I've used is to find an interesting copyright-free picture that is related to the theme of the post, and then put it inside a shape that adds some visual interest or has some words along side it.  Another thing that I'm going to try is using multiple pictures in this way to make a more-interesting-than-usual collage.

How to put a picture inside a shape

NB PowerPoint commands are based on Office 2007 and 2010 - but the same principles most-likely apply in other versions where the commands may be slightly different.

1   Get your image file, and save it somewhere on your computer.

A wide range of picture-file formats are supported by PowerPoint:  in the 2007 version this includes as shown in this list:

2     In PowerPoint, make a blank side (Home > Layout > Blank)

3     Then add a shape (Insert > Shapes, click on the shape you want)

Intially, the shape with have the fill-colour and border that are the current default values. But you can change this, which is what we are going to do.


4    Right-click on the shape, and choose Format Shape from the pop-up menu

5    In the Fill tab, choose Picture or Texture Fill, then click the File button and navigate to the image file you got in step 1, and click OK.

6   Make sure that the portion of the picture that you want to show is in the picture:  to start with the shape is centered on the middle of the picture.

Change this using the Offsets to move the shape to the left or right over the image.   You can make the offsets positive or negative as shown.

You can monitor the results of different settings in PowerPoints slide thumbnails (on the left hand side, if you have it showing), or by dragging the pop-up menu to a different place in the screen so that you can see the shape itself.

Job Done - at this point, you have an image that is cropped to the shape that you chose - now you just have to put it into your blog.

Using the picture

There are (at least) three ways to get the shape-cropped-picture from PowerPoint into your blog.

I usually copy the item from PowerPoint, and then paste it into a picture editor (Paintbrush etc), manually.   This is an old-fashioned approacb - but it lets me adjust the size and position of the image, and save it (usually a .png) with a file-name that describes the image really well which is good for mating the blog come up in search results (SEO).   The this picture can be inserted into a post just like any other picture.

Another option is to choose File > Save As from Powerpoint, and choose to save the slides in an image format, eg JPEG which can also be inserted into a post in the usual way.  You are likely to be asked whether to put all the slides in one image, or to make one image per slide. Usually, it would be best to make one image per slide - but I don't use this method because the image that is created is the size of the whole slide, rather than just the pictures on it.

A third option is to display the PowerPoint file as a slideshow. This isn't something that I'd do for only one shaped image, but may be relevant in some situations.

Adjusting the size and quality of the picture

One thing that you don't have any control of inside PowerPoint is the zoom level of the inserted picture.

If you make the shape larger, it doesn't show a larger proportion of the picture. Instead, it just shows the existing picture in a larger size, as you can see in the slides shown here.

I suspect that if you want to zoom in to a particular area of the image file, the only approach is to edit the picture in another tool, crop out the bit that you do not want to show, and only keep the part that you want to include inside your shape.

However PowerPoint does have some limited control over the contrast and brightness of the picture, from the Picture tab of the Format Shape window.

Can you do this in other tools?  Why PowerPoint?

Yes, you can.

Photoshop, and similar commercial tools almost certainly have features like this, and I'm certain that GIMP (like a public-domain, less powerful version of Photoshop) and Inkscape (another public-domain image program which is more focussed on scalable-vector-graphics and objects than on pixels) also have these features.

So why use PowerPoint?   In short, its (relatively) cheap and many people have access to it already.   It's also very easy to learn, compared to the other packages, and what you learn is likely to apply to lots of tasks and not just in making pictures for your blog.

---

Related Articles:

Putting a picture into a blog-post

Post.thumbnail and post.summary - ways of describing blog posts

Showing a PowerPoint slideshow in Blogger

Copyright, blogs and Blogger/Google

Use Image Search to research picture ownership

If someone shared a cool photo with you on Facebook or Pinterst, you might want to write a blog post about it.

The post will be a lot more interesting if you can actually include the image. But you're not allowed to put copyright material onto your blog without permission - and how do you know if the picture that was shared with your is copyright or not, and who owns it.

Google Image Search may be part of the answer. Find out about it.

It won't tell you if a picture is definitely avaiable or not - but it gives you information from you can make some judgements based on when it first appeared, and what sort of web-sites it has appeared on..

Remember - although you're not allowed to publish copyright material, you will only get "caught" if a copyright owner spots something on your blog and takes action by filing a DMCA report. There are a great many items which are fine to share, even though they're not technically in the public domain, because no one is actively claiming ownership - and image search gives a way of validating ownership claims made by chancers.

Crop and re-size photos stored in PIcasa, without HTML

Some very interesting info from David of Blogger Xpertise about controlling the display of photos from Picasa by manipulating the URL.   What he's found is nothing that we couldn't do with HTML, but I have a feeling that it might point to some other possibilities using Picasa's URLs.   Ref:   http://blogxpertise.blogspot.com/2012/05/tip-automatically-cropping-square-and.html

Picnik is ending on 19 April 2012

The first list of Google application retirements for 2012 includs Picnik, a photo editing tool that was accessible via Picasa-web-albums (and perhaps from other places too) - it was an effective, though slow, way of adding a watermark to pictures.

I'm sure that PWA has a replacement tool for doing this ... don't have time to research what it is right now.

Custom Search can include images in results

Custom Search has a new option to have search results that are images.  

If you have existing Google custom search engines on your blog and want have the image search feature, you need to edit each CSE and

• turn the image-search-option on 
• generate the code
• re-install it into your blog.

I probably won't bother, as my blogs aren't image-intensive.   But I can see that this will be a big thing for some people.

Linking a picture in your post to a website

This article shows how to change a picture in your blog, so that when it is clicked, it opens another blog post, or even a totally different website.

Peviously I've described how to put a picture into a blog post.

By default, when a picture in your post is clicked, the file that is used to load the picture is opened, in a new window and at its original size.   This can encourage readers to steal photos that don't belong to them, so I've also described how to stop pictures in your blog from being "clickable".

But sometimes you may want to set a picture up so that clicking it opens up a different post, or even a whole different website.

How to change where a picture is linked to

Add the picture into your post in the usual way.

Note where in the post your picture is - you may want to put some temporary marker-text just before or after it, so make it easier to find.

Look at the HTML behind your post, by clicking the HTML button in the top-left of the editor window

Find the code for your picture.  It will look something like this:

<a href="http://4.bp.blogspot.com/tkoGx2454hA/s1600-h/Inserting+a+picture.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJebNqCKxCwl0DDKsU49a1879mxHlGifrIIxL4GFrO3lPHqrR2AVPMayf5ghituDmQRbcx5R1-x-lNO0BTIDLdmkuQkpJdsDIstlektVAGdZNT0p8BOEW99MyZBRMhF_ZdLoRaXf57Uvzh/s400/Your-picture-file-name.gif" />&nbsp;</a>

Notice the part in bold, ie the href="CONTENTS"

Replace this with the URL that you would like your readers to go to when they click on the picture.  For example, if you want them to be taken to Google to do a search, the code would look like:

<a href="www.google.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJebNqCKxCwl0DDKsU49a1879mxHlGifrIIxL4GFrO3lPHqrR2AVPMayf5ghituDmQRbcx5R1-x-lNO0BTIDLdmkuQkpJdsDIstlektVAGdZNT0p8BOEW99MyZBRMhF_ZdLoRaXf57Uvzh/s400/Your-picture-file-name.gif" />&nbsp;</a>

By default, clicking the picture will take your visitor to the link you give in the same window.   But if you would like it to open in a new window, add target="_blank" to the code too, like this:

<a href="THE URL TO GO TO" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJebNqCKxCwl0DDKsU49a1879mxHlGifrIIxL4GFrO3lPHqrR2AVPMayf5ghituDmQRbcx5R1-x-lNO0BTIDLdmkuQkpJdsDIstlektVAGdZNT0p8BOEW99MyZBRMhF_ZdLoRaXf57Uvzh/s400/Your-picture-file-name.gif" />&nbsp;</a>

Go back to Compose mode (so you don't get confused next time you edit a post)

Remove the marker text, if you used any.

Some more things to think about

Will your readers realise that they should click the picture?

Unless it says "click me", some of them won't - and if they're used to Blogger, they may just expect to see a larger version of your photo.   So it might be a good idea to add a caption, or even some instructions in your blog to tell them to click the picture.

Also while you're editing the code, you might also like to add some alt-text to your picture link too, to make your blog more friendly for readers who use screen-reading tools, and for search engines / SEO.

What you will see

At some times in the past, when you added a link a picture and then hovered over the picture in the post editor, your would see a double-row of in-post editing options:

• one row had the usual options for editing pictures (which lets you set the picture size, alignment and caption)
• one row had the usual options for editing links (with options to go-to, change and remove the link.

Today, as I'm writing this post, I can only see one row of options in hyperlinked pictures - so I need to edit the HTML again if I want to change or remove the link.

But it's quite possible that this is a mistake and that you can see the two rows of options in the old-interface editor, and that it will be added back to the new one too.    Fingers crossed.

What your readers will see

When you readers look at a picture that you have linked to somewhere, it will seem just the same as any other picture.

For example, the picture to the right of this paragraph looks just like the one one at the top of the article.  But when someone clicks on it ...

Go on, click this one yourself, to see what happens!


(Acknowledgement: public domain image from Wikimedia Commons)

---

Related Articles

Adding a picture to your blog

Making your blog friendly for search engines and screen-reader software

Stopping pictures from being able to be clicked

Aligning text and pictures in blog-posts

Integrating Picasa and Blogger