How do you embed images?

Basically, our sites allow us to store 500mb of content. It costs bandwidth and money for them to host stuff, so they limit it.

So we’ll take it step by step.

From Flickr

From a Website

FROM FLICKR

FIND A PHOTO

First, a photo. Easy enough. Let’s check out Creative Commons photos on Flickr. (www.flickr.com/creativecommons).

You’ll see on the side, there’s a description of which creative commons things mean what. These ones are all open for public consumption, so as a general rule, as long as you link back to the original author, they’re cool with it.

I chose a duck photo.

BUT HOW

Down in the bottom right, under the photo, you’ll see a few wacky buttons.

This one’s the important one.

All you need to do is decide what size you want (it usually defaults to ‘medium’), and then click on the code. All it basically says is:

<a href=”IMAGEPAGELINK”><img src=”IMAGELINK”></a>

The first bit in these tags: <a href=”  “> links your image back to the Flickr page. The middle part, <img src=”   “>, basically goes to the image file on the internet. The last bit, </a>, closes off the link.

Not strictly necessary information, but there you go anyway.

Grab that code and head to your blog. Make sure you’re in the HTML view, NOT visual view!

And paste that code in.

Waddup, duck?

BUT HOW ABOUT STRAIGHT UP PHOTOS FROM SOMEONE ELSE’S BLOG?

Let’s take a photo from this site: Pop Culture-y.

I find a photo I want, and then right click and select “Open Image In New Tab”.

If you check on the URL area, you’ll see the image’s URL.

You know it’s an image, not a website page, because the end bit reads “.jpg”, an image file ending.

Now, some coding.

The code for adding an image (and make sure you’re in the HTML view again) is:

<img src=”IMAGEURL.jpg”>

or for this particular image:

<img src=”http://popculture-y.com/wp-content/uploads/2013/08/Malcolm-Tucker-F-K-peter-capaldi-17382910-1702-2560-680×1024.jpg”>

Done.