Adding Images to Your Slideshow

Before You Begin

You'll need:

• Your existing HTML slideshow file
• A Claude.ai account
• Either:
  • Images you already have saved on your computer, OR
  • An idea of what images you need (Claude can help you find freely-usable ones)
• A place on your computer to create a folder for your slideshow and its images

This activity teaches you how files work together—an important skill for building more complex tools.

The Prompt

Copy everything in the box below and paste it into Claude. Then upload your slideshow when prompted.

I'm a teacher learning to work with HTML slideshows. I want to add images to make my slides more engaging.

**My situation:**
- I have an existing HTML slideshow file I'll upload
- I might have my own images, or I might need help finding freely-usable ones
- I need to understand how to organize files so the images actually appear
- I'm still learning, so please explain things as we go

**Please help me by:**

1. **First, ask me to upload my existing slideshow.** Wait for me to share the file before doing anything else.

2. **After I upload, ask me about images:**
   - Do I already have images I want to use, or do I need help finding some?
   - Which slides need images?
   - What kind of images am I looking for? (diagrams, photos, illustrations, etc.)

   Ask these one at a time. Wait for my answer before asking the next question.

3. **Explain the folder structure I'll need:**
   Show me how to organize my files like this:
   ```
   my_slideshow/
   ├── slideshow.html
   └── images/
       ├── image1.jpg
       └── image2.jpg
   ```
   Explain why this matters and walk me through creating the folders on my computer.

4. **If I need help finding images, create an Image Guide:**
   For each image I need, tell me:
   - Which slide it's for
   - What to search for (suggested search terms)
   - Where to find it (Wikimedia Commons, Unsplash, Pexels, or other free sources)
   - Direct link if possible
   - What to name the file when I download it
   - Brief download instructions

   Make this a checklist I can work through.

5. **Update my HTML with the image tags:**
   - Add `` tags pointing to the `images/` folder
   - Add any CSS needed for sizing and positioning
   - Show me the updated slideshow in Claude's Artifact feature

6. **Teach me how the `` tag works:**
   - Explain what `src="images/filename.jpg"` means
   - Show me that the path is relative to where the HTML file is saved
   - Point out the pattern so I can add more images myself later

7. **Walk me through the complete setup:**
   - Step-by-step instructions for creating the folder
   - How to move/save my HTML file into the folder
   - How to download and name each image
   - How to test that everything works

**Important:** I want to understand file organization, not just get working code. This is a skill I'll use for every project going forward. Check in with me at each step.

I'm ready to start! Let me upload my slideshow.

What to Expect

After you paste this prompt, Claude will:

1. Ask for your slideshow — Upload the HTML file you want to add images to
2. Ask about your images — Whether you have them or need help finding them
3. Explain folder organization — How to set up your files so images work
4. Provide an Image Guide — If needed, a checklist for finding and downloading images
5. Update your HTML — Add the image tags and any needed styling
6. Teach you the pattern — So you can add more images on your own
7. Walk you through setup — Step-by-step instructions for your computer

Tip: When downloading images, right-click and choose "Save image as..." Then name the file exactly what Claude tells you—slide1_diagram.jpg not download (1).jpg.

Understanding File Paths

This is the key concept for this activity:

• When your HTML says src="images/photo.jpg", the browser looks for a folder called images right next to your HTML file
• Inside that folder, it looks for photo.jpg
• If the folder doesn't exist, or the file is named differently, the image won't appear
• The path is "relative"—it's directions from where your HTML file is, not the full location on your computer

Once you understand this, you can add images to any HTML project.

Tips for Success

• Name files simply. Use lowercase letters, no spaces. vocabulary_chart.png is better than Vocabulary Chart (Final).png
• Keep images in one place. All images for a slideshow go in that slideshow's images folder.
• Test after each image. Add one image, open the file in your browser, confirm it works. Then add the next.
• Use freely-licensed images. Wikimedia Commons, Unsplash, and Pexels offer images you can use legally in educational materials.

If Something Goes Wrong

Image problems usually come from file paths. Tell Claude:

• "The image shows as a broken icon"
• "I put the image in the folder but it's not showing up"
• "I'm not sure if I named the file correctly"
• "The image is too big / too small / in the wrong place"

Claude can help you troubleshoot. Often it's a small typo or the file being in the wrong folder.

Why This Matters

Understanding how files work together opens up new possibilities:

• Add diagrams, charts, and photos to any slideshow
• Include student work samples or example images
• Build more complex tools that use multiple files
• Share your complete project by sharing the whole folder

This is real computer literacy—not just using tools, but understanding how they're put together.