[Mod] Detailansicht/Detailview - Bildgröße begrenzen/Limit image-size, easy PHP!

[KillerCookie]

German:
Nachdem ich hier im Forum einige Lösungsansätze bezüglich der Thematik "feste Bildgröße im Detailfenster" gelesen und überdacht habe, so fand ich alle eigentlich ziemlich umständlich und wollte selbst eine schnellere Lösung schaffen. Meine Lösung bietet zudem eines der Dinge, die ich bei vielen anderen vermisst habe: dynamische Verkleinerung! Was ich damit meine?

Nehmen wir an ein Bild liegt in der Größe 1600 x 1600 vor und wir wollen aber 800 x 600 (durch stupides ausschneiden eines Nutzers sind solche Größen durchaus möglich). Normale resizer nehmen jetzt die Breite und reduzieren sie auf 800, dann bestenfalls noch die Breite auf 600 und schon ist das Bild verzerrt. Andere rechnen den Verkleinerungsfaktor der Breite aus und wenden selben auf die Höhe an, das schließt aber nicht aus, das die Höhe immernoch nicht passt (wären im Beispiel ja immerhin 800 und nicht 600).

Was mache ich anders? Ich rechne den Faktor für die Breite aus und passe direkt danach die Höhe daran and _und_ prüfe dann nochmal die Höhe und falls diese zu Groß ist wird wieder ein Faktor berechnet und auf die Breite angewendet. Das stellt ein 100% passendes und nicht verzerrtes Bild sicher.

Features:
- max. Ausmaße des Bildes wählbar (Breite und Höhe)
- dynamisches verkleinern ohne Zerren von _jeder_ denkbaren Bildgröße!
- Installationszeit < 1 min.
- der Mod kann für jede Art von Bildern separat durchgeführt werden, muss aber nicht
- einfaches, englisch kommentiertes PHP
- wahlweise kann eine Information für den Nutzer eingeblendet werden (die natürlich auch als voll-bild link benutzt werden kann)
- der Nutzer kann die Vollansicht des Bildes wahlweise per Klick auf das Bild, den Hinweistext oder whatever öffnen

- *neu* auch zentral per "functions.php" einbindbar (siehe Installation Methode 2)

Erweiterungen (noch nicht eingebaut, aber möglich - einfach bescheid sagen):
Done:
- ...

Todo:
- Javascript einbauen, das die Auflösung des Nutzers ausgibt und diese wird dann zur Berechnung der Bildgröße genutzt (Kann mir dieses Javascript jemand basteln, bitte?). so könnte man jedem Nutzer die beste Bildgröße für seinen Monitor bzw. seine Auflösung liefern!
- eigene Ideen???



English:


Features:
- max. size of the image chooseable (width and height)
- dynamic resizing without stretching. possible with _every_ image size (very big hight, very big width etc.)
- time for installation < 1 min.
- the mod can be applied easily to different image formats
- easy, english commented PHP
- an information that the image was resized can be displayed (and used as full-image link of course)
- users can open the full-image with a single click at the image, the information text or everything else you wish

- *new* integration into functions.php possible, so you only need to change 1 file and it will affect all file types! (see installtion method 2)

Extensions:
Done:
- ...

Todo:
- Make a Javascript, that writes the screen resolution of the user into a PHP-variable and use it to calculate the max. resolution of the image. (Can somebody please write this Javascript?)
- Your Ideas???



Installation [ Methode 1 & 2 ] (german / english):

Bitte eine der beiden Methoden auswählen! Die 1. Methode ist verständlicher, die 2. hingegen muss nur 1 x definiert werden und funktioniert dann für alle Formate. Außerdem ist sie dann zentral in der zugehörigen Funktionsdatei hinterlegt.
 
Please choose one of the following 2 methods! Method 1 is easier to understand and use, but with method 2 you only have to the steps one time for all file types and the the code will be placed in the central funtion file.


1. Methode für jedes Dateiformat im zugehörigen Template / Method which uses the file type template (e.g. jpg.html for jpg files)

1.1
Öffne 'dein4imagesordner'\templates\media
Open 'your4imagesfolder'\templates\media

1.2
Öffne das Template für den Datentyp, dessen Größe geändert werden soll
Open the template for the file-type you wish to be resized (jpg, png, gif...)

1.3
Suche nach / Search for

Code: [Select]

<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
Ersetze durch / Replace with

Code: [Select]

<?php
  // Step 1: Definiere Variablen / Define variables

  // Sammle benötigte Bildinformationen / Getting required image informations
  $my_image_info = getimagesize ($media_src);

  // Speichere die gesammelten Daten / Saving gathered informations
  $original_width = $my_image_info[0];
  $original_height = $my_image_info[1];
  $file_extension = $my_image_info[2];

  // Die gewünschte Bildgröße / The desired image size
  $desired_width = 800;
  $desired_height = 600;

  // Die errechnete Endgröße / The calculated output size
  $resized_width = 0;
  $resized_height = 0;

  // Der Vergrößeruntgs-/Verkleinerungsfaktor / The calculated resizing factor
  $factor_width = 0;
  $factor_height = 0;


  // Step 2: Überprüfe die Größe und ändere sie / Checking size and doing resize


  // Breite / Width operations
  if ($original_width > $desired_width)
    {
    $resized_width = $desired_width;

    // Berechne den Vergrößeruntgs-/Verkleinerungsfaktor und passe die Höhe an / Calculating the resizing factor and fitting the height to it
    $factor_width = $resized_width / ($original_width / 100);
    $original_height = ($original_height / 100) * $factor_width;
    }
    else
    {
    $resized_width = $original_width;
    }

  // Höhe / Height operations
  if ($original_height > $desired_height)
    {
    $resized_height = $desired_height;

    // Berechne den Vergrößerungs-/Verkleinerungsfaktor und passe die Breite an / Calculating the resizing factor and fitting the width to it
    $factor_height = $resized_height / ($original_height / 100);
    $resized_width = ($resized_width / 100) * $factor_height;
    }

    else
    {
    $resized_height = $original_height;
    }

  
  // Platz für Info/Link über dem Bild / Space for the info/link _over_ the image

  // Generiere den neuen Link zum Bild / Generating new image link
  echo '<br><a target="_blank" href="'.$media_src.'"><img src="'.$media_src.'" border="1" alt="'.$image_name.'" width="'.$resized_width.'"height="'.$resized_height.'"></a><br><br>';
  
  // Platz für Info/Link _unter_ dem Bild / Space for the info/link _under_ the image

  // Platz für den Variablen Test / Space for the variable check
?>
1.4
Die gewünschte Zielgröße kann hier festgelegt werden / The desired image size can be set here

Code: [Select]

  // Die gewünschte Bildgröße / The desired image size
  $desired_width = 800;
  $desired_height = 600;
1.5
Speichere die Datei und schau dir deine Gallerie an / Save the File and browse through your gallery


2. Zentrale Methode für alle Dateiformate / Central Method for all file types

2.1
Öffne 'dein4imagesordner'\includes\functions.php
Open 'your4imagesfolder'\includes\functions.php

2.2
Suche nach / Search for

Code: [Select]

if ($image_info = @getimagesize($src, $info)) {
      $width_height = " ".$image_info[3];
      $width = $image_info[0];
      $height = $image_info[1];
Füge danach ein / Insert below

Code: [Select]

  // Step 1: Definiere Variablen / Define variables


  // Sammle benötigte Bildinformationen / Getting required image informations
  $my_image_info = getimagesize ($media_src);

  // Speichere die gesammelten Daten / Saving gathered informations
  $original_width = $my_image_info[0];
  $original_height = $my_image_info[1];

  // Die gewünschte Bildgröße / The desired image size
  $desired_width = 800;
  $desired_height = 600;

  // Die errechnete Endgröße / The calculated output size
  $resized_width = 0;
  $resized_height = 0;

  // Der Vergrößeruntgs-/Verkleinerungsfaktor / The calculated resizing factor
  $factor_width = 0;
  $factor_height = 0;


  // Step 2: Überprüfe die Größe und ändere sie / Checking size and doing resize


  // Breite / Width operations
  if ($original_width > $desired_width)
    {
    $resized_width = $desired_width;

    // Berechne den Vergrößerungs-/Verkleinerungsfaktor und passe die Höhe an / Calculating the resizing factor and fitting the height to it
    $factor_width = $resized_width / ($original_width / 100);
    $original_height = ($original_height / 100) * $factor_width;
    }
    else
    {
    $resized_width = $original_width;
    }

  // Höhe / Height operations
  if ($original_height > $desired_height)
    {
    $resized_height = $desired_height;

    // Berechne den Vergrößerungs-/Verkleinerungsfaktor und passe die Breite an / Calculating the resizing factor and fitting the width to it
    $factor_height = $resized_height / ($original_height / 100);
    $resized_width = ($resized_width / 100) * $factor_height;
    }

    else
    {
    $resized_height = $original_height;
    }

    $width_height = 'width="'.$resized_width.'" height="'.$resized_height.'"';
2.3
Die gewünschte Zielgröße kann hier festgelegt werden / The desired image size can be set here

Code: [Select]

  // Die gewünschte Bildgröße / The desired image size
  $desired_width = 800;
  $desired_height = 600;
2.4
Speichere die Datei und schau dir deine Gallerie an / Save the File and browse through your gallery




Extensions (german / english):

1. Hinweistext mit/ohne Link oben/unten anzeigen (FÜR METHODE 1) / Show hint with/without link over/under the image (FOR METHOD 1)

a)
Öffne 'dein4imagesordner'\templates\media
Open 'your4imagesfolder'\templates\media

b)
Öffne das Template für den Datentyp, bei dem ein Hinweis angezeigt werden soll
Open the template for the file-type you wish to display a hint (jpg, png, gif...)

c)
Suche nach / Search for

Code: [Select]

  // Platz für Info/Link _über_ dem Bild / Space for the info/link _over_ the imageund / and

Code: [Select]

  // Platz für Info/Link _unter_ dem Bild / Space for the info/link _under_ the image
d) Ersetze einen oder beide Teile mit einem der nachfolgenden Stücke / Replace one or both parts with one of the parts below

Code: [Select]

// Hinweistext / Hint text (change the text according to you language)
echo 'Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!';

Code: [Select]

// Hinweistext (zentriert) / Hint text (centered) (change the text according to you language)
echo '<div align="center">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</div>';

Code: [Select]

// Hinweistext mit Link / Hint text with link (change the text according to you language)
echo '<a target="_blank" href="'.$media_src.'">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</a>';

Code: [Select]

// Hinweistext mit Link (zentriert) / Hint text with Link (centered) (change the text according to you language)
echo '<div align="center"><a target="_blank" href="'.$media_src.'">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</a></div>';
e)
Speichern und fertig / Save and exit


1. Hinweistext mit/ohne Link oben/unten anzeigen (FÜR METHODE 2) / Show hint with/without link over/under the image (FOR METHOD 2)

a)
Öffne 'dein4imagesordner'\templates\media
Open 'your4imagesfolder'\templates\media

b)
Öffne das Template für den Datentyp, bei dem ein Hinweis angezeigt werden soll
Open the template for the file-type you wish to display a hint (jpg, png, gif...)

c)
Suche nach / Search for

Code: [Select]

<!-- Template file for JPG Files -->
Füge darunter ein / Insert below
Bitte wähle den passenden code unter 1. c)  [nicht so einfügen, sondern befolgen ]
Please choose one of the codes under 1. d) [don´t paste this, just choose a code from 1. d ]

d)
Danach einfügen / Insert after

Code: [Select]

<br>
e)
Suche nach / Search for

Code: [Select]

<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
Danach einfügen / Insert after

Code: [Select]

<br>
f)
Danach einfügen / Insert after
Bitte wähle den passenden code unter 1. c)  [nicht so einfügen, sondern befolgen ]
Please choose one of the codes under 1. d) [don´t copy this, just choose a code from 1. d ]

d) Ersetze einen oder beide Teile mit einem der nachfolgenden Stücke / Replace one or both parts with one of the parts below

Code: [Select]

// Hinweistext / Hint text (change the text according to you language)
echo 'Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!';

Code: [Select]

// Hinweistext (zentriert) / Hint text (centered) (change the text according to you language)
echo '<div align="center">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</div>';

Code: [Select]

// Hinweistext mit Link / Hint text (change the text according to you language)
echo '<a target="_blank" href="'.$media_src.'">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</a>';

Code: [Select]

// Hinweistext mit Link (zentriert) / Hint text with Link (centered) (change the text according to you language)
echo '<div align="center"><a target="_blank" href="'.$media_src.'">Dieses Bild wird evtl. verkleinert dargestellt. Hier klicken um das Bild vollständig anzuzeigen!</a></div>';
e)
Speichern und fertig / Save and exit


3. Alle Variablen unter dem Bild anzeigen (FOR METHOD 1) / Display all variables under the image (FOR METHOD 1)

a)
Öffne 'dein4imagesordner'\templates\media
Open 'your4imagesfolder'\templates\media

b)
Öffne das Template für den Datentyp, dessen Größe geändert werden soll
Open the template for the file-type you wish to be resized (jpg, png, gif...)

c)
Suche nach / Search for

Code: [Select]

  // Platz für den Variablen Test / Space for the variable check
d)
Ersetze durch / replace with

Code: [Select]

  // Variablen Test / Variable check
  echo '<br><br>';
  echo 'original_width = '.$width.'<br>';
  echo 'original_height = '.$height.'<br>';
  echo 'factor_width = '.$factor_width.'<br>';
  echo 'factor_height = '.$factor_height.'<br>';
  echo 'resized_width = '.$resized_width.'<br>';
  echo 'resized_height = '.$resized_height.'<br>';
e)
Speichern und fertig / Save and exit




Bei Fragen, Problemen, Anregungen, Lob oder Kritik einfach hier in den Thread posten oder mir eine PN schicken.
If you have questions, problems, praise or criticism then please post in this thread.

BTW.: I´m german, so please forgive me for this bad (?) english. If u have problems to understand something, then just ask.

LG / Greets Maik

[KillerCookie]

hallo mark,
grundsätzlich finde ich deine kleine modi eine tolle sache... und es funktioniert natürlich einwandfrei .

was ich nicht so schön finde ist, dass man php code in eine html media template einschleust. kannst du
diesen code in die function.php einbauen?

gruss ivan

Ja, das ist durchaus möglich. Müsste ich mir morgen mal anschauen. Allerdings war das einfügen in die html Datei keine Ausflucht oder Zufall, sondern eher gewünscht. Ich finde es irgendwie angenehm, wenn man die reine Anzeige (und mehr ist es ja nicht) auch da steuert, wo sie IMO hingehört... im Template. Im Grunde errechnet man ja nur ohne große Umwege die Zielwerte und fertig.

Ich bastele natürlich trotzdem eine "zentralere" Lösung, schließlich soll ja jeder was davon haben.

*edit:
Fertig! Deine gewünschte Version ist jetzt unter Installation / Methode 2 zu finden, sowie Extension 2. Jetzt bin ich aber müde...

MfG Maik

[KillerCookie]

Hallo,
habe gerade noch einen Fehler im Post gefixt. Eine Zeile der 2. Methode war falsch und irgendwie war die Anleitung allgemein etwas "verschoben". Schade das es im Forum keine "Spoiler-Tags" gibt, damit wären die Anleitungen wesentlich übersichtlicher.

MfG Maik

[mawenzi]

... Spoiler Tags ... 
... welche Infos willst du denn hier mit den Spoiler Tags verstecken ...
... die du dann erst mit "mouse_text_select" zum Vorschein bringst ...
... und was soll hier im Forum dadurch übersichtlicher werden ...  :

[KillerCookie]

Ich dachte dabei an die einzelnen Schritte, die man dann "aufklicken" kann. wirkt bei langen Anleitungen übersichtlicher und wenn noch größere Erweiterungen hinzukommen, so bleibt trotzdem alles relativ übersichtlich, weil man ja nicht direkt die ganzen Codes sieht. Ob man sie nun für die einzelnen Schritte, oder bei großen Projekten für Addons benutzt das ist ja dann jedem selbst überlassen, aber die Möglichkeit fände ich trotzdem nett.

Bitte nicht falsch verstehen, ich will hier nicht am Forum rumnörgeln, sondern lediglich meine Meinung zum Thema kundtun.

MfG Maik

[flocke]

Vielen, vielen Dank! Ich durchforste schon eine Weile das Forum nach einer simplen Verkleinerungsmöglichkeit der Bilder. Dies ist die perfekte Lösung für mich.
Variante 2 läuft perfekt mit Version: 1.7.6

Gruß, flocke.

[KillerCookie]

Vielen, vielen Dank! Ich durchforste schon eine Weile das Forum nach einer simplen Verkleinerungsmöglichkeit der Bilder. Dies ist die perfekte Lösung für mich.
Variante 2 läuft perfekt mit Version: 1.7.6

Gruß, flocke.

Das hört man gerne. Viel spaß mit dem MOD.

MfG KillerCoookie

[paule]

Hallo Zusammen,

ich habe vor wenigen Tagen 4images installiert (1.7.6) Habe jetzt versucht die hier beschriebene Bildgrößen Begrenzung zu installieren (beide Methoden).
Bei beiden gibt es eine Fehlermeldung.
Fehler Methode2 : (Parse error: parse error in /Library/WebServer/Documents/4images/includes/functions.php on line 468)
Das ist die Zeile:  $my_image_info = getimagesize ($media_src);
Wer kann mir helfen?
Freue mich auf eine Antwort.

MfG Paule

[neomia]

Klasse.

Habe überall nach so einer Lösung gesucht.
Habe die erste Version genomen. Es klappt auch mit der aktuellen Version.

Danke.
Super.