[JS en Bootstrap] Maak vierkante image thumbnails

[playermijp]

Beste,

Ik ben aan het werken aan een nieuwe website die grotendeels opgebouwd is dmv PHP en JavaScript. Ik maak ook gebruik van Bootstrap. Nu wil ik thumbnails van foto's tonen die allemaal exact even groot zijn (vierkant). Dit lukt me wel, maar het aspect ratio van de foto's klopt dan niet meer en ik krijg het ook niet meer goed. Iemand een idee?

Hieronder een screenshot van hoe het er nu uitziet:



De HTML-code die deze foto's aanstuurt (voorbeeld voor 1 foto):

code:

<div class="row">
    <a href="#" class="thumbnail">
          <img class="thumb" src="http://localhost:81/Platform/images/30428fb2383b9bf8cc750944d4ef166e.png" alt="Loyalty Screenshot 3" title="Loyalty Screenshot 3" style="height: 148px; width: 83.2852px;">
    </a>
</div>

De JS-code die ervoor zorgt dat de foto's vierkant zijn:

code:

$img = $(".thumb");

//Change size of each image so that the thumbnails are square
$.each($img, function(){
    $this = $(this);
    var ratio = $this.height() / $this.width();
    $this.height($this.height()/ratio);
    $this.width($this.width()/ratio);
});

[eXtreaL]

Dit is denk ik niet iets wat je wilt laten afhandelen in de frontend van je site. Wat waarschijnlijk het beste is, is om na het uploaden de images te schalen/croppen (in dit geval dmv PHP) naar het door jou gewenste thumbnail formaat.

[Kecin]

Ik zou het ook doen na het uploaden.

[playermijp]

Ok, dat ga ik zo oplossen dan! In ieder geval erg bedankt voor de snelle antwoorden!

[bonzen]

JavaScript is inderdaad niet bedoeld voor dit soort zaken.
bootstrap maakt gebruik van jQuery,
Hier is een plusgin waarmee je "visueel" kunt croppen. het daadwerkelijke croppen zal op de server afghandeld worden (doorklik link naar voorbeelden)

http://fengyuanchen.github.io/cropper/

[Gooly]

In de meeste gevallen wordt er idd direct na uploaden een thumbnail aangemaakt als afzonderlijk bestand. Bedoeld om te tonen in dit soort situaties. En dan gebeurt het uiterraard niet met javascript maar met ImageMagick of GD of i.d.