Embedding photos and video

Every post needs at least one photo. Many sites also demand video on all or most posts. You might have to compile a gallery or slideshow using lots of photos.

Wales Online: 30 pictures that will make you want to drop what you're doing and head straight to Pembrokeshire

Slideshows are often used to increase page views as each photo counts

Sites use these to bump up clicks and traffic stats, as every viewed photo is recorded as the user viewing an additional page. Don’t be surprised if you are asked to create a gallery of 30 or so photos.

You can upload your own  but you will first have to resize them so you do not post large files that would be slow to load. You might also have to create your own image macro (pictures with added text) or animated gif.

You can also use your own, or other people’s, content already uploaded online. Rather than link to external content it is often better to embed it in your story (post) – individual Tweets; Facebook status updates (public ones); videos from YouTube, Vimeo or Vine; photos from Flickr or Instagram, audio from Audioboom and Soundcloud and so on.

Copy and paste

Most social media sites offer the embed code as option, so all you need to do is copy and paste it. You usually need to paste the embed code into the html element of your content management system (CMS). This may be called “text”, “source” or “html”.

Many social media sites use three little horizontal dots (or circles) to indicate where to click to get the embed code (Twitter, Instagram, for example) but others use an arrow, the word “share” or, on mobile, a square with an arrow breaking out of the top.

Whichever, you may then have some options, such as to include captions, but all you need to do is copy the given code and paste it into the html tab of your CMS. When you click back on the “visual” tab you will often see a plain box or some disjointed text. But this will still publish correctly.

Windows users use Ctrl+C to copy and Ctrl+V to paste
Mac users use cmd(apple)+C to copy and cmd(apple)+V to paste

Instagram example

Three dots (circles) marked. Click on that and you get the embed code


Instagram share option, bottom right – three dots (circles) marked by red arrow

Choose to display the caption or not, then copy the given code

embed window

Instagram embed function: choose caption or not then copy code

Pasted in the main “visual” box (or tab), you will simply get the code showing as text:

<blockquote class=”instagram-media” data-instgrm-captioned data-instgrm-version=”6″ style=” background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”> <div style=” background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;”> <div style=” background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;”></div></div> <p style=” margin:8px 0 0 0; padding:0 4px;”> <a href=”https://www.instagram.com/p/BAFnXQdJU9G/” style=” color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;” target=”_blank”>Given a fine bottle of Rioja, we had to eat Spanish. Patatas bravas, spinach &amp; chickpeas in cumin, green beans in tomato, garlic mushrooms, spicy prawns, aioli, garlicky tomato, chorizo, manchego, bread and olives.</a></p> <p style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;”>A photo posted by Chris Wheal (@whealie) on <time style=” font-family:Arial,sans-serif; font-size:14px; line-height:17px;” datetime=”2016-01-03T18:56:25+00:00″>Jan 3, 2016 at 10:56am PST</time></p></div></blockquote>

<script async defer src=”//platform.instagram.com/en_US/embeds.js”></script>

But pasted into the html (source or text) box you will display the embedded image:

Note: With WordPress.com blogs, you just need to paste the Instagram photo’s URL into the main content, not the html, and it will display. Many others, such as Audioboom, also provide specific code for WordPress.com blogs.


Specific code for WordPress.com blogs on Audioboom

A word on copyright

Just because a photo is online does not mean it is free from copyright and can be used willy-nilly. You need to establish that copyright has expired or that the necessary licence (license in US spelling) permits your usage.

One popular online licence is Creative Commons, but there are variations of this. You might be permitted to use it commercially or not, to edit it or not, and so on. Using photo sites such as Flickr, or Google images, you can set your search only to find images with licences permitting usage and modification.

Google image search

Set the licence in Google images to only show images you can use freely

But sometimes the image you want will have restrictions. On an image sharing site, if the photo’s copyright owner has not disabled embedding, you can still embed the photo, but you cannot download and edit (crop) it.

But often, if you contact the copyright owner and ask for permission to publish, explaining what it is for, they will agree. The photo below is a cropped version of a photo with all rights reserved. The copyright owner, Tony Worrall, gave me permission to use it, cropped, when I asked.

Peeping Tom

Peeping Tom effigy in Coventry, Flickr: Tony Worrall Foto (with kind permission)

Make sure you correctly credit images and set the image you use to link back to the original source. There will be specific credit rules for images bought from commercial photo libraries too.

Wikipedia is a useful source for images that can be used. Clicking an image used in Wikipedia allows you to go to the source and read the licence and details of the photos. You can often download a larger format of the photo and then edit it yourself, re-posting with the appropriate picture credit.


Whealie is the trademarked nickname of award-winning freelance journalist Chris Wheal. Follow @whealie on Twitter twitter.com/whealie Wheal's Business website is whealassociates.com He sometimes blogs at chriswheal.com He's on Facebook: www.facebook.com/chris.wheal And LinkedIn: linkedin.com/in/chriswheal Flickr: flickr.com/photos/whealie Instagram: instagram.com/whealie/ YouTube: youtube.com/user/sonofwhealie Vimeo: vimeo.com/whealie

Leave a Reply

Your email address will not be published. Required fields are marked *