How to Embed Images in Between Text on Instructables

Introduction

Many users have asked me how I insert images directly within the text on my Instructables rather than having all images grouped at the top of each step. While Instructables doesn’t provide a built-in way to do this through the visual editor, it is possible using HTML.

Embedding images in between text can be especially useful in projects where step-by-step visuals improve clarity. Here are three examples where I’ve used this technique effectively:

1. Upcycled ATX - Build Your Own Lab Bench Power Supply
2. Home Automation - Smart Relay Control For Your 3D Printer Enclosure
3. Ultra-Compact LED Tester With Dual Current Modes
4. DIY Solar Powered Emergency USB Charger for Camping and Hiking

This guide will walk you through the steps to upload your images and embed them within your text using simple HTML, so you can apply this technique to your own projects!

Unlike a regular DIY project, this one doesn’t require glue guns, soldering irons, or an emergency stash of duct tape. But here’s what you do need:

1. An image – Preferably one you actually want to embed, not just a random cat meme (unless that’s your thing).
2. An Instructables project – You’ll need to have one ready to edit. Bonus points if it’s awesome.
3. The ability to copy and paste – If you can Ctrl+C and Ctrl+V, you’re already halfway there.
4. A little patience – Because HTML can be a little picky

Optional but helpful:

1. A cup of coffee ☕ – For maximum coding focus.
2. Dramatic background music – Because why not?

Now that you’re fully "supplied," let’s get to the fun part - actually embedding the images!

Before you can embed an image in your text, you need to upload it to your Instructable. Follow these steps to add your image:

Steps to Upload an Image:

1. Open Your Instructable – Navigate to your project’s editing page.
2. Click "Add Images" – This option allows you to upload pictures from your device.
3. Select Your Image File – Choose the image you want to use from your computer or mobile device.
4. Upload the Image – Wait for the upload process to complete.
5. Confirm the Image is Added – Once uploaded, the image will appear in your image library for the project which you can see at the top of the page.

Once your image is uploaded, you can proceed to the next step: embedding it in your text using HTML.

ow that your image is uploaded to your project, you can embed it within your text using HTML. This allows you to place images exactly where you want them, instead of having them grouped at the end of your Instructable.

1. Get the Image URL

1. Open the image library in your Instructable’s editor.
2. Click on the image you uploaded.
3. A larger version of the image will open - right-click on it.
4. Select "Copy Image Address" (or "Copy Image URL," depending on your browser).
5. Save this URL somewhere - you’ll need it for the next step.

2. Insert the Image Using HTML

Now, go to the text editor where you want to embed the image and switch to HTML mode.

Use the following HTML code:

Example:

Will look like this:

Here’s what the finished circuit looks like:

Now, let’s move on to the next step.

Now that you’ve embedded your images using HTML, it’s important to check that everything looks correct before publishing your Instructable.

1. Preview Your Instructable

1. Click the "Preview" button in the Instructables editor.
2. Scroll through your guide and check if the images appear in the correct places within the text.
3. Make sure the images are properly sized and aligned.

2. Fix Any Issues

If you notice any problems, here’s how to fix them:

1. Image Not Showing?
2. Double-check the image URL to make sure it was copied correctly.
3. Ensure the image was uploaded properly to your Instructable.
4. Image Too Big or Too Small?
5. Adjust the size using the max-width or width properties in the HTML code.
6. Image Not Aligned Correctly?
7. Modify the alignment using text-align: center;, float: left;, or float: right;.

3. Save and Publish

1. If everything looks good, click "Save" to store your changes.
2. Once you're ready to share your guide, click "Publish" to make it live on Instructables!

Final Thoughts

By embedding images within your text, your Instructable will be easier to follow and more visually appealing. This method allows you to place images exactly where they’re needed, improving the overall clarity of your guide.

Now, your Instructable is ready to go! 🎉