1

Blogger verfügt über einige Layoutdaten-Tags zum Abrufen von Post-Bildern, z. B. data:blog.postImageUrl (die die URL des ersten Bilds in Ihrem Post abruft) und data:blog.postImageThumbnailUrl (wodurch ein 70 × 70 px großes Vorschaubild des ersten Bilds in Ihrem Post generiert wird. Das ist zu klein, um es auf Facebook/Twitter/etc. zu verwenden.).Welcher Blogger-Vorlagen-Daten-Tag ruft das ursprüngliche, unbeschränkte Post-Image ab?

Beim Veröffentlichen eines Posts verwendet Blogger jedoch automatisch das erste Bild in Ihrem Post, um sein eigenes og:image Meta-Tag mit einer speziell angepassten und/oder zugeschnittenen Version Ihres Bildes zu generieren. Wichtig ist, dass dieses generierte Bild alle benutzerdefinierten Größenanpassungen oder Beschneidungen ignoriert, die Sie möglicherweise am Post-Image vorgenommen haben, indem Sie die s1600 in der URL (explained here) ändern und ein großformatiges Bild zurückgeben, das für die Freigabe in sozialen Medien geeignet ist. (Es beschneidet das Bild sogar bis zu einem 1,91: 1-Verhältnis, wie in Facebook empfohlen „Best Practices“.)

Hier ein Beispiel:

Originalbild URL (Größe: 600 × 450 :)
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/s1600/Montreal-Biodome-exterior.jpg

Resized Bild individueller Größenwert von w180 mit (für eine maximale Breite von 180 px):
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w180/Montreal-Biodome-exterior.jpg

Und hier ist das Bild, das Blogger autom.:Nein matisch erzeugt (geerntete bis 600 × 315): https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg

Hinweis, wie die automatisch erzeugte Bild seine eigene Größe Wert w1200-h630-p-k-no-nu verwendet, vollständig die w180 ignorierend I angegeben.


Das Problem für mich ist, dass ich auch Twitter "Zusammenfassung Card with Large Image" verwenden. Ich versuche zu spezifizieren, welche Bild-URL für den twitter:image Karte Meta-Tag verwenden Blogger Daten-Tags verwenden, etwa so:

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
OR 
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/> 

Abgesehen davon, dass die ersten (postImageThumbnailUrl), wie bei der oben erwähnt wird, ist viel zu klein, bei 70 × 70 px, während die zweite (data:blog.postImageUrl) die Bild-URL mit dem benutzerdefinierten Größenwert w180 abruft und ein Bild mit nur 180 px Breite zurückgibt - genauso nutzlos für die Weitergabe auf Twitter (die resultierende Twitter-Karte verwendet ein leeres Platzhalterbild).

Was ich für jetzt getan habe, ist das twitter:image Tag insgesamt zu entfernen, was Twitter zwingt, das og:image-Tag zu verwenden, so dass Link-Sharing funktioniert. Ich würde jedoch lieber den Tag twitter:image mit dem richtigen Bilddaten-Tag verwenden, wenn irgend möglich.

Das ist also meine Frage: Wer weiß, was der Daten-Tag ist, wenn ein solches vorhanden ist, um die große zu holen, abgeschnitten w1200-h630-p-k-no-nu Version einer Post Bild, dass Blogger für jede Stelle erzeugt? Wie so:

<meta expr:content='data.{ETC}' name='twitter:image'/> 

Welche, in einem Beitrag des obigen Bild verwenden, machen würde wie:

<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/> 
+1

Mögliches Duplikat von [So zeigen Sie Miniaturbilder mit höherer Auflösung in Blogger an] (https://StackOverflow.com/questions/45500573/How-to-display-higher-res-thumbnails-on-blogger) –

+0

Vielen Dank für Ihre Nachricht aus dieser Frage heraus; Ich hatte es bei meiner Suche nicht gesehen. Ich werde es später noch einmal überprüfen, wenn ich mehr Zeit habe und die angebotene Lösung testen kann, um zu sehen, ob sie zu meinem Problem passt. – Walter

+0

@PrayagVerma Ich habe es ausprobiert und es funktioniert perfekt (sobald ich aufgehört habe, es zu tippen). Problem gelöst; Ich habe die Lösung mit dem unten stehenden Arbeitscode veröffentlicht. Vielen Dank. Bearbeiten: Auch ich kann nicht scheinen, das Problem "doppelte Frage" mit dieser Frage zu lösen. Wie mache ich das? – Walter

Antwort

0

Mein Dank geht an Prayag Verma für den Hinweis auf ein similar existing question, die diese Antwort.Mit Hilfe der resizeImage operator, ich implementiert den folgenden Code zu meiner Vorlage:

<b:if cond='data:blog.postImageUrl'> 
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/> 
</b:if> 

, die in der Quelle der Post, macht wie:

<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/> 

Das ist genau das, was ich versuche, zu erhalten. Es übergibt den Twitter Validator mit Bravour. Problem gelöst.

Verwandte Themen