Contao-Camp 2024
Ergebnis 1 bis 26 von 26

Thema: Open Graph wie og:image anzeigen?

  1. #1
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard Open Graph wie og:image anzeigen?

    Hallo,

    ich möchte mit folgendem Code, mein Bannerbild im og:image Tag anzeigen lassen:

    PHP-Code:
    <?php
        
    if($GLOBALS['og:image'])
            echo 
    '<meta property="og:image" content="'.$GLOBALS['og:image'].'" />';
        else if(\
    Contao\FilesModel::findByUuid($GLOBALS['objPage']->pageImage)->path)
            echo 
    '<meta property="og:image" content="{{env::url}}/'.\Contao\FilesModel::findByUuid($GLOBALS['objPage']->pageImage)->path.'" />';
        else
            echo 
    '<meta property="og:image" content="{{env::path}}android-chrome-512x512.png" />';
        
    ?>
    Aber ich bekomme nur das alternativbild angezeigt, woran liegt das?

    LG & Danke

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Löst dein Problem zwar nicht direkt, aber alternativ könntest du die social_images Extension verwenden. Da kannst du pro Seite ein dediziertes og:image angeben und es werden auch automatisch die Teaser Bilder von News & Events als og:image ausgegeben.

  3. #3
    Contao-Fan Avatar von Kopfnuss
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    307
    Partner-ID
    11375
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wo bindest du das Skript den ein?
    Ich hatte mal das Probleme, das ich eine og:image im Seitentemplate einbinden wollte. Das ging aber nicht da das Image noch nicht geladen war. Hab es dann im Template für Events gemacht. Vielleicht hilft dir das weiter da deine Abfrage immer nein ergibt.

  4. #4
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Ich mache die Abfrage in der fe_page.

    Würde es denn gehen, wenn in meinem Banner template das og:image definiere, so ungefähr:

    PHP-Code:
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$img.'">'

  5. #5
    Contao-Fan Avatar von Kopfnuss
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    307
    Partner-ID
    11375
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja im Prinzip so wie du das geschrieben hast. Must halt das Bild über die verfügbare Variable finden.
    Du kannst dir alle Variablen anzeigen lassen über
    Code:
    <?php $this->showTemplateVars(); ?>
    So sah das bei mir aus:
    PHP-Code:
    <?php
    $envurl 
    $this->replaceInsertTags'{{env::url}}' );
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$envurl.'/'.$this->singleSRC.'" />';
    ?>
    Geändert von Kopfnuss (23.10.2018 um 11:34 Uhr)

  6. #6
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    So klappt es bei mir, nur die Domain wird noch nicht angezeigt:

    PHP-Code:
    $envurl Contao\FilesModel::findByUuid($this->field('image')->value())->path;
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="{{env::path}}'.$envurl.'">'

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Dir fehlt noch
    Code:
    {{env::host}}

  8. #8
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Komischer weise steht dann folgendes im Quellcode:

    HTML-Code:
    <meta property="og:image" content="{{env::host}}files/theme1/media/images/solutions/supplies/Head_Loesungen_Start.jpg">

  9. #9
    Contao-Fan Avatar von Kopfnuss
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    307
    Partner-ID
    11375
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das inserttag wird in php nicht ausgegeben. Du musst replaceinserttag nutzen. Schau mein Beispiel an. Bin gerade am Handy sonst hätte ich es dir geschrieben.

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Alle Insert Tags sollten vor dem senden zum Browser ersetzt werden.

    @fr3d83 ich würde dir weiterhin empfehlen das Ganze über die social_images Extension zu machen .

  11. #11
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    jetzt habe ich es verstanden, super, es klappt bei mir.

  12. #12
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Gibt es noch eine Möglichkeit das Bild auf eine bestimmte Auflösung zu Cropen?

  13. #13
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Ja... nimm die social_images Extension, wie ich schon zwei mal gesagt habe

  14. #14
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Ja... nimm die social_images Extension, wie ich schon zwei mal gesagt habe
    Ich möchte aber nicht jede Seite noch einmal einzeln anfassen und das Bild definieren, über das template geht das doch einfacher und mann muss nicht eine Erweiterung installieren und nicht immer ewig schauen, ob nach der Installation noch alles so funktioniert wie es soll.

  15. #15
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von fr3d83 Beitrag anzeigen
    Ich möchte aber nicht jede Seite noch einmal einzeln anfassen und das Bild definieren
    Das könntest du mit einem einzelnen SQL query erledigen.

    Aber du müsstest nicht mal das machen. Den selben Code, den du jetzt hast, könntest du auch mit der social_images Extension verwenden. Nur verwendest du stattdessen $GLOBALS['SOCIAL_IMAGES']. In diesem globalen Array werden die og:image Bilder gesammelt - dort kannst du einfach eigene hinzufüen. Die Extension übernimmt für dich dann die Ausgabe - für die du eben auch eine Bildgröße angeben kannst.

  16. #16
    Contao-Fan Avatar von Kopfnuss
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    307
    Partner-ID
    11375
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Falls du das immer noch selber machen möchtest.

    PHP-Code:
    <?php
    $width  
    "851";  /** * new width */
    $height "315";  /** * new height */
    $mode   'center_center'/** * modes available: proportional, box */
    $target null;   /** * target for new images default = null (system/html/) */
    $newImage $this->getImage($this->src$width$height$mode$target);
    $envurl $this->replaceInsertTags'{{env::url}}' );
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="'.$envurl.'/'.$newImage.'" />';
    ?>

  17. #17
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Ja doch aber ich möchte das einfach über das template lösen und nicht noch eine eventuell zusätzliche Fehlerquelle für mein CMS haben.

  18. #18
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von fr3d83 Beitrag anzeigen
    Ja doch aber ich möchte das einfach über das template lösen und nicht noch eine eventuell zusätzliche Fehlerquelle für mein CMS haben.
    Ist Code, den nur du selbst verwendest nicht eine größere Fehlerquelle als Code, der von vielen benutzt und gewartet wird?

  19. #19
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    621

    Standard

    Für mich nicht, denn da weis ich genau wo ich ihn eingesetzt habe und wo er ausgeführt wird, bei der Erweiterung weis ich nicht, was eventuell überschrieben wird oder geädnert wird. Denn auch wenn viele es nutzen, sind doch meist die CMS und Serverumgebungen nicht immer gleich.

    Bei einem neuen Projekt bezeihe ich sowas gerne mit ein aber nicht bei einem laufenden größeren System.

  20. #20
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Ja... nimm die social_images Extension, wie ich schon zwei mal gesagt habe
    Ich grätsche hier mal eben rein. Ich habe die bei mir installiert, da ich bei den Nachrichten und Events (und dann auch bei den Seiten ggfs.) ein besseres Handling der og:images haben möchte. Wenn ich aber jetzt die ERweiterung installiere und nichts weiter mache, erscheint bei der News kein og:image. Muss ich da noch weiter was einstellen?

    Die Eingaben für die Seiten, sind ja eigentlich nur für die Seitenstruktur oder?

    Viele Grüße
    Markus

  21. #21
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von Sukrams Beitrag anzeigen
    Ich grätsche hier mal eben rein. Ich habe die bei mir installiert, da ich bei den Nachrichten und Events (und dann auch bei den Seiten ggfs.) ein besseres Handling der og:images haben möchte. Wenn ich aber jetzt die ERweiterung installiere und nichts weiter mache, erscheint bei der News kein og:image. Muss ich da noch weiter was einstellen?
    Du musst es im Seitenlayout aktivieren.

  22. #22
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Du musst es im Seitenlayout aktivieren.
    huch, Doku falsch gelesen. DAnke!

  23. #23
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    837

    Standard

    Hallo zusammen,

    ich habe bei meinem Projekt diese Erweiterung im Einsatz.
    Da ich aber keinen Facebook-Account habe(n will), dann ich nicht testen, ob das auch sauber funktioniert.

    Gleiches gilt für Twitter.

    Wenn von euch vllt. mal jemand schauen könnte: https://www.bergischer24stundenlauf.de/

    Danke.

  24. #24
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von neelix Beitrag anzeigen
    Da ich aber keinen Facebook-Account habe(n will), dann ich nicht testen, ob das auch sauber funktioniert.
    https://developers.facebook.com/tools/debug/

  25. #25
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    837

    Standard

    Da war ich auch schon.

    Mit dem Sharing Debugger kannst du dir ansehen, wie dein Inhalt angezeigt wird, wenn du ihn auf Facebook teilst. Anschließend kannst du Probleme mit deinen Open Graph-Tags beheben.
    Melde dich bei Facebook an, um dieses Tool zu verwenden.

  26. #26
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    Ich habe den von Code oben für meine News angepasst.

    Template news_full.html5:
    PHP-Code:
    <?php
        $width 
    1200;
        
    $height 630;
        
    $container System::getContainer();
        
    $rootDir $container->getParameter('kernel.project_dir');
        
    $ogimage $container
            
    ->get('contao.image.image_factory')
            ->
    create(\System::urlEncode$this->singleSRC ), [$width$height'center_center'])
            ->
    getUrl($rootDir);

        
    $GLOBALS['TL_HEAD'][] = '<meta property="og:url" content="' . \Environment::get('url') . '/' . \Environment::get('request') . '" />';
        
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image" content="' . \Environment::get('base') . $ogimage '" />';
        
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image:width" content="' $width '" />';
        
    $GLOBALS['TL_HEAD'][] = '<meta property="og:image:height" content="' $height '" />';
        
    $GLOBALS['TL_HEAD'][] = '<meta property="og:type" content="article" />';
    ?>

    <div class="layout_full block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
    ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •