Gif-animiertes Bild in Portfolio

    Hallo zusammen

    Ich möchte gerne GIF-animierte Bilder in meine Portfolio-Seite einfügen. Ist das überhaupt möglich? Als Beispiel habe ich euch eines auf meine Website geladen: http://oola.ch/portofolio Es geht um den Vogel oben links (Praxis für innere Weisheit - Logo-Gestaltung). Anbei schicke ich euch das GIF-animierte Bild mit (ist nur ein Beispielbild mit extra-schneller Animation ;).

    Beim Hochladen des Bildes sehe ich auf der Portfolio-Bearbeitungsseite unter Beitragsbild das Bild blinken, in der Vorschau und live passiert aber nichts. Ich arbeite mit dem Theme limitless, WordPress 4.7.1.

    Vielen Dank und sonnige Grüsse
    Yvonne

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo Yvonne,

    also erstmal empfehle ich Dir dringend ein Update deiner WordPress-Version auf die Neuste durchzuführen, da die Version 4.7.1 über bekannte Sicherheitslücken verfügt. Und GIFs funktionieren in WordPress nur in der Originalgröße. Den Grund kannst du u.a. hier nachlesen.

    Viele Grüße,
    Frank

    WordPress Service & Support

    Einmal editiert, zuletzt von forcemedia (5. April 2017 um 13:07)

    Hallo Frank

    Herzlichen Dank für deine schnelle Antwort. Update habe ich soeben gemacht. :-) Die Bildgrösse habe ich auch auf Originalgrösse 300 x 500px angepasst und tatsächlich ist es jetzt in der Portfolio-Unterseite animiert: http://oola.ch/portfolio/logo-entwicklung-innere-weisheit

    Auf der Übersichtseite jedoch immer noch nicht: http://oola.ch/portofolio

    Eigentlich möchte ich das Gif gerne auf der Übersichtsseite animiert sehen. Gibt es dafür einen Trick? ;-)

    Danke dir.

    Liebe Grüsse
    Yvonne

    Bekomme ich jetzt keine Antwort mehr? :-( ;-)

    Ich möchte, das GIF auf der Portfolio-Übersichtsseite animieren (Vogel oben links): http://oola.ch/portofolio
    Beim Reinklicken in das Portfolio ist das Gif animiert, nicht aber in der Übersichtsseite. Bildgrösse stimmt. Gibt es dafür einen Trick? Ich wäre sehr froh um Hilfe. :-)

    Vielen Dank und einen schönen Tag,
    Yvonne

    Zitat von yvonne@smilla

    Bekomme ich jetzt keine Antwort mehr? :-( ;-)

    Mir persönlich macht es keinen großen Spaß, mir zwitschernde und blinkende Gifs anzusehen, deswegen sehe ich eigentlich auch keine Notwendigkeit, mir das daraufhin anzusehen, warum es nicht so zwitschert und blinkt, wie du dir das vorstellst.
    Eigentlich unwichtig, meine Befindlichkeit. Könnte aber sein, dass es noch mehren hier so geht (und deswegen die Antworten spärlich ausfallen).

    Deine Angabe, Originalgröße sei 300 x 500 px ist Quatsch, tatsächlich hat das Bild eine Größe von 500 x 300 px.
    Wäre nichts aufsehenerregendes, aber von einem Text- und Grafik-Atelier erwarte ich eigentlich, dass gewisse Standards verinnerlicht sind.

    Tatsächlich hast du die Antwort schon bekommen in Post #2 von forcemedia. Du musst das Bild in der Originalgröße einbinden (und das heißt auch, in der Originalgröße anzeigen lassen). Dein Bild wird auf 100% skaliert – des Elternelements (CSS lernen).

    Gruß
    helix

    Hallo Helix

    Danke für dein Feedback. Hoppla! :grin: Die geschmackliche Meinung sollte einen hoffentlich nicht darin beeinflussen, zu antworten oder eben nicht. ;-) Aber zu deiner Beruhigung: Das mit dem Zwitschervogel war nur ein Beispiel, damit ihr seht, um was es mir geht. Ich arbeite an einer Website, bei dir ich gerne die Team-Mitglieder im ähnlichen Stil, wie auf dieser Seite https://www.dachcom.com/ueber-uns/team/ publizieren möchte.

    Tatsächlich bin ich Grafikerin und Texterin und nicht Web-Designer und schon gar nicht Programmiererin. Deshalb ist auch mein Verständnis für CSS klein bis teilweise nicht vorhanden. Meiner Meinung nach ist 300x500px die gleiche Grösse wie 500x300px, ausser dass ich mich hier im Forum vertippt habe und zuerst die Höhe statt die Breite genannt habe. Vielleicht verstehe ich aber auch wirklich gar nix und werde mir deshalb sonst irgendwo Hilfe holen. Danke jedenfalls für die Zeit, die du für deine Antwort aufgewendet hast. :-)

    Sonnige Grüsse
    Yvonne

    Da WP leider nicht mit animierten Bildern umgehen kann (was allerdings nicht so schwierig wäre mit Imagick), werden diese nur mit der ersten Layer gecroppt. Das einfachste wäre jetzt, wenn du das gecroppte Bild, welches sich im upload Folder befindet, mit dem animierten Gif, welches du z.B. mit PSD die Grösse anpasst, überschreibst. Hoffe verstehst was ich meine. Ist natürlich ein bisschen umständlich.

    Hi strub

    Vielen Dank für deine konstruktive Hilfe, da bin ich echt dankbar! Ich bin mir nicht sicher, ob ich dich richtig verstehe: Das Gif-Bild, welches auf der Unterseite (http://oola.ch/portfolio/logo-entwicklung-innere-weisheit) animiert ist, ist genau das gleiche, wie auf der Übersichtsseite, wo es aber nicht animiert wird (http://oola.ch/portofolio). Ich lade es als Beitragsbild hoch und Wordpress verwendet das gleiche Bild automatisch für Übersichts- und Unterseite. Ich kann es also nicht individuell anpassen oder überschreiben.

    Aber meinst du vielleicht, ich soll die php-Datei des Portfolio-Templates (in meinem Fall "masonary.php" unter wp-content > Themes > limitless > templates > portfolio-templates) suchen und darin den Namen des Bildes überschreiben? In masonary.php finde ich jedoch nichts. Ist es vielleicht eine andere php-Datei? Sorry, ich bin wirklich kein Crack in diesem Bereich.... :???:

    lg und danke, Yvonne

    Nein, das Bild welches eben nicht animiert ist weil WP das nicht kann:

    /wp-content/uploads/2017/04/PF_Oola_Innere-Weisheit_Logo_300px_neu-500x300.gif


    Nun nimmst Du z.B. Photoshop und nimst dein original animertes Bild. Dieses skaliert/zuschneidest Du dann eben auf die 500x300px.

    Danach abspeichern und überschreibst es eben mit dem Bild oben (gleicher Namene geben) mittels FTP.

    Was Du auch versuchen könntest wäre eine Änderung im Theme in der Datei [FONT=courier new]limitless/templates/portfolio-masonry.php[/FONT], am besten natürlich über ein Child-Theme.

    Alt:

    Code
    $ar = wp_get_attachment_image_src( $id , array(9999,9999) );

    Neu:

    Code
    $ar = wp_get_attachment_image_src( $id , 'full' );

    Ich danke euch allen ganz herzlich für eure Hilfe. Aber ich glaube, wir schliessen hier das Thema. Das Bild hat schon seit dem dritten Beitrag am 5.4. die Originalgrösse 500x300px (siehe Bilder im Anhang).

    Auch den Code habe ich auf Empfehlung von b3317133 geändert (danke) ;-). Es klappt immer noch nicht. Ich kann mich auch mit einem statischen Bild auf der Übersichtsseite zufrieden geben. Eure Inputs waren aber alle sehr hilfreich. Vielen Dank. :grin:
    Sonnige Grüsse
    Yvonne

    PS: Jetzt kann ich auch den Flattervogel wieder entfernen auf meiner Beispielseite. :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden