Veel bloggers gebruiken een soort van thumbnail bij elke blog. Dat is een kleine afbeelding die iets zegt over de inhoud van de blog. Vroeger had telesmurf.be dat ook, maar omdat ik het soms lastig vond om altijd mooie thumbnails te zoeken en te maken heb ik het idee overboord gezwierd en begon ik te werken met een simpel kalendertje.
Nu ik voor m'n werk een blog aan het maken ben zat ik terug wat te worstelen met het idee om zo'n thumbnail toe te voegen. De voordelen zijn dat het onder andere de tekst wat breekt en minder saai overkomt. Nadeel is dat je voor elke blog zo'n thumbnail moet maken of ineens een hele reeks, maar dat is tijdrovend. Zeker als je elke dag of meermaals per week een blog toevoegd is dat erg vervelend. Net de reden waarom ik het op telesmurf.be liet vallen.
Enfin, ik wil dus van een grote afbeelding maar een deeltje kunnen weergeven, daar komt het op neer. Als je dan op die thumbnail klikt mag de ganse afbeelding te zien zijn. Moet kunnen, niet? Natuurlijk moet dat kunnen!
<style media="screen" type="text/css">
.thumbnail {
display:block;
float:right;
width:90px;
height:90px;
background-image:url(thumbnails/test.gif);
background-repeat:no-repeat;
background-position: -50px -50px;
}
</style>
Voila, tot zover het CSS gedeelte. Nu nog de image zelf laten zien ... makkie!
<div class="thumbnail"></div>
Wat is het nadeel van deze manier? Je moet voor elk zo'n image een style maken. Dat is met ASP geen probleem. Een loop-je doorheen je blogs en je hangt bij voorbeeld je blog-id aan je label.
.thumbnail<%= rs_blog("id") %>