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

HTML Jekyll Data Files

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

Change Webconfs title with an image logo?

If I want to change the webdonfs with an image logo how would I do that? This is how it looks for me now Imgur

I tried to change it in the config.yml and then in the server I was asked to install gem install wdm

then I got no other error but it still does not work. Please help!

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Elena,

You should be able to do that by editing your "header.html" file. This is the file that includes the header portion of the page which is where that logo is.

It's in the "_includes" folder.

You'll find the following html:

<a class="site-logo" href="/" title="Webconfs.me – Home">
    WebConfs
</a>

You should be able to replace the text there with an img element.

Example:

<img src="/img/logo.png" alt="">

Make sure that you also have that image in your source "img" folder.

You may need to update the scss file depending on what it looks like after you've added the image.

Post back if you're still stuck.

Update: added forward slash to beginning of image path to make it a root relative link

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Hi Jason,

I posted a picture of my code. Imgur

You can see that the header includes looks different. In the config file I set the path to the image

And up to this point I made it to look like this Imgur When I click on the path it renders the image, but I want it to display on the website.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I'm not sure that it's necessary to add the image path to your config file but it's ok to do it.

You still need to have an img element in your code though and I only see a link. The only way to see an image on your page is to load it in an img element or have it as a css background image.

Your code is going to produce something like:

<a class="site-title" href="img/logo.png">img/logo.png</a>

which is only a simple text link. The text is the image path and it links to the image. The href needs to remain a forward slash as before so that it links back to the home page.

You want to have an img element within the link tags.

Putting together the 2 code blocks I posted above and using the value in the config file you should have

<a class="site-logo" href="/" title="Webconfs.me – Home">
    <img src="/{{ site.logo }}" alt="">
</a>

I'm not sure what the correct class should be. I have "site-logo" in my personal files but you have "site-title" Also, change the title attribute of the link to whatever is appropriate for you.

It might help to look at "post.html" to see how Guil displays the images for individual posts. It's similar to code above except the post images don't have links around them.

Let me know if you're still stuck.