Posted by Roger Trias i Sanz, Panoramio Software Engineer
Today the Panoramio team launches the Panoramio Widget API, an easy way to publish photos of your favorite places right on your blog. Panoramio is a collection of user-submitted images from around the world. With the Panoramio Widget, you can share photos of places visited in your far-off travels, or of your favorite local haunts.
To add Panoramio to your blog, you’ll need to add a bit of HTML. We always recommend adding HTML via the HTML/Javascript gadget (Layout > Page Elements > Add Gadget > HTML/JavaScript), or if you want images in individual posts we recommend using the Post Editor’s Edit HTML tab (Posting > New Post > Edit HTML). (Note: we do not recommend editing the full HTML of your blog since it prevents us from updating your blog with cool new features.)
For example, the images gallery above was created by adding the following snippet of HTML to our blog post:
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=sanfrancisco&width=450&height=400&delay=6.5" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe>
Learn more about widget customizations and get the HTML by reading the Panoramio Widget API documentation. And we love feedback! Tell us how we can improve the widget by commenting in our forum, and happy blogging!
Template Designer: Color theme matching, faster in IE, variable-width support
A few quick pieces of news about the template designer and the new templates:
For Awesome Inc., Watermark, and Simple’s last variant:
These keep the minimum width at whatever you set in Adjust width but let the blog content grow to a maximum of 1600px wide, leaving 50px or so on the sides to keep from bumping up against the edges of the window. Bear in mind that many of your readers may have small screens, especially laptops, so make sure that your blog still looks nice even when the window is in the 1000–1100px range.
PSA about Edit HTML: If you’ve changed things in Layout > Edit HTML then this might not work, since your HTML template will be based on our stock version at the time you made the edits, and will not have picked up some of the recent additions. In this particular case, you can replace your template’s
If you need to add a snippet of HTML or JavaScript to your blog, prefer using an HTML/JavaScript gadget over Edit HTML. If you find instructions that say “add this right before
Finally, for those of you reading on an iPad, we’ve added a default viewport width of 1100px that will better-contain most blogs, giving a slightly nicer presentation.
Seeing any issues with the new templates? Leave a comment.
- Choosing a new background image will shift the main color theme to try to match it. You can of course tweak the color theme or specific colors afterward, but this offers a nice starting place. Works best on the Simple and Picture Window variants that have a background color in their headers.
- We’ve temporarily disabled the “retrofit” code that adds rounded corners and drop shadows on Internet Explorer. Its current implementation was causing some pretty dramatic freezes on many blogs. We’ll be bringing it back once we’re confident that its performance is acceptable, but in the meantime IE7 and 8 viewers will see unshadowed, square-cornered boxes. Nevertheless, if your IE-using readers were complaining about crashing and freezing on the new templates, those problems should now be gone.
- There’s no user interface for it, but the templates now have support for variable widths, which you can trigger by playing in Add CSS. Here’s some sample code to get started:
body {
padding-left: 50px;
padding-right: 50px;
}
html body .content-outer {
max-width: 1600px;
}For Awesome Inc., Watermark, and Simple’s last variant:
html body .region-inner {
padding-left: 50px;
padding-right: 50px;
max-width: 1600px;
}These keep the minimum width at whatever you set in Adjust width but let the blog content grow to a maximum of 1600px wide, leaving 50px or so on the sides to keep from bumping up against the edges of the window. Bear in mind that many of your readers may have small screens, especially laptops, so make sure that your blog still looks nice even when the window is in the 1000–1100px range.
PSA about Edit HTML: If you’ve changed things in Layout > Edit HTML then this might not work, since your HTML template will be based on our stock version at the time you made the edits, and will not have picked up some of the recent additions. In this particular case, you can replace your template’s
<b:template-skin> section with that of a fresh blog. That being said, I strongly encourage you to not use Edit HTML unless you reeeeeaaaaalllllyyyyy need it because it does prevent your blog from getting improvements that we make to the default versions.If you need to add a snippet of HTML or JavaScript to your blog, prefer using an HTML/JavaScript gadget over Edit HTML. If you find instructions that say “add this right before
</body>,” just put the gadget at the bottom of your footer. It’s typically close enough. (Please pass this note along if you see any tutorials that recommend using Edit HTML when an HTML/JavaScript gadget will suffice.)Finally, for those of you reading on an iPad, we’ve added a default viewport width of 1100px that will better-contain most blogs, giving a slightly nicer presentation.
Seeing any issues with the new templates? Leave a comment.
Subscribe to:
Posts (Atom)
Posts
