Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Tommy Gebru
Tommy Gebru
30,164 Points

Add image to forum post

I have used and played with the markdown cheatsheet a whole lot so i am looking for more guidance and steps because it just isnt working for me.

7 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

When trying to post screenshots (or other images) to forum the most common issue, is trying to link to an image on your local computer. That won't work, you need to upload the image to the Internet.

One of the easiest ways to do that is to use an image hosting service like imgur.com.

Now you just need to link to the image in the forum using markdown ![alt text](http://example.com/path/to/img.jpg "Title")

Slava Fleer
Slava Fleer
6,086 Points

just to find it again in the future =)

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Ok so I did as you said my screenshot/ image link

James Barnett
James Barnett
39,199 Points

If you change your markdown from [my screenshot/ image link](http://imgur.com/dDxryB1) to ![my screenshot/ image link](http://i.imgur.com/dDxryB1.png) then it will embed the image.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

The result of my code(after discussing this with treehousesupport ) is the reason why the Workspaces preview feature directs my webpage to my screenshot/ image link

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Home - Joe's Pizza Co.</title>

  <link rel="stylesheet" href="../css/style.css">

</head>


<body>

<!-- Page Container-->
<div id="container">

<!-- Header -->
<header>

<!-- Logo -->
<div id="logo"><h1>Joe's Pizza Co.</h1></div>

<!-- Navigation -->
<nav>

    <ul>
    <li>
    <a href="index.html" title="Joe's Pizza Co." class="active">
    Home
    </a>
    </li>

    <li>
    <a href="about.html" title="Find out more about Joe's Pizza Co." >
    About
    </a>
    </li>

    <li>
    <a href="news.html" title="Latest news about Joe's Pizza Co.">
    News
    </a>
    </li>

    <li>

    <a href="menu.html" title="The restaurant menu for Joe's Pizza Co." >
    Menu
    </a>
    </li>

    <li>
    <a href="locations.html" title="Joe's Pizza Co. restaurant locations." >
    Locations
    </a>
    </li>  
    </ul>

</nav>

</header>  

<!-- Main Content -->
<div>

<!-- Feature -->
<section id="feature">
<hgroup>
<h1>
  New York's Best Pizza
</h1>
<h2>
  joe's pepperoni special
</h2>
</hgroup>
</section>

<!-- Home-text -->
<section id="home-text">

<h1>
    Welcome to Joe's Pizza Co.
</h1>

<p>
We pride ourselves on serving up the best pizzas in New York City. Come and visit one of our family-friendly restaurants and take a look at our wide range of authentic Italian pizzas. We can also deliver direct to your door with our speedy takeaway service.
</p>

<p>
Please take a look at the <a href="locations.html">locations</a> page for more information about where you can find our fantastic restaurants.  
</p>

</section>

<!-- Special Offers-->
<section id="offers">

<h1>
Special Offers  
</h1>
<ul>
<li>
  10% Off All Pizzas When You Eat In!
</li>
<li>
  20% Off Joe's Pepperoni Special with the promo code NYBESTPIZZA
</li>
</ul>

</section>

</div>

<!-- Footer -->
<footer>

<small>&copy; 2012 Joe's Pizza Co. All Rights Reserved</small>
-
<a href="sitemap.html" title="Links to all the pages on this website">Sitemap</a>

</footer>

</div>


</body>


</html>
James Barnett
James Barnett
39,199 Points

You need to move all of the contents of the joe's pizza directory into the parent directory. And then you need to make sure your relative links for any style sheets are updated to reflect the new location of your HTML files.

Read about:

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

I added an !(exclamation point) as well as an (i.) before imgur.com but my image has not been embedded but the broken image thumbnail is displayed! Progress!

James Barnett
James Barnett
39,199 Points

Your image is broken because you aren't directly linking to image file, note the .png at the end of my code 

![my screenshot/ image link](http://i.imgur.com/dDxryB1.png)
Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Thanks I will try that now!

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

yes! Yes! YES! thank you that totally worked! (The image issue)

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

So I placed my other two folders css and img into the main folder containing webpages and this made the css and images disappear from the website

James Barnett
James Barnett
39,199 Points

You need to make sure your relative path for any stylesheets are updated to reflect the new location of your HTML files.

You can read about how to fix your relative paths in these 2 links