Hi Leute

ich habe eine kurze Frage. Ich bin mir bei meinen Gedanken nicht ganz sicher, ob das überhaupt per PHP erfragt werden kann, aber mal sehen:

Man hat ja die Möglichkeit über $img_info = getimagesize('./example.jpg'); die Höhe und die Breite einer Bilddatei in Pixeln in ein Array zu speichern. Ist es aber auch Möglich die tatsächlich dargestellte Größe innerhalb PHP'S anzufragen?

Ich habe hier ein CMS vorliegen in dem die unerfahrenen Benutzer gerne per HTML Angaben width="" und height="" oder per CSS die Höhe und die Breite angeben. Ich möchte diese Angaben gerne vergleichen mit der Originaldatei - um dann zu sehen ob diese größer ist und nur wenn sie größer ist, dann soll ein rel Attribut ausgegeben werden um per JS eine Lightbox mit dem Element zu verknüpfen.

Im Prinzip ist das alles funktionstüchtig, WENN ich von 2 Dateien ausgehe und die tatsächliche Dateigröße vergleiche. Aber jetzt muss ich es wie eben beschrieben so machen, dass es nur eine Datei ist und die AUSGABEGRÖßE verglichen wird mit der tatsächlichen Größe der Datei in Pixeln.

Habt ihr eine Ahnung wie ich an diese Angaben komme?

Viele Grüße

Hier mal eben die bisherige Funktion

HTML-Code:

<img src="./img/colors.jpg" <?php check_ifbig('colors.jpg'); ?> alt="">

PHP-Code:

<?php

function check_ifbig($dateiname) {

  $img = $dateiname;
  $bimg = 'big_'.$img;

  $img_path = './img/'.$img;
  $bimg_path = './img/'.$bimg;

  if(file_exists($bimg_path)) {
      $img_array = getimagesize($img_path);
      $bimg_array= getimagesize($bimg_path);
    
      if ($bimg_array[0] > $img_array[0] OR $bimg_array[1] > $img_array[1]) {
          echo " rel=\"lightboy-gallery\" ";
      } else {
          echo "Das angegebene Bild ist kleiner als das Original";
      }
  } else {
      echo "Kein Großes Bild vorhanden oder falsche Benennung.";
  }
  
}
?>

Da PHP auf dem Server ausgeführt wird, ist das ermitteln von DOM-Elementen nicht möglich. Dieses müsstest du mit JavaScript abfragen, dann mit AJAX einen Request zu deiner PHP-Funktion starten und als Rückgabe die Ausgabe deiner Funktion.

Mit jQuery ist das ziemlich einfach:

Code :

1 2 3 4 5 6

var imgWidth  = $('img').attr('width'); var imgHeight = $('img').attr('height');   $.post('datei.php', {height: imgHeight, width: imgWidth}, function(data){    alert(data); });

in der datei.php prüfst du ob der POST-Request angekommen ist, wenn ja hast du 'height & width' im POST-Array enthalten. Dies kannst du dann deiner Funktion übergeben.

Okay, also ich verstehe prinzipiell die vorgehensweise, aber weiß ehrlich gesagt nicht wie es umzusetzen ist. Das dort oben fragt erst einmal die ANGEZEIGTE höhe und breite des Bildes ab und speichert die zahlenwerte in variabeln.das darunter und was du mit der datei.php und der Post Request erklärt hast verstehe ich noch nicht. Kannst du es noch weiter erläutern bitte?

Man könnte jene Abfrage auch komplett in JS machen, indem man das Bild vorlädt, die Attribute dieses Bildes ausliest und dann mit den Infos aus der DOM vergleicht. Anhand des Projekts müsste man überlegen, welche Art besser geeignet ist.

mfg chmee
..nach JS verschoben..

Das war nur ein Beispiel, dazu benötigt man die Javascript-Library jQuery.

Code :

1

$.post()

sendet einen AJAX-Request zu der angegeben Datei.

Okay, super Tipps. Ich experimentiere jetzt erst einmal ein bisschen rum mit den neuen Infos und dann schauen wir weiter Wenn ich nicht weiter komme wende ich mich vertrauensvoll an euch ;D

Achsoo - ich kann dann in der PHP Datei wenn das request angekommen ist mit den variablen $_POST['height'] und $_POST['width'] arbeiten?

Thats right!

Hier noch eine kleine Hilfe: http://api.jquery.com/browser/

Naja, nach dieser Erkenntnis ergibt sich eine neue Frage Zumeist muss man ja solche JavaScript Sachen im Head Bereich machen, richtig? Meine PHP Funktion konnte ich schön das aufrufen wo ich sie gebraucht habe: Innerhalb des Image-Tags habe ich sie aufgerufen, dementsprechen findet auch an dieser Stelle meine Ausgabe des Attributes statt, wenn die Konditionen erfüllt sind. Wie läuft das hier?

Sie müssen nicht im Heead stehen, dies kannst du auch bei deinem Code machen. Du kannst die Ausgabe des Requests an ein HTML-Element weitergeben, so das es angezeigt wird.

Super!

Dann kann ich bestimmt auch den Dateiname abfragen so inder Art hier:

var imgName = $('img#detailbild').attr('href');

?

Wenn du es ausprobiert hättest, dann wüstest du das es funktioniert

Wobei "imgHref" der richtige Bezeichner für die Variable wäre.

Gibt es richtige Bezeichner ? Okay, semantisch wäre es wohl richtig, da hast du recht. Also ich schau mir hier grad die Dokumenation und ein Beispiel an, aber durch diesen $.post Befehl steig ich nicht durch.

Code :

1 2 3

$.post('datei.php', {height: imgHeight, width: imgWidth}, function(data){    alert(data); });

In der Klammer bezeichnet das erste, welche datei welche daten verarbeiten soll. Ich hab null check. Laut dokumentation kann man da so viele Werte übergeben mit denen ich nichts anfangen kann und ich weiß auch nicht, wie ich das Ergebnis aus meiner PHP Funktion zurück in dieses JS bekomme. Und wo steuer ich wo ich das Ergebnis dann ausgebe. Fragen über fragen - wenn du denkst ich sollte hier anfangen mich anderweitig damit zu beschäftigen als in einem forum, dann sag das ruhig

In deiner PHP-Datei schreibst du folgendes:

PHP-Code:

function checkImgSizes($width,$height){
    return "Mein Bild ist " . $width . " breit und " . $height . " hoch!";
}
if(isset($_POST['height']) && isset($_POST['width'])){
  echo  checkImgSizes($_POST['width'],$_POST['height']);
} 


Jetzt sollte bei deinem Alert im JS der oben gennante Satz ausgegeben werden.

Ja okay, als Alert, aber wie schreib ich das woanders hin? Ich meine bei mir läuft es ja darauf hinaus, dass ich weder ein Alert ausgeben will, noch den Inhalt eines Divs verändern, sondern einem href-Tag um ein Bild herum soll bei erfolgreicher abfrage ZUSÄTLICH das Attribut class="lightbox" hinzugefügt werden und bei negativem Ergebnis der Abfrage soll eben nichts passieren.

Achso und das ganze soll einmalig, nämlich beim Laden der Seite passieren.

Dann in deiner PHP-Funktion true oder false zurückgeben.

Im JS das abfragen und je nach Bedingung setzt du das Attribut für den a-Tag.

sollte ungefähr so aussehen:

Code :

1 2 3 4 5 6 7 8

$(document).ready(function(){    var imgWidth  = $('img').attr('width');    var imgHeight = $('img').attr('height');      $.post('datei.php', {height: imgHeight, width: imgWidth}, function(data){        if(data == true) $('element').addClass('lightbox');    }); });