Bilder hochladen & ausgben und zurechtschneiden

[Chris1996]

Ein Problem ist, wenn ich ein Bild hochlade und dieses mir auf der Seite in klein ausgeben lasse ist, dass die Bilder verzerrt dargestellt werden, das liegt daran, dass ich nie weiß ob ein Bild im Hochformat oder Querformat vorliegt. Mein Platz pro Bild ist 158px × 125px

In diversen Tutorials habe ich zwar gelesen dass ich mit width:100px und height:auto erreichen kann, dass es mir die Höhe passend der Breite errechnet allerdings habe ich dann keine klare Struktur mehr auf meiner Seite.

Weiter habe ich gelesen, dass man ein Bild beim Upload verkleinern lassen kann. Meine Frage ist nun, gibt es hier fertige Scripte die man einsetzten sollte und was macht das Script z.B. wenn ich sage, alle Bilder sollen 158px × 125px haben. Was passiert  aus einem Hochformat? Mein Gedanken ist, er schneidet einfach oben / unten und links / rechts etwas ab, was natürlich unter umständen sehr scheiße aussehen könnte. Gibt es hier eine Möglichkeit zu sagen, schneide bitte nur unten und rechts etwas ab bzw. oben und links?

[Encoder]

Gibt es hier eine Möglichkeit zu sagen, schneide bitte nur unten und rechts etwas ab bzw. oben und links?

Natürlich gibt es die, das musst du halt so programmieren oder einen Schnipsel finden der das kann.

was macht das Script z.B. wenn ich sage, alle Bilder sollen 158px × 125px haben.

Mal überlegen... Dann haben möglicherweise alle Bilder tatsächlich diese Maße? Sofern das Script tut was du sagst :-)
Wie es das macht, ob es abschneidet oder skaliert, kommt aufs Script an. Es gibt nicht *das eine* allmächtige Script dem du dich unterwerfen musst.

Ich würde mir dazu den Skalierungsfaktor ausrechnen wenn das Bild auf die neue Höhe skaliert wird, sowie den wenns auf die neue Breite skaliert wird. Den kleineren Faktor nimmst du, dann passt das Bild auf jeden Fall in die vorgegebenen Maximalwerte.
Dürfte ne Sache von vielleicht 10-15 Zeilen Code sein.

[Bobby]

Moin

Wie es das macht, ob es abschneidet oder skaliert, kommt aufs Script an. Es gibt nicht *das eine* allmächtige Script dem du dich unterwerfen musst.

Ich würde mir dazu den Skalierungsfaktor ausrechnen wenn das Bild auf die neue Höhe skaliert wird, sowie den wenns auf die neue Breite skaliert wird. Den kleineren Faktor nimmst du, dann passt das Bild auf jeden Fall in die vorgegebenen Maximalwerte.
Dürfte ne Sache von vielleicht 10-15 Zeilen Code sein.

Es gibt tatsächlich nicht das _eine_ Script, aber man darf Tipps geben. Ich finde es immer schön wenn man die Thumbs auf Grundlage eines Seitenverhältnisses selbst zuschneiden darf. Mit jQuery gibt es ein schönes Plugin namens Jcrop

Das bietet recht viel Funktionaliät und ist recht flexibel, und eben genau die festlegung des Verhältnisses ist auch mnöglich.

Gruß Bobby

[M.]

Mahlzeit,

Es gibt tatsächlich nicht das _eine_ Script, aber man darf Tipps geben. Ich finde es immer schön wenn man die Thumbs auf Grundlage eines Seitenverhältnisses selbst zuschneiden darf. Mit jQuery gibt es ein schönes Plugin namens Jcrop

Das hilft dir allein aber auch nicht. Wenn du kein Backend hast, das den Zuschnitt durchführt, passiert gar nix. Sollte man bei solchen Tipps vielleicht noch erwähnen.

[Chris1996]

Hallo,

Es gibt tatsächlich nicht das _eine_ Script, aber man darf Tipps geben. Ich finde es immer schön wenn man die Thumbs auf Grundlage eines Seitenverhältnisses selbst zuschneiden darf. Mit jQuery gibt es ein schönes Plugin namens Jcrop

das ist eine echt tolle Funktion nur ich denke für den Beginn ist das zu schwer einzubauen. Vor allem lade ich mit einem Upload mehrere Bilder hoch.

[Bobby]

Moin

das ist eine echt tolle Funktion nur ich denke für den Beginn ist das zu schwer einzubauen. Vor allem lade ich mit einem Upload mehrere Bilder hoch.

oh, so schwer ist das gar nicht. Mehrere Bilder? Wie viele denn?

Gruß Bobby

[Chris1996]

oh, so schwer ist das gar nicht. Mehrere Bilder? Wie viele denn?

Es kommt immer drauf an, wie viele Bilder ich in einem Galerie habe, durch ein Klick auf mehr kann ich weitere Bilder in mein angelegtes Album laden. Pro Album sind es meistens 5 - 10 Bilder

[Chris1996]

Hallo Bobby,

ich hoffe dieser Beitrag wird noch gelesen. Hab mir das Script etwas genauer angesehen, nur ich verstehe es noch nicht ganz.

Mein Gedanke sieht wie folgt aus:

• User kommt auf meine Seite
• Bild wird hochgeladen (in einem Zwischenordner)
• Das Bild wird dem User angezeigt und hat eine ID „target“ damit sage ich dem jQuery, dass das Script gestartet werden soll. User zieht sich einen Ausschnitt bis es passt:

http://deepliquid.com/content/Jcrop_Manual.html

Mit „setSelect“ kann ich wohl sagen, wie groß das Bild sein darf, so dass der nur den Ausschnitt wählen darf richtig?

Jetzt aber meine Frage, nun hat der User den Ausschnitt gestgelegt, wie geht es nun weiter? Nun muss ich ja das "neue Bild" wieder hochladen und in einen weiteren Ordner schieben.

Verstehe ich das richtig und wenn ja, wie wende ich dieses an? Sprich ich habe ja kein Uploadfile mehr.

[M.]

Mahlzeit,

Jetzt aber meine Frage, nun hat der User den Ausschnitt gestgelegt, wie geht es nun weiter? Nun muss ich ja das "neue Bild" wieder hochladen und in einen weiteren Ordner schieben.

Nicht nur hochladne, du musst es auch noch zuschneiden. jCrop übergibt lediglich die Koordinaten an eine serverseitige Logik wie z.B. ein PHP-Script

[hotti]

Ein Problem ist, wenn ich ein Bild hochlade und dieses mir auf der Seite in klein ausgeben lasse ist, dass die Bilder verzerrt dargestellt werden, das liegt daran, dass ich nie weiß ob ein Bild im Hochformat oder Querformat vorliegt. Mein Platz pro Bild ist 158px × 125px

Eine mögliche Lösung führt Dich zu einem quadratischen Kleinbildformat (Thumbnail). Bei einem Quadrat ist eine Verzerrung weniger auffällig. Ich habe das mal für einen Shop gemacht, da gab es extrem hochformatig/schmale Bilder, die sahen als Thumbnail² immer noch ansprechbar aus und wenn der Besucher ins Detail guckt, ist er dann nicht nur schlechthin überrascht sondern positiv.

[T-Rex]

Deine Ausgangslage ist zu Allgemeingehalten. Ich denke aber du kannst es nicht präzisieren.
Wenn da ein Bild mit 2000 x 3000 kommt wo jeder Pixel enorm wichtig ist, kann man schlicht nichts skalieren.
Ansonsten würde ich die Bilder auf die gewünschte Maße zurecht schneiden und dann skalieren. Dann würde ich prüfen bei wievielen Bildern das Ergebnis passt. So 5 % Fehlerquote wären wie ich finde akzeptabel. Wenn du immer schön aus der Mitte ausschneidest sollte das Ergebnis schon passen.

Die Lösung mit dem auto height (was die default einstellung ist), ist eine schlechte Lösung. Die hatte ich bei einem projekt auch mal. Subjektiv war es mist, da jede Seite je nach Bildgröße anders aussah. Sprich, der User hat keine klare Struktur. Objektiv war es ein desaster, da unheimlich viele Fehler aufkamen bzw. musste man enorm viele Fälle berücksichtigen (und das ohne responsives Design). Sofern du keine Seite hast wo die Bilder eine tragende Rolle haben (z.B. Fotogallerien) würde ich die Bilder immer zurecht schneiden!

Gruß
Abstiegsbedrohter
T-Rex

[Chris1996]

Hallo,

vielen Dank für eure Hilfe! Ich habe nun entschlossen ich scalliere nicht alle Bilder auf eine Größe, lediglich die Breite passe ich an. Das ganze sieht dann wie folgt aus:

https://www.seniorbook.de/fotowand So eine Fotowand würde ich auch gerne erstellen. Hab mir den Quelltext auch schon angeschaut, aber ich werde daraus nicht schlau wie ich dieses in HTML und CSS umsetzten kann.

Gibt es eine einfache Möglichkeit dieses so realisieren? vielen Dank nochmals für eure Hilfe!

[Chris1996]

Hallo,

ich denke, damit kann ich leben oder?

[Chris1996]

Hallo,

hab es wohl doch nicht wirklich geschafft, wenn ungleiche Bilder kommen, dann sieht es so aus:

kann ich das erreichen, dass die linken nach oben rutschen?

Mein CSS sieht so aus

  
.bild {  
    border: 1px solid #7A7A7A;  
    display: block;  
    padding: 3px !important;  
	background-size:contain;  
	margin-bottom:20px;  
}  

Mein HTML sieht so aus

  
			<div style="width:180px; float:left;">  
			<div>  
            	<img src="media/<?php echo $bilder_vorschau->bild; ?>" class="bild">  
            </div>  
            </div>  

[hotti]

Idee: Packe denjenigen der Bilder einstellt, beim Ehrgeiz! D.h., er legt den Ausschnitt selbst fest, und das gleich im Browser, er wird das gerne machen: Bild in den Browser schieben, Maske drüberschieben, Klick, fertig. Stichwort: canvas.

[Chris1996]

Idee: Packe denjenigen der Bilder einstellt, beim Ehrgeiz! D.h., er legt den Ausschnitt selbst fest, und das gleich im Browser, er wird das gerne machen: Bild in den Browser schieben, Maske drüberschieben, Klick, fertig. Stichwort: canvas.

Das ist für mich viel zu schwer, bekomme ich nie und nimmer hin. Gibt es denn keine einfache Möglichkeit das im CSS umzusetzten?

[hotti]

Idee: Packe denjenigen der Bilder einstellt, beim Ehrgeiz! D.h., er legt den Ausschnitt selbst fest, und das gleich im Browser, er wird das gerne machen: Bild in den Browser schieben, Maske drüberschieben, Klick, fertig. Stichwort: canvas.

Das ist für mich viel zu schwer, bekomme ich nie und nimmer hin.

Sag das nicht, wäre doch geil, hat noch nicht einmal fatzebuck ;)

[Chris1996]

Sag das nicht, wäre doch geil, hat noch nicht einmal fatzebuck ;)

zwischen "geil" und realität liegen leider welten ;)

[tk]

Hallo hotti,

Sag das nicht, wäre doch geil, hat noch nicht einmal fatzebuck ;)

Doch. Beim Bearbeiten des Profilbildes lässt sich der anzuzeigende Ausschnitt festlegen (je nachdem welches Format das hochgeladene Bild hat).

Gruß,
Tobias

[Chris1996]

Ich hab nee andere Idee, wie wäre es, ich mache drei DIVs und platziere die nebeneinander, beim Ausgeben, sprich in meiner „foreach“ Schleife sage ich, das erste Bild in das erste DIV, das zweite Bild in das zweite DIV, das dritte Bild in das dritte Bild, das vierte Bild in das erste DIV usw. Wäre dieses Möglich? Wenn ja, ist dieses sehr schwer umzusetzten?

Mein Schleife sieht derzeit so aus:

  
<?php  
foreach($_ausgabe_bilder as $bilder):  
?>  
xxxxx  
<?php  
endforeach;  
?>