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

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

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 (which seems like a cut-down version) 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.

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.

Backing up picture files from Picasa-web-albums

Google Takeout (called Takeaway in some places) lets you backup your Picasa-web-albums, Gmail contacts, Circles, +1s and lots of other things, into one single zip file, which you can then store in a safe, off-line place.

It might be a way to move the photos in your blog to someone else if you're transferring owership of a blog.

1. back them up
2. extract them
3. sent the pictures to the other person
4. they upload them, and re-establish the links from the blog to the new location.

Still dreadfully tedious, but better than nothing.

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 Picture gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use a Picture gadget.   This is a tool that Blogger provides to make is easy to add a picture that shows up an all pages 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 almost anywhere.

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 Picture gadget from the list of options.

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

Putting a slideshow from Picasa into your blog

This article is about how to put a Picasa slideshow into your blog, using Picasa's slideshow tool.   

It also looks at the security issues that may be involved in doing this, and suggests some ways around these.

Picasa, Albums and Slideshows:

Previously I've explained what Picasa is and how it is used by Blogger as the default place to store uploaded pictures.

You can also use Picasa in more complicated ways.  You can put a set of pictures in a separate "album" (Picasa's word for a user-defined group of photos), and it will give you the HTML code to use to show these photos in your blog (or any other website).  


There are two ways of doing this:

• Link to the album:  clicking on the link takes your visitor away from your website and into Picasa-web-albums, where they can use the PWA tools to look through the pictures
• Link to a slideshow:   this scrolls through the photos that are in the album at the time, right inside your website.  Here's an example of a slideshow:
  
  

This article is a step-by-step guide to the second option, is showing a Picasa-web-album in your Blogger as a slideshow.    A similar approach will work for other websites, thought the details will vary slightly.


How to insert your slideshow:

Go to Picasa Web Albums (http://picasaweb.google.com/home), and log in with the Google account that owns (or you want to own) the album.

1. Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
   (and if you haven't, go back to Picasa and upload it now)
2. Choose an album by clicking on it.
   The album view opens, showing you a thumbnail of all the photos in it on the left of the screen. On the right of the screen, there is a sidebar of useful tools.
3. Under the Edit drop-down (the one in the album, not the edit menu in the browser), check that Visibility is set to either "Anyone with the Link" or "Public on the web"
4. Click on "Link to this Album"  (currently it's in a small font, 3/4 of the way down the right-hand sidebar - this may change if Picasa changes its interface)
   
5. Click on "Embed Slideshow"  (currently this shows up underneath "Link ... " - and only AFTER you've clicked link...)
   This opens a new dialog box, over the top of your current browser window.
   
   
   
   
   
   
6. Fill in the details you want
   (slideshow size, whether or not to show captions and to autoplay the slides, etc)
7. Copy the HTML from the box at the bottom of the left hand-side (the one labelled "Copy and paste ..."
8. Go to Blogger and log in with a Google account that has rights to edit the the blog - note that this doesn't need to be the same account that owns the Picasa album.
9. You can put the code that you copied into your blog in the same way you would adding any other 3rd party HTML to it.

What you see in the Post Editor:

If you put the slideshow into a blog-post, the the way that the post-editor currently works with code means that the slideshow is not visible while you are editing the post.   This means it's easy to accidentally over-write or delete the code.

One way around this is to put some "marker text" before and after it.

For example, I've put in <hr /> and <blockquote> </blockqoute> statements before and after the code just underneath this paragraph.   While I'm in the editor, all I can see is a pair of parallel lines, with nothing between them.   But (because you're visiting the blog after it's published) you can see a slideshow in between.

---

---

This makes the code look like:

<blockquote>
<hr />
<embed flashvars="host=picasaweb.google.com&amp;hl=en_US&amp;feat=flashalbum&amp;RGB=0x000000&amp;feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F105223767362417288786%2Falbumid%2F5439615839989953921%3Falt%3Drss%26kind%3Dphoto%26authkey%3DGv1sRgCK7yg5XUpNHZtAE%26hl%3Den_US" height="192" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" type="application/x-shockwave-flash" width="288"></embed>
<br />
<hr />
</blockquote>


What your visitors see - and can access:

The steps above puts a slideshow of the photos in the album at the current time into your blog post.

You can use the examples above to get an idea of how these slideshows work:  they have next, play / pause, and previous buttons, and you can toggle captions on/off.   The top example has auto-play ON, while the second one has it OFF.

On important thing to note:   when your visitors click on the slideshow itself (anywhere but on previous / play / next buttons), they are taken to the place in Picasa-web-albums where the album is.

From here, they can get to ANY other albums owned by the same Google account that are either Public or Visible to Anyone With the Link.

This may or may not be a problem for you - but it's something that you should be aware of.  It certainly was a problem for me initially, and I had to go and get a slideshow in a Google account with no personal pictures to make the examples in this post.   

If you are not willing to live with this level of security, then I suspect (am yet to confirm) that using the RSS feed provided by Picasa with Blogger's own slideshow gadget may be a better approach.   This will only work in places where you can put a gadget - although it may be possible to use a 3rd party service that converts a feed into Javascript to make code that can be put inside a post.    Or totally different solution is to put your pictures into a PowerPoint slideshow and display it in your blog.

---

Related Articles: 



Picasa & Blogger - Part 1, What is Picasa?

Picasa & Blogger - Part 2, Options for linking Picasa into your Blog

Showing a PowerPoint presentation as a slideshow in your blog

Putting 3rd party HTML into your blog

Hosting pictures outside of Google/Picasa

This article is about how to use pictures stored outside of Picasa-web-albums in your blog. It also looks at the risks and issues you might face if you do this

Where does Blogger usually store pictures

When you put a picture into a blog post, it is usually stored in Picasa-web-albums, the on-line part of Google's photo management tools.

For example, the picture at the start of this article was uploaded from my desktop, and so is stored in a folder in the Picasa-web-albums associated with my Google account.

I can see it here in the album:

Alternatives to Picasa-web-albums:

There are many other on-line photo storage and sharing options, eg Photobucket, flickr - and you can even use Google Docs which can now store files of all types.

For example, this photo (creative commons licensed, with no known copyright restrictions) is stored in flickr

To insert it into the post, I:

• Copied the URL of the picture in flickr

• Used the standard Picture icon on Post Editor toolbar in Blogger, and chose the "from URL" option, and pasted in the URL

But because the photo is hosted elsewhere (in this case in flickR), it is not put into Picasa-web-albums.

Instead the code for it points to the location in flickR where it's found:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://farm4.static.flickr.com/3309/3291223203_acbcce9483_m.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://farm4.static.flickr.com/3309/3291223203_acbcce9483_m.jpg" /></a></div>

Hosting photographs elsewhere is one way to work around the size restrictions which Google has placed on Picasa-web-albums accounts.   (Another is to link you blog to your Google + account).

You do need to make sure that the security options for the account and/or album that they're placed are set up so that at least anyone with the link is able to read the files.

Be aware that a photo that is stored outside of Picasa-web-albums cannot be used as the thumbnail for your post:   if all the illustrations in a post are stored elsewhere, then the post simply will not have a thumbnail.


Risks and Issues:

Disappearing Photos:
When you don't control the files that pictures are in, there is a risk that the pictures might "disappear" if whoever is hosting them (flickR in the above example) decides to move them or even just change the structure of their URLs.

There is, of course, the same risk with PWA, but since you need to be signed in to put a file into Picasa, Google knows that it's yours and can email you and let you know about upcoming changes.  flickR, on the other hand, has no record my setting up an URL to the photo, so cannot give me any warning.

Integration:
Picasa/Google have various tools for showing slideshows in blogs.  The specific features that any photo-sharing tool has change from time to time, but by using the tools from Google there is more chance that the will definitely work well with other Google tools, like Blogger.

---

Related Articles: 


Applying copyright protection to your blog

Putting HTML from a 3rd party into your blog

Putting a slideshow into a Blogger post

Picasa - a basic introduction

Understanding post.thumbnail, the picture used to summarise a post

Creating a button that links to your blog.

What is Picasa - a very basic introduction

Picasa is Google's tool for managing image files.   This basic explanation of how it works is especially useful for new Blogger users who need to understand where pictures that they load to their blog are kept.
 

What is Picasa

Picasa is Google's tool for that individual people can use to manage and share image files (especially photographs) that they own or have the right to make copies of.

Picasa has three parts:

• An application program ("Picasa") that you download, install and run on your PC.  It works with the files store on your computer.
• Picasa-web-albums (PWA):  a place on the internet where you can store and share photos
• Another application program (Picasa-web) that lets you manage photos stores in Picasa-web-albums.   This software (like Blogger) runs totally inside your web-browser, and you don't ever have to download or install it.

The Picasa application program has an Upload button which lets you transfer copies of pictures from your PC to your Picasa-web-albums.

Your Picasa-web-albums are owned by your Google account - the same Google account that you use for Blogger, and various other Google tools.   


Why Use Picasa-web-alblums:

It's how Blogger works
When you write a post in Blogger, it looks like you can upload pictures - and before 2006, this was how things worked.

But when Google took over Blogger, they saw that it was silly for them to have two different places for storing pictures.   So they set things up so that pictures uploaded in Blogger are stored in a Picasa-web-album.

And they added some features in Blogger so that as well as uploading pictures from your PC, can you also just choose ones that are already in Picasa-web-albums, and use them in your blog without making a second copy.

Photo sharing
Even people who aren't writing blogs want to share photographs with their friends.   Doing this by email gets cumbersome if you have a lot of photos, and can use a lot of space.  A better alternative is to put the photographs in a place on the internet, set up the security so that you control who can see them, and then tell your friends where to find them.

Many on-line services for doing this have been developed - Picasa is Google's version.  (Google Inc, the company, not google search.)


On-line backup:
Keeping a copy of your photos on-line is one way to ensure you have access to them even if something goes wrong with your PC (eg it crashes or is stolen).    Picasa is an option for this, but you should be aware that the copy stored in Picasa-web-albums may not have as much file-size as the original picture if it was uploaded through Blogger.

Personally, I always upload pictures through PWA, and then use links to them from Blogger, so that I can resolution of the pictures that are in my albums.


Next:  

How Picasa Manages Pictures: Understanding Picasa, Picasa-web-albums and Blogger in-depth

---

Related Articles



Understanding Google accounts

Blogs, Blogger and Bloggers; Google Inc and google search, etc - some basic phrases

Getting started with Blogger - first things first

Options for linking photos in Picasa into your blog

Finding a picture's URL in Picasa-web-albums

Building Image-only ads from Amazon

When Blogger users put an image-only link from Amazon into their blog, there is often a problem with the image not being found.  It applies to code generated at Amazon, not to ads that are made using the Amazon widgets in Blogger.  

Overview:

Previously, I explained how to build customised Amazon product links for use in Blogger. You may need to do this if your readers are mainly not from the USA, or if you need to change the size of the advertisements.

One of the options for links is Image-only:   the link shows a picture of the item, which your readers can click.  When they click on the picture, they are taken to Amazon to buy the product.

This article explains how to fix the problem of the image not actually showing up on the published blog page, even though no error is reported and Amazon's reports say that the ad displayed.


What is causing the picture to not display?

The procedure for building an image-only link has a step:

"Save this image to your server, then cut and paste the HTML code in the lower left textbox into your web page."

Unfortunately, the HTML that Amazon generates assumes that you will save the image onto the same directory in the server that the web-page is stored on.   This is fine for many web-site builders, but doesn't work for Blogger users who store their pictures in Picasa by default, or on other image-hosting services.


How to fix it:

Description:
You can fix the problem by uploading the image file to Picasa, or any other file host service, and altering the HTML to use this uploaded file.


Follow these steps:

1. Copy the HTML provided by Amazon's link-builder, and paste it into wherever you want it in your blog.
2. Copy the location of the image that Amazon is telling you to put onto your server.
3. In another window, log on to Picasa Web Albums using the same Google account that owns your blog
4. Choose Upload
5. Choose an album to put the image into
   (You may want to keep a separate folder for all Amazon Associates products, or you may want some other arrangement eg one folder per page).
6. Use the From an URL tab, and enter the location that Amazon told you for the source of the image (copied in step 2)
7. Press Upload, and wait while the picture is loaded.
8. When the picture has loaded, Picasa-web-album shows the album summary page.  Click on the picture you just loaded.
9. Click Link to this Photo (on the right hand bar) to get the link value (ie the URL or hyperlink) for the photo, and copy it.
10. Go back to the place in Blogger where you put the HTLM provided by Amazon in Step 1 and edit it.
11. The HTML will have this structure:
    (I've put in some link breaks and bolding to make it easier to read - you can do the same, provided the Post Options - Ignore new lines option is selected ):
    
    <a
    href="http://www.amazon.com/gp/product/0975841963?ie=UTF8&tag=bloggerhintsa-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0975841963">
    <img border="0"
      src="41FxC9u%2B%2BVL._SL160_.jpg">
    </a>
    <img
       src="http://www.assoc-amazon.com/e/ir?t=YOUR-AMAZON-ID=as2&o=1&a=0975841963" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
12. Find where it says SRC "blah-blah-blah.jpg"  (ie the piece in bold)
13. Select everything inside the quote marks, and replace it with the link value for the picture that you loaded into Picasa, so it becomes something like:
    
    <a
    href="http://www.amazon.com/gp/product/0975841963?ie=UTF8&tag=bloggerhintsa-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0975841963">
    <img border="0"
      src="http://picasaweb.google.com/YOUR-GOOGLE-ACCOUNT/YOUR-ALBUM-NAME?authkey=Gv1sRgCOGyrv2X0-OvmAE#5430348305093079170">
    </a>
    <img src="http://www.assoc-amazon.com/e/ir?t=YOUR-AMAZON-ID=as2&o=1&a=0975841963" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
14. Save the change (ie publish the post, or save the gadget etc).

Here are some examples of working image links:

---

                       

---

Related Articles: 



How to build customised Amazon product links for use in Blogger

Putting third-party HTML into your blog

Hosting pictures outside Picasa

Finding a Picture's URL in Picasa-web-albums

Understanding Google accounts

Picasa and Picasa-web-albums, and overview.

Inserting an animated picture into your blog

This article has detailed steps for inserting an animated picture into your blogspot blog.  

Previously I've given detailed instructions for inserting a picture into a Blogger post and inserting a picture into your blog's sidebar.

However some people have reported that if they upload an animated picture from their PC, these instructions don't work correctly:  the picture is uploaded but animation is missing.

The work-around seems to be to upload the picture to a hosting site (like Picasa) first - independently of blogger.  Then note the URL of the uploaded file, and enter it as:

• The web-address (URL) during the picture upload process, or

• The URL when you use the Picture gadget.

You can then manipulate the uploaded picture as per any other picture (ie for gadgets, drag the gadget around in the Layout / Page Elements view, or drag the picture or manually relocate the HTML for images that are inside posts.

---

Related Articles: 



Integrating Picasa and Blogger

Finding the URL of a picture that's stored in-Picasa web-albums

Inserting a picture into a blogger post

Inserting a picture as a gadget