12

I'm trying to use Bootstrap's thumbnail component to display a list of product categories with thumbnail images. I want users to click the thumbnails to go to the category.

The documentation on the Bootstrap website provides this basic markup:

<ul class="thumbnails">
    <li class="span4"> 
        <a href="#" class="thumbnail">
            <img data-src="holder.js/300x200" alt="">
        </a>
    </li>
    ...
</ul>

I've Googled for information about holder.js, found the official holder.js page, downloaded the zip version, put the files in my site's js folder and linked to the holder.js file with a script tag in my HTML.

But how/where in the markup do I specify what image files to use?

I also need to include a category name under each image, probably with a span or h4 tag. This would need to form part of the clickable block.

UPDATE: Just to clarify, it's really only the styling aspects of the thumbnail component that I want to utilise. So perhaps I can achieve this with the thumbnails component and associated HTML markup, and leave out holder.js altogether?

This is the kind of HTML mark-up I would like to use:

<ul class="thumbnails">
    <li class="span4">
        <a href="/category-name/" class="thumbnail">
            <img src="/assets/images/filename.jpg" alt="">
            <span>Category name</span>
        </a>
    </li>
    ...
</ul>
KyleMit
  • 30,350
  • 66
  • 462
  • 664
JonB
  • 127
  • 1
  • 1
  • 7

1 Answers1

21

Holder.js is just image placeholder framework based on javascript and inline images. It is used by bootstrap to create sample images. There is no need in this library on production. So instead of using data-src attribute and holder.js library you should use src attribute and markup like:

<ul class="thumbnails">
    <li class="span4">
        <a class="thumbnail" href="#">
            <img src="/image/path.jpg" alt="My Image" />                
            <span class="caption">This is my image</span>
        </a>
    </li>
</ul>

You can also need to disable text underline in image caption. Just use css:

a.thumbnail:hover {
    text-decoration: none;
}

Example: http://jsfiddle.net/M3fpA/46/

sody
  • 3,731
  • 1
  • 23
  • 28
  • Thanks for clarifying what holder.js is used for. I've used a similar to solution to the one you provided, and it works fine. Thanks again! – JonB Apr 17 '13 at 12:33