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

Java Spring Basics Modeling, Storing, and Presenting Data Create an Index Page That Presents a List of Data

Timothy Boland
Timothy Boland
18,237 Points
Posted by Timothy Boland
Timothy Boland
18,237 Points

For 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
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

It's a small little typo here:

  <a th:hfef="@{'/gif/' + ${gif.name}}">

It should be href, not hfef:

  <a th:href="@{'/gif/' + ${gif.name}}">