Add Open Graph Image field to documents

[passioneight]

When using documents, we always need to add a property og-image for the client to set the og-image. This results in the following code for every project:

{% if document.property('og-image') %}
    {% do pimcore_head_meta().setProperty('og:image', host_url() ~ document.property('og-image').thumbnail('og-image').path) %}
{% endif %}

However, working with properties is quite cumbersome for almost every client. Especially, since there is no preview of the asset. Additionally, most clients try to find the setting in the SEO & Settings tab.

So, I propose adding an image field to the SEO & Settings tab, which can then be used for Open Graph. WDYT?

Note that the field should be called image (as opposed to ogImage), so it can be used in various contexts. For example, the same field could be used for teasers in a blog or in search results - as these teasers should use the same preview image anyway.

[dvesh3]

@passioneight why not use the html tags settings?

[passioneight]

While this is a solution for a tech-savvy person, we cannot assume that our client knows the proper syntax for this. Neither can we assume that they are willing to learn how to do this.

Additionally, the image is usually a thumbnail - so the client needs to know the thumbnail URL as well, which is not feasible.

[dvesh3]

Gotcha!! then I would go for some generic solution for improving these meta property settings, like splitting the single field into type field (predefined or possibility to define a manual one) and content field to hold the data. Would you like to contribute?

[passioneight]

Sounds good to me. I'm always willing to contribute, yet time is always sparse. I'll try my best to find some time, though it might actually take a while until I get to it.

I suppose we can convert this conversation into an issue for now and I'll try to create a PR at some point.

[dvesh3]

done #12399 😉 thanks!