Einstellung Höhe von html img Elemente mit der Funktion

Question

Ich versuche, die Höhe der Bilder in meine HTML-Datei mit Django als solche geladen zu setzen:

<img data-original={{img.url}} width='310' height=calcHeight({{img.height}}, {{img.width}})/> 

Mit dem ‚calcHeight (h, w)‘ Funktion Wesen eine einfache Funktion, um die Höhe des Bildes im Verhältnis zu der Breite von 310 zu skalieren. Ich muss dies tun, weil ich ein Lazyloader-Plugin verwende, das leere Platzhalter für die Bilder generieren muss, bevor die Bilder selbst geladen werden. Die Bilder haben unterschiedliche Abmessungen, daher muss ich die Höhe und die Breite der Bilder bestimmen, bevor die Bilder geladen werden, da sonst die Platzhalter vor dem Laden der Bilder "keine Höhe" haben, wodurch das Layout durcheinander gerät in diesem Prozess.

Der obige Code funktioniert nicht und ich vermute, es ist, weil Sie eine Funktion für die Höhe nicht aufrufen können. Ich hoffe ich habe die Frage genau genug erklärt und danke im Voraus für irgendwelche Tipps!

Answer 1

Sie können keine Funktion aufrufen, die Argumente in einem Template mit Django übernimmt. Um dies zu erreichen, müssen Sie write a template tag or filter yourself.

Dann würden Sie in der Lage sein, so etwas wie zu tun:

{% my_img_tag img.url img.height img.width %} 

Welche in Ihrem Tag Konstruktor gehen würde:

def my_img_tag(url, height, width): 
    new_height = calcHeight(height, width) 
    return {'url': url, 'height': new_height, 'width': width} 

Und Sie Vorlage könnte so etwas wie:

<img data-original="{{url}}" width="{{width}}" height="{{height}}"/> 

Answer 2

Ich löste das Problem, indem ich die skalierte Höhe des Bildes berechnete, das einmal in der django Datenbank gespeichert wurde :

def save(self, *args, **kwargs): 
     self.photo_scaledHeight = self.photo_height * (310/self.photo_width) 
     super(Post, self).save(*args, **kwargs) 

ich hinzugefügt, um das Modell, das Feld 'photo_scaledHeight' where Foto verwendet wurde, so konnte ich wie so dass in meiner Vorlage rufen Sie einfach:

<img data-original={{photo.url}} width='310' height='{{photo_scaledHeight}}' /> 

@ lucas-lazaro mich in der rechten spitz Richtung