Im Adminbereich alle Bilder mit einem data tag versehen und im Frontend ausgeben.

strub

Hallo

Habe schon vieles versucht, aber leider ohne Erfolg. Ich möchte wenn ein Post gespeichert wird, alle Bilder (Editor, Thmubnail) ein data Attribute hinzufügen, welches dann im Frontend auch ausgegeben werden soll versehen.

Hat denn da jemand eine gloreiche Idee. Besten Dank im voraus.

Werbepost

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

maxe

hast du dir die Custom Fields (Benutzerdefinierte Felder) auch mal angeschaut?

strub

Hey Danke Dir maxe für deinen Vorschlag.

Geht eben nicht. Ich möchte jedem Bild, egal ob Gallery Bild, Thumbnail etc. eine eindeutige ID geben, damit ich später in der Vorschau meinen "Picture Cropper" für jedes Bild einzeln anwenden kann.

Doch das scheint in dem Wordpress "Spagetthigecode" gar nicht so einfach zu sein. Vorallem ist das ganze so unübersichtlich aufgebaut mit Filtern und Actions, kommt denn da noch einer mit?

helix

Zuerst mal komme ich vor allem überhaupt nicht mit, was du eigentlich machen und erreichen willst. Das fängt mit deinem persönlichen linguistischen Spaghetticode an …
Also, ich weiß nicht, ob ich dich schon alleine auf der sprachlichen Ebene verstehe.
Wenn ja, dann weiß ich nicht, ob du zu kompliziert denkst oder ob ein paar smarte Möglichkeiten aus HTML5 bisher an mir vorbeigegangen sind …

Gruß
helix

danielgoehr

Zitat von strub

Ich möchte jedem Bild, egal ob Gallery Bild, Thumbnail etc. eine eindeutige ID geben

Ich habe zwar auch noch nicht ganz verstanden, warum du das machen willst und was du damit vorhast. Aber schau mal in die Tabelle "postmeta".
Wordpress gibt per default jedem hochgeladenen Bild eine eigene ID...

strub

Hey danke Euch allen für eure Antworten.

Ich glaube ich weiss nun wie ich mein Vorhaben umsetzen kann.

Schreibe eben mein erstes Plugin.

Das sollte dann wie folgt funktionieren:

Für jedes Theme kann man eine Datei erstellen wie die Bilder generiert werden sollen:

Nur demo:

PHP

return [


    'src' => [1200, 500],
    
    'srcset' => [
        '1200w' => 'src',
        '900w' => [900],
        '600w' => [600, 900]
    ],
    'sizes' => '100vw',
    
    'sources' => [
        [
            'media' => '(min-width: 1024px)',
            'srcset' => [
                '1200w' => 'src',
                '900w' => [900, 1200],
                '600w' => [null, 600]
            ],
            'sizes' => '80vw',
            'type' => 'image/webp'
        ],
        [
            'media' => '(min-width: 1024px)',
            'srcset' => [
                '1200w' => 'src',
                '900w' => [900, 500],
                '600w' => [600]
            ],
            'sizes' => '80vw'
        ]
    ]
    
];

Alles anzeigen

Dann beim erstellen eines Posts werden das erste mal alle Bilder generiert. Beim einem Update werden natürlich nur die genriert welche nicht schon erstellt worden sind oder wo sich die Crop daten verändert haben.

Dann kann mann jedes einzelne Bild, croppen wie man es will, in dem Post direkt, natürlich nur wenn man als Administrator angemeldet ist.

Die Bilder werden dann natürlich mit dem <picture> element versehen

b3317133

Evtl. hilft Dir auch noch https://make.wordpress.org/core/2015/11/1…-wordpress-4-4/ weiter, oder https://developer.wordpress.org/reference/func…add_image_size/

strub

Hey danke dir für die Links, diese habe ich auch schon angeschaut und waren auch nützlich.

Denn ich mache es noch so, dass man die Picture Daten je nach welcher 'size':

https://developer.wordpress.org/reference/func…post_thumbnail/

in einem Theme hinterlegt ist noch einzeln defnieren kann. Ist natürlich nur für das "Post Bild"

Besipiel:

PHP

// filename  pictures-product.php


return [


    'featured' => [
        
        // use the image size for different areas in your page
        
        'shop_thumbnail' => [ // default
        
            'src' => [1200, 1600], 
            
            'srcset' => [
                '1800w' => [1800, 900], // width and height.
                '2200w' => [800, 2200] // width only
            ]
        ],


        
        'shop_catalog' => [
        
            'src' => [1200, 1600], 
            
            'srcset' => [
                '1800w' => [1800, 900], // width and height.
                '2200w' => [800, 2200] // width only
            ]
        ],




        'shop_single' => [
        
            'src' => [1200, 1600], 
            
            'srcset' => [
                '1800w' => [1800, 900], // width and height.
                '2200w' => [800, 2200] // width only
            ]
        ]    
    
    ],




    'content' => [
        
        'src' => [1200, 1600], 
        
        'srcset' => [
            '1800w' => [1800, 900], // width and height.
            '2200w' => [800, 2200] // width only
        ]
    
    ],
    
    'content-gallery' => [
        
        'src' => [1200, 1600], 
        
        'srcset' => [
            '1800w' => [1800, 900], // width and height.
            '2200w' => [800, 2200] // width only
        ]
    
    ]
    
];

Alles anzeigen

strub

Weiss denn jemand wie man an die Bilder Daten kommt? So wie ich das sehe werden diese in drei Datenbanktabellen verteilt. Das ist doch total umständlich. Nichtsdestotrotz, so habe ich es mal. Aber eben irgendwie nicht sauber und wer weiss was WP da alles im Hintergrund macht um an diese Daten zu gelangen.

PHP

$thumbnailId = $this->toInt($this->inputData->get('_thumbnail_id', 0));
    
// get the meta data for the file
// https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata
$wpMetaData = wp_get_attachment_metadata($thumbnailId);
if ($wpMetaData === false) {
    return;
}
        
// get the post for post_title e.g
// https://developer.wordpress.org/reference/functions/get_post/
$wpPost = get_post($thumbnailId);
if ($wpPost === null) {
    return;
}


$wpImageAlt = get_post_meta($thumbnailId, '_wp_attachment_image_alt', true); // returns string

Alles anzeigen

Azrael_0815

Das ist doch gar nicht so schwer.

Erstmal fügst Du ein Custom Field zu Attachments hinzu:

https://code.tutsplus.com/articles/creat…ress--net-13076

Da gibst Du dann den Wert für Dein Data Field ein.

Und dann nutzt Du den Filter
wp_get_attachment_image_attributes ,

holst Den Wert aus dem Custom Field und gibst die Attribute plus data-Attribut zurück.

strub

Hey Danke Azrael für den Vorschlag. Leider nützt mir das nichts und ich brauch auch kein Custom Field. Denn das soll sich alles im Hintergrund abspielen.

Das Ziel ist es eben jedes Bild egal ob thumbnail, editor Bilder etc. in eine neue Datenbanktabelle zu speichern mit samt den Attributen, damit man später jedes Bild croppen kann oder aber auch nur zum Beispiel den "alt" Text zu ändern.

Aber lasst gut sein, so gehts auch. Huch dieses WP, ich brauch nun einen Kaffee :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Im Adminbereich alle Bilder mit einem data tag versehen und im Frontend ausgeben.

Jetzt mitmachen!