Finding a picture's location (URL) in Google+ Photos or Picasa-web-albums

This article is about how to find the URL (web-address) of a picture that is stored in Picasa web albums.  It is written for Blogger users, but the same technique can be used by anyone who uses Picasa-web-albums.

Google+ Photos, Picasa-web-albums and your PC

An introduction to Picasa. describes the relationship between Picasa and Picasa-web-albums.  A key difference between is that :

• Picasa is a program, written by Google, which runs on your PC even when it's not connected to the internet, and 
• Picasa-web-albums is a Google program that you use through your web-browser and some accompanying space on the internet where your pictures can be stored.
• Google+ Photos is another Google program that you use through a web-browser (Chrome, FireFox, Internnet Explorer, Safari, etc), and a space on the space on the internet where you can keep pictures.   

Both Picasa-web-albums and Google+ Photos use the same space on the internet to store photos for each person.    This means that if there are features (eg finding the URL of an individual photo) that are not  available in one program, then you can just use the other program instead.

This means that each and every picture in your Piscasa-web-albums has a unique URL, ie web-address, where it can be found.

How to find the URL of a picture in Google+ Photos or Picasa-web-albums

• Sign in to Picasa-web-albums, using the google account that owns the album that has the picture you want.   (If you are already signed in to Blogger you may not have to log in again.).

• If you are re-directed to Google+ Photos, either follow the Return link - or use the approach described here to return to Picasa-web-albums.

• Find the album which contains the picture you want to find the web-address for.
  
  
• Click on the album to open it. 
  Note:  each album has one picture, usually the first one loaded, set as the cover.   Be careful to actually open the album, and not just work with the album cover, because the URL for it is not the same as the URL for the picture.
  
  
• Click on the picture you want:  it will open in a large "photo" view
  
  EITHER:
  
  
• Click on "Full details page" in the right-hand bar.
  This opens the picture in a new browser window or tab.
  Copy the contents of the address bar in this new window - this is the URL of the photo..
  
  OR
  
  
• Right-click on the picture once you're in "photo" view, and choose the appropriate option for your browser.   In the current versions, this is:
  
  Chrome: Copy image URL
  Safari: Copy image address
  Internet Explorer: Properties > Copy the URL address shown
  Firefox: Copy image location
  

Job done!   
The web-address of the photo is now in your computer's clipboard, and can be pasted into other places where you might need to use the photo's URL, eg in adding a photo to a post, or as a gadget.

---

Related Articles

Showing a picture as a gadget in Blogger

How to put a photo into a blog-post

Understanding Google accounts

An introduction to Picasa

How to find a gadget in the Add a Gadget list - quickly

This article explains a quick way to find the widget that you are looking for in the list that Blogger displays when you use the Add a Gadget tool.

When you start to add a gadget to your blog, Blogger opens a new window listing all the existing page-elements that are available (in two tabs) and allowing you to upload a widget of your own (in a third tab.)

Currently, the first tab (called Basics) has 28 gadgets listed, while the second one (called More gadgets) has 899, displayed in pages of 30.

There is a search-for-gadgets feature available on the second tab - but it doesn't return gadgets that are listed on the first tab.   And even when it did, I didn't recommend it, because sometimes 3rd party gadgets with similar names were listed before the official widgets developed by Blogger.

So, to find a gadget that's listed in the Basics tab, you have to scroll down the list until you see the gadget you want.   However there are some problems with this.

• Given that there are 28 gadgets listed, but only about 4 shown at each click (may be different if you have a larger screen), this can be a lot of clicks.
• It's very easy to miss the gadget you want, and keep clicking through to the bottom instead.

But there is a very simple way to go directly to the gadget you want, provided you know what it is called, or some words that are shown in the description of that gadget and no other.

How to navigate directly to your desired gadget

Choose Add a gadget

When the new window has opened, use your browser's "find" command.

• In Chrome and Firefox, this is ctrl /f ,   ie hold down the Control key while pressing the "f" key once.

Type in a  few letters of the name (or description) of the gadget you want.  

Note:  these can be any letter, they don't have to be at the start.  But they must appear together.

Usually, as soon as you start typing, your web-browser will start scrolling down to the first place in the screen where the letters you type appear.   So if you choose the gadget details you type carefully, you should end up scrolled down to the gadget you want very quickly indeed.

The scroll bar at the side shows how far down the window you have come, and also if there are more cases of those letters further down the page.

And once you are at the gadget you want, you can just click the name or the blue plus-sign on the right side to open the gadget configuration page.

To sum up:

Use your browser's Find tool to go straight to what your're looking for in the Add a Gadget list. 
[tweet this]

What to search for to find popular gadgets

The words that I search for most often when I'm adding gadgets are:

• HTM - for the HTML/Javsascript gadget
• Ads - for the Adsense gadget
• Link L - for the linked-list gadget.

What about you - what gadgets do you most frequently add to your blogs?

---

Related Articles:

Backing up your gadget settings

How to add a gadget to your blog

Where to find the HTML code for popular Blogger widgets

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