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

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.

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.

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.'">'; 


---

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.'" />';
?>

---

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.'">'; 


---

Dir fehlt noch

Code:

---

{{env::host}}

---

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">

---

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.

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 ;).

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

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

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

Zitat:

---

Zitat von Spooky

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.

Zitat:

---

Zitat von fr3d83

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.

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.'" />';
?>

---

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.

Zitat:

---

Zitat von fr3d83

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?

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.

Zitat:

---

Zitat von Spooky

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

Zitat:

---

Zitat von Sukrams

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.

Zitat:

---

Zitat von Spooky

Du musst es im Seitenlayout aktivieren.

---

huch, Doku falsch gelesen. DAnke!

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.

Zitat:

---

Zitat von neelix

Da ich aber keinen Facebook-Account habe(n will), dann ich nicht testen, ob das auch sauber funktioniert.

---

https://developers.facebook.com/tools/debug/

Da war ich auch schon.

Zitat:

---

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.

---

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">
...

---