Getty Images Goes Embedded and How You Can Make it Work Better

The Verge broke the news a few days back that the Getty Images archive decided to allow embedding of their images. This is huge for libraries and bloggers because, as long as you’re not operating commercially, you can use the massive, and impressive, collection of images that Getty has to offer. Seriously, this works out to free stock images for bloggers and librarians and people like us. All you need to do is search for an image, and then click the button or icon marked as </>. That’ll give you your embed code.

For instance, see the geek-punk lovely off to the side there? That’s an embedded image. However, it’s not quite embedded the way that Getty intends as a default set up. The embed code for that image is:

<iframe src=”//embed.gettyimages.com/embed/128102640?et=2GrfSCncRUq6sgr4BRDtWQ&sig=HzGGqKRgaH_Mcvd-iiaWqJ0PC68c-yWFO39EzmjrUjo=” width=”400″ height=”671″ frameborder=”0″ scrolling=”no”></iframe>

That’s great, and indeed the opportunity to use images of this quality for free is amazing. However as bloggers and geeks, we might need to tweak that embed code to make things work better for our websites and our needs. What you see in that embed code is a call to embed the image at full size. (400 x 671 in this case.) Additionally, it’s just going to plop that image down as an image with no formatting. Depending on your blog or CMS, the formatting may be handled by the CMS theme or framework. So that may or may not be an issue. However, it’s just going to sit on your page unless you do something with it. Notice that the image over there is aligned to the left, right? It’s also smaller than 400 x 671.

All of that is due to the fact that I simply modified the embed code just a little to make it work better for me and my site. Here’s what I have:

<iframe src=”//embed.gettyimages.com/embed/128102640?et=zyoxToHbHkq_6DqaKMP1pQ&amp;sig=VSUkzvPdXytasgJos6Fmf-bDG9AbFCyx992hLPLnl5w=” height=”300” width=”179” frameborder=”0″ scrolling=”no” align=”left”></iframe>

I put the changes in bold font so you can see what I did. I simply modified the height and width, doing a little math to keep the ratios the same. I also added an alignment call to set the image on the left side. You can do the same thing for the right side. The be-headphoned lady on the right is embedded and I’ve modified the embed code in exactly the same way, setting the image size to something I like and putting it on the right hand side.

So check out the Getty Images archive and get youself some beautiful stock imagery. There’s no reason you can’t tweak the code just a little bit to make it work better for you!

2 comments

  1. Thanks. On my WordPress.org blog I’ve tried adding…

    align=”middle”

    …inside the the iframe element (both after the opening tag and before the closing tag) and it’s not working. Could that be an HTML5 issue (i.e. align=”middle” is not valid)?

    Thanks!

    1. Depending, with WordPress you might have to use a center tag before and after the iframe to put it in the middle of the page. I don’t think WordPress is fully HTML5… but I could be totally wrong about that.

Leave a Reply