Plassering av bilder av forskjellig formater

[Tonny Kluften]

Jeg har fått en liten utfordring i å plassere bilder av forskj. formater i like store bokser.

Se på Sofa | Hvitt rom og Kjoler | Hvitt rom

Disse to sidene viser thumbs fra hver produktside. I tillegg vises priser på sofaer.

Sofabildene er lave og brede mens kjolebildene er høye og smale. Dermed fyller ikke sofabildene ut i høyden. Dessuten har sofaene forskj. antall priser, noe som igjen gjør det vanskelig å unngå hvitt tomrom.

Hvordan ville dere ha organisert dette?

Takker for gode forslag.

 

[picxx]

Jeg hadde samme problemstilling for en stund siden da jeg skulle sette opp en butikk til en kompis. Det jeg gjorde var at jeg på forhånd lagde et bilde (f.eks. 600x600) med firmaets logo e.l. i bakgrunnen (15% opacity eller noe slikt?), hvorpå jeg la orginalbilder som ikke fylte ut oppå disse bildene.

Noe mer jobb enn bare å klaske inn bildene, men funka helt greit.

 

[Tonny Kluften]

Har du en link til et eksempel?

 

[picxx]

Gubben har tatt ned nettsiden, så har desverre ikke det.

 

[Pong]

Det frister sikkert med å lage en standard løsning til alle bilder, men jeg tror i det lange løpet svarer det seg å legge ut tilpassede bilder og å bruke litt tid på å få de til å se fint ut. Du kan få litt dra-hjelp fra Photoshop mha av droplets/macros.

Alternativt kan du sjekke bredde/høyde server-side allerede med php/gd (hadde vært en ide å cache den info'en i db'en).

 

[Tonny Kluften]

Ja, det blir nok å la de legge ut tilpassede bilder. Og det er greit nok forsåvidt. Det store utfordringen er at de brede bildene skal inn i boks med samme størrelse som de smale bildene.

 

[Sjefskoder]

hei, hei, hey!

Du "skrumper" jo ned bildene med html... (img width="120")

IKKE gjør det, for det blir aldrig, aldrig fint..
Få tak i en kode som lar deg laste opp bilder og resizer de for deg..

eller du kan velge å vise en del av bildet

Jeg lagde et bruktmarkedssystem for eiendomer for en kunde for en stund siden og jeg valgte å vise en del av bildet med hjelp av css..
Først kodet jeg en opplastingskode for gd i php som lot meg bestemme størrelse på ferdige opplastingsresultat også valgte jeg og ikke vise hele bildet, men 98px x 56px-størrelse og da sentrert, med ramme rundt å greier å greier

Se her så skjønner du hva jeg mener ::

Her...

NEI, jeg skal ikke selge noe som helst, det er en testannonse
Men, sjekk måten jeg viser bilder på..

Funker kanskje å gjøre det slik for deg og?

Om ikke så MÅ du få en kode som lar deg laste opp bilder og resize de for deg, slik at alle for samme (klare og tydlige)størrelse..

/sjef

 

[zapotek]

Eller ta den enkle metode å resize hvert bilde manuelt i Photoshop og vise dette på kategorisidene. Som Sjefskoder sier så er det håpløst å resize på den måten du gjør, filstørrelsen blir jo også altfor stor.

 

[Tonny Kluften]

Bra at dere nevner det med kvalitetstap på bildene, takk for påminnelsen. Det ser rimelig greit ut i Chrome og IE, som jeg brukte for å sjekke, men i FF ser man jo at det ble virkelig dårlig.

Men jeg har løst problemet med kvalitetstap nå. Nå vises thumbs med bredde 120px (som Wordpress automatisk lager ved opplasting) istedenfor html resizede bilder.

Å vise deler av bildet er desverre ikke aktuelt her fordi det er klær og bildene må vise alt.
Hvis jeg kunne vise deler av bildene ville jeg ikke hatt noe problem faktisk i og med at jeg kunne satt samme størrelse på alle og ikke tenkt på hva som vistes.
Men jeg er enig at å vise deler fungerer glimrende på eksempelsida til sjefskoder. Har brukt det før og syns at det gir en ganske stilig effekt.

 

[Pong]

Hensikten med å vise bildene må vel være at folk klikker på disse, fordi ingen kjøper vel en sofa basert på et bilde som er 120x120

Men du kan også dele produktene inn i hver sin kategori, og tilpasse css'en basert på kategori? Noe som dette har jeg gjort med Festivo - hvis du sjekker forsiden er alt LI'er som floater, men de har forskjellige størrelser. Jeg ser du også bør se på 'New Releases'. Samme opplegg, men her floater de forskjellig.

Du må passe på litt slik at det floater fint, men det kan være fint.

 

[agrimsrud]

Kanskje litt off-topic, men kan jeg komme med et annet forslag?
Lage hele div'ene som lenker, ikke bare bildet og overskriften?

Ser du bruker jQuery, så da skal det gå kjapt;

$("#kategori").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
}).css({"cursor":"pointer"});

(Forøvrig bør #kategori gjøres om til .kategori da det finnes flere av denne nedover siden.)