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 trialTimothy Boland
18,237 PointsFor some reason my gif images are not clickable. Here is my code for home.html....
Can anyone see what I may be doing wrong
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" th:href="@{/favicon.png}" />
<link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" th:href="@{/app.css}" />
<title>giflib | Home</title>
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="container">
<a th:href="@{/}" class="brand-logo">gif<span>.</span>lib</a>
<a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li class="active"><a th:href="@{/}">Explore</a></li>
<li><a th:href="@{/categories}">Categories</a></li>
<li><a th:href="@{/favorites}">Favorites</a></li>
</ul>
<ul id="mobile-nav" class="side-nav">
<li class="active"><a th:href="@{/}">Explore</a></li>
<li><a th:href="@{/categories}">Categories</a></li>
<li><a th:href="@{/favorites}">Favorites</a></li>
</ul>
</div>
</nav>
</div>
<div class="search-bar container">
<div class="row">
<div class="col s12">
<form action="#" method="get">
<div class="input-field">
<input name="q" type="search" placeholder="Search all gifs..." required="required" autocomplete="off"/>
<i class="material-icons">search</i>
</div>
</form>
</div>
</div>
</div>
<div class="gifs container">
<div class="row">
<div th:each="gif : ${gifs}" class="col s12 l4">
<a th:hfef="@{'/gif/' + ${gif.name}}">
<img th:src="@{'/gifs/' + ${gif.name} + '.gif'}" />
<a href="#" th:class="(${gif.favorite} ? 'un' : '') + 'mark favorite'"></a>
</a>
</div>
</div>
</div>
<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>
<script th:src="@{/vendor/materialize/js/materialize.js}"></script>
<script th:src="@{/app.js}"></script>
</body>
</html>
1 Answer
Seth Kroger
56,413 PointsIt's a small little typo here:
<a th:hfef="@{'/gif/' + ${gif.name}}">
It should be href
, not hfef
:
<a th:href="@{'/gif/' + ${gif.name}}">