How to Embed Photos in an Instructable
Recently, I've been trying out making Instructables with photo-only instructions (see my Rosette and Mesh Decolletage Instructables). For simple Instructables, I think it's a format that looks good, and I like the idea of wordless instructions.

If you'd like to try this yourself, here's a quick tutorial on embedding photos into your text space. It's not just button clicking; you'll be learning a little bit of basic HTML. But if you've never done any coding before, don't be afraid! It's not that hard, and you only need to learn a tiny bit to embed a photo.

And here it is:
How to Embed Photos in an Instructable


Except you'll replace photourl.jpg with your photo's URL.
But what is your photo's URL? Let's take a step back.

For this Instructable, I'm going to be working with this photo of a robot t-shirt:
How to Embed Photos in an Instructable

You should follow along in a different window and try all of the stuff I show you.


Step 1: Upload the Photo
Upload the photo to Instructables normally. You don't even have to attach it to the Instructable, just get it onto the site. (It can actually be a picture from anywhere on the internet, but I'm just going to work from inside the Instructables site.)
You should upload a pretty big photo so that you'll be able to see all of the options.

Step 2: Copy the image URL
Right click on the thumbnail of the image and select "Copy Image URL".
How to Embed Photos in an Instructable



Step 3: Playing around with the URL
We're going to take that URL and play with it a little bit, so go ahead and paste that URL string into a new tab of your browser. Instructables has a few different versions of your photo.
Because we copied from the thumbnail, the URL string should currently end with ".THUMB.jpg". So the image is small, like this:
How to Embed Photos in an Instructable


Now change .THUMB.jpg to .TINY.jpg to make it even smaller.
How to Embed Photos in an Instructable


Try SQUARE, SQUARE2, and SQUARE3:
How to Embed Photos in an Instructable
How to Embed Photos in an Instructable
How to Embed Photos in an Instructable


Try MEDIUM.
How to Embed Photos in an Instructable


Try LARGE.
How to Embed Photos in an Instructable


So you see that you have a lot of default options for the size, and even the shape, of your photo.

Step 4: Inserting into the source code
How to Embed Photos in an Instructable
Back in your Instructable, click on the Source button. Now you're seeing the HTML that your Instructable is using. We're just going to be messing with images, so you can ignore most of it. Navigate to the place where you want to put your photo, and use that code we learned earlier:
How to Embed Photos in an Instructable


But instead of photourl.jpg, put in your own photo URL. For example, this is
How to Embed Photos in an Instructable

How to Embed Photos in an Instructable



Step 5: Width and height
You don't have to be limited by the default sizes that we explored in Step 3. You can also specify a specific width or height (or both!) in the HTML. It's easy! Try:

How to Embed Photos in an Instructable

How to Embed Photos in an Instructable


How to Embed Photos in an Instructable

How to Embed Photos in an Instructable


How to Embed Photos in an Instructable
OR
How to Embed Photos in an Instructable

How to Embed Photos in an Instructable

But when you constrain both width and height, you can distort your image.

The width of an Instructable is usually 650px. You should set your image URL to LARGE in most cases so that you have high resolution. Otherwise it might look like this:
How to Embed Photos in an Instructable



And that's all you need to know!
To embed an image here, anyway. But if you enjoyed this small taste of power from coding, you should learn more! It comes in handy sometimes. Probably the easiest way to learn is codeacademy.org. Click the link! Try it! Just stop if you get bored.
 
 

Tag cloud

make build easy simple arduino making homemade solar laser printed portable cheap mini building custom cardboard wooden create super lego turn paracord chocolate your paper light intel