Afbeeldingen in "mijn profiel"

Kan ( en wil ) iemand uitleggen hoe ik mijn profiel kan versieren met b.v een afbeelding van het boek dat ik aan het lezen ben ? Dus bij voorbeeld: boek dat ik nu aan het lezen ben:.............
Bij voorbaat dank

> 1

Zie bijvoorbeeld: Nederlandstalige lezers : kookboeken (Bericht 4).

Wenk: Met vragen als bovenstaande kan men voortaan (ook) terecht in de nieuwe groep Vraagbaak.

Groet,
boekerij.

Had gehoopt dat het wat eenvoudiger zou zijn. 'k Ga het proberen.
Overigens, vriendelijk dank.

> 3

Het is ook heus eenvoudig -- eens je een beetje doorhebt hoe het werkt.

Als je enkel maar een (kaal) plaatje wil tonen, zonder een koppeling of wat dan ook erbij, enkel en alleen het plaatje, is het natuurlijk nóg eenvoudiger.

Neem bijvoorbeeld de omslag bij de Schrijfwijzer uit jouw verzameling.

Dat plaatje heet "4434795-s.jpg" en bevindt zich op http://www.librarything.com/i/covers/sm/4434795-s.jpg. Dat laatste kan je bijvoorbeeld ontdekken als je, op een windoos, rechtsklikt op het plaatje en dan uit het floepmenuutje kiest voor "Eigenschappen".

Protocol ("http://") en domein ("www.librarything.com") kunnen ons niet boeien. Die laten we gewoon weg.

Wat we dan overhouden is het pad en de bestandsnaam: "/i/covers/sm/4434795-s.jpg". Dat gaan we gebruiken.

Komt-ie:

Voor een plaatje gebruiken we de html-sleutel "<img>" (van het Engelse 'image' = 'plaatje').

We moeten er nog even bij vertellen waar het plaatje moet gehaald worden. Daartoe gebruiken we het kenmerk (het "attribuut") "src" (van het Engelse 'source' = 'bron').

Dat gaat zo:

<img src="{bron}">

In ons voorbeeld:

<img src="/i/covers/sm/4434795-s.jpg">

Als ik dat nu niet, om de code te laten zien, dubbel versleuteld had, maar gewoon, dus letterlijk zoals je hierboven ziet, zien we geen code meer, maar het plaatje. Kijk maar:



Moeilijk? Nou! Misschien is het in het begin net éven wennen, maar het lukt heus wel hoor. Probeer het zelf maar.

Natuurlijk hebben we daarmee alleen nog maar een "kaal" plaatje: het plaatje zonder meer.

We kunnen er nog een heleboel meer eigenschappen aan toekennen. Enkele daarvan zie je al uitgelegd in het bericht als hierboven naar verwezen. Daarmee kunnen we het plaatje verder "aankleden".

Als we willen dat het plaatje, wat misschien wel zo handig is, meteen ook als koppeling werkt, zodat we erop kunnen klikken om dan meteen op de bijbehorende boekbladzijde terecht te komen, zetten we er een anker (met koppeling) omheen.

Zo'n anker, dat uit twee delen bestaat, ziet er zo uit:

<a href="{doel}">{hier het plaatje}</a>

Hoe we dat plaatje maken, vonden we al hierboven (<img src="/i/covers/sm/4434795-s.jpg">). Dat moeten we dus gewoon op de juiste plek plakken.

Blijft nog het doel: het adres van de bladzijde met jouw boek. Ook hier laten we het protocol en de domeinaanduiding gewoon weg (zie hoger). Wat we dan overhouden is: "/work/details/19667872".

Ook dit moeten we gewoon op de juiste plek plakken (zie hierboven: "{doel}").

Bij elkaar wordt het dan:

<a href="/work/details/19667872"><img src="/i/covers/sm/4434795-s.jpg"></a>

Nou, dat ziet er misschien op het eerste gezicht al knap ingewikkeld uit, maar eigenlijk is het toch, zoals we hierboven zagen, toch heel erg eenvoudig opgebouwd. Het bestaat uit een eenvoudig basispatroon met nu twee adressen (een voor het doel en een voor de bron van het plaatje) op de juiste plekken erin geplakt.

Als je de code zoals hierboven weergegeven letterlijk gebruikt, krijg je dit:



Een plaatje dat meteen ook een koppeling is!

Zo kan je het plaatje steeds verder aankleden. Zie ook het eerdere bericht.

Mocht het met deze uitleg nog niet lukken, laat je maar weer van je horen.

Met (technische) vragen zoals deze kan je voortaan (ook) in de (Nederlandstalige) groep "Vraagbaak" terecht.

> 4

alt="foo"

Toevoeging: het wordt in het algemeen als we zo netjes en passend beschouwd, dat je voor wie het plaatje om welke reden ook niet te zien krijgt -- het plaatje wordt niet (meer) gevonden; de bladeraar begrijpt geen plaatjes; het scherm kan geen plaatjes weergeven; de bezoeker gebruikt niet eens een scherm (maar bijvoorbeeld een brailleregel of een voorleestoestel); noem maar op -- in een alternatief voorziet. Daartoe gebruik je het kenmerk "alt", met een eraan toegekende waarde. Die laatste waarde is tekst. Het is tekst die het plaatje beschrijft voor wie het niet kan zien.

Het alt-kenmerk met waarde ziet er bijvoorbeeld zo uit:

alt="Schrijfwijzer"

Dat kenmerk kennen we toe aan; dat is: stoppen we bij in de "<img>"-sleutel. Die ziet er dan zo uit:



of zoals in ons voorbeeld:

<a href="/work/details/19667872"><img src="/i/covers/sm/4434795-s.jpg" alt="Schrijfwijzer"></a>

Als je bovenstaande code letterlijk overneemt, wordt dat:



Dat ziet er al heel erg netjes uit, toch?

Misschien zal je bladeraar wanneer je met je muisaanwijzer over het bovenstaande plaatje gaat, de alt-tekst laten opfloepen. Dat is eigenlijk niet helemaal de bedoeling -- de alt-tekst is er om in de plaats te stellen wanneer het plaatje niet wordt getoond -- maar het hindert niet echt.

Groet,
boekerij.

Dank voor uw assistentie. Door uw degelijke "stap-voor-stap-methode" ben ik geholpen.
Nogmaals bedankt voor uw hulp.

> 6

Het blijkt al goed te lukken, hè?

Nog een wenk toe:

Als u kiest voor de grootte die u nu gebruikt, doet u er beter aan ook als bron niet de kleine, maar wel de middelgrote plaatjes te gebruiken. Die hoeft u dan niet uit te vergroten, zodat ze ook niet onscherper worden.

Vergelijk:



Voor de drie meest linkse plaatje is, zoals nu op uw profielbladzijde, als bron het kleine plaatje "/4696697-s.jpg" (/i/covers/sm/4696697-s.jpg) gebruikt, met een oorspronkelijke eigen grootte van 44 x 71 px. Helemaal links ziet u het kleine bronplaatje in de oorspronkelijke grootte (100%). Rechts daarvan hetzelfde kleine bronplaatje, nu zoals door u uitvergroot tot 81 x 130 px (~339%). Weer rechts daarvan nog eens hetzelfde kleine bronplaatje, maar nu vergroot tot een hoogte van 142 px (400%). Tenslotte, helemaal rechts, werd als bron niet het kleine, maar het middelgrote plaatje "/4696697-m.jpg" (/i/covers/med/4696697-m.jpg) als bron gebruikt. Dat heeft een oorspronkelijke eigen grootte van 89 x 142 px en wordt nu ook gewoon zo weergegeven (100%).

Kiest u zelf maar wat u het beste lijkt.

Bovendien, het eerste zowel als het laatste plaatje hoeft uw toestel helemaal niet te herbereken: het hoeft niet geschaald te worden. Bij het derde plaatje is het schalen vrij eenvoudig: gewoon elke pixel ervan verviervoudigen (zowel in de lengte als in de breedte verdubbelen). Het derde plaatje is veruit het moeilijkste en ingewikkelste: daarbij moet elke oorspronkelijke pixel in beide richtingen met ongeveer (afgerond) een factor 184% worden vergroot, zodat het alles daarna van een raster van oorspronkelijk 44 x 71 px past in een uiteindelijk raster van 81 x 130 px. Op de vier hoekpixels na, die hun oorspronkelijke kleurwaarde kunnen behouden, moet de kleurwaarde van elke pixel van het aldus geschaalde plaatje herberekend worden, om, en snel ook, op het scherm een zo aanvaardbaar mogelijk resultaat neer te zetten. Knappe rekendoos!

Maar misschien is de gehele schaalverhouding (100% of 400%) niet enkel makkelijker, maar oogt ze ook fraaier. Uw keuze.

Groet,
boekerij.

Inderdaad, het oogt nu veel beter. Naar ik begrijp behoeven de hoogte en breedte van de gewenste afbeelding niet te worden opgegeven. Ik heb nu bv. ingevoerd:


Prettig, uw assistentie.

Uw hulpvaardigheid geef ik, binnen de mogelijkheden van LT, een plaats door middel van een vermelding in mijn profiel, en daarmee ook in die van u. (met uw welnemen.)
Theo de Klerk

> 8

hoogte

Als u voor het doelplaatje de hoogte én de breedte vastlegt, kan het gebeuren dat die verhoudingen niet kloppen met die van het bronplaatje, en het dus moet vervormd worden -- in de hoogte of de breedte samengedrukt of uitgerokken -- om aan de nieuwe vorm te voldoen.

Anders is het als u voor het doelplaatje één van beide bepaalt: de hoogte óf de breedte. De verhoudingen blijven dan zoals die in het bronplaatje; dat wil zeggen: als u bijvoorbeeld enkel de hoogte van het doelplaatje kiest, wordt de breedte ervan zo bepaald dat de oorspronkelijke vorm van het plaatje behouden blijft.

Omdat misschien niet alle bronplaatjes even hoog zijn -- dat heeft trouwens niks te maken met de grootte/hoogte van het boek -- kan het daarom nuttig/gewenst zijn toch bijvoorbeeld de eigenschap hoogte vast te leggen. U krijgt dan een naar hoogte eenvormig rijtje.

anti-aliasing

In het tweede en het derde plaatje zoals in bericht 7, ziet u de gevolgen van zgn. anti-aliasing uitvergroot.

Het plaatje is opgebouwd uit puntjes, eigenlijk vierkantjes, in een raster. Al kan dan voor elk afzonderlijk puntje een keuze uit tot ruim 16,7 miljoen (2^24) kleuren worden gemaakt, dan nog wordt noodzakelijk het hele puntje/vierkantje met alleen die ene kleur gevuld. Als dat mogelijk is -- als er voldoende kleuren voorradig zijn -- wordt daarom voor onderdelen van het plaatje die niet vanzelf een heel vierkantje afdekken -- zoals (randen van) schuine lijnen en cirkels, maar ook andere randen, of onderdelen die te klein zijn om een beeldpunt helemaal te vullen, zoals in het voorbeeld de letters van de schrijversnaam, om over de witte letters in het rechter benedenkwartier maar te zwijgen -- mengkleuren gebruikt.

Door deze bewerking lijkt een gaver plaatje te ontstaan -- het beste wat voor dat aantal rasterpunten mogelijk is. Als we dat plaatje weer uitvergroten, zien we natuurlijk wat er gebeurd is: er zijn gegevens verloren gegaan en het is alles wat wazig geworden. Opgelet: ook zonder anti-aliasing zouden er noodzakelijk gegevens verloren gegaan zijn, een gevolg van het beperkte aantal rasterpunten, maar zouden we bij uitvergroten scherp afgetekende kartels zien. Die zijn door de anti-aliasing weggevallen. Als we het plaatje niet weer uitvergroten, ziet het er daarom beter uit.

Al zien we dat dan misschien meteen, toch zijn het eerste en het derde plaatje, een kwadratische gehele uitvergroting van het eerste, op hun weergegeven grootte na helemaal gelijk.

keuze bronplaatje

Voor het eerste, kleine plaatje, had het geen zin een groter bronplaatje te kiezen. Het zou voor de weergave ervan geen enkel verschil uitmaken. Kijk maar:



Links ziet u het plaatje met als bron het kleine; rechts dat met als bron het middelgrote bronplaatje. Ziet u het verschil? Dat kan. Waarschijnlijk omdat een plaatjesbewerkingsprogramma beter is in het schalen van plaatjes dan uw bladeraar.

Voor de beste weergave kiezen we dus een bronplaatje met een grootte aangepast aan die van ons doel. Als we een te klein bronplaatje kozen, zien we dat het te weinig gegevens bevatte. Als we een onnodig groot bronplaatje kiezen, krijgen we overtollige gegevens, waar we verder niks mee kunnen, we gebruiken ze niet, en die we dus toch zullen (moeten) weggooien. Ze zorgen maar voor onnodige ballast. Sterker nog: de weergave van het grotere bronplaatje kan het moeten afleggen tegen die van het juist gepaste.

uitsmijter

Uit bovenstaande uitleg kan u hebben begrepen dat daarentegen voor een helemaal scherpe, zelfs sterk uitvergrote weergave van een plaatje zoals de vlag van Nederland, een bronplaatje van maar drie beeldpunten groot al volstaat. Zo is het inderdaad.

--
technisch foutje hersteld

Wat een grappig idee, ik heb het onmiddelijk geprobeerd.
Lozwen