Twitter \ OG \ Header Images [Feature Request]

infominer33 commented 5 years ago

First of all, let me say THANK YOU, for this Gorgeous Indieweb enabled Hugo Theme! I came over from Jekyll just to get here :)

Is your feature request related to a problem? Please describe.

Twitter \ OG Cards are not properly populating.

I also would love the option to include a feature image both on the homepage and in the post.

Describe the solution you'd like

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

I'm new to hugo, so there's likely a popular plugin or include I can insert, but I haven't found one to work, yet.

Describe alternatives you've considered I'm open to anything, I'll be exploring the question more deeply, but wanted to say thank you as much as ask for a feature request.

Additional context

https://infominer.id/web-work/tags/indieweb/

Thanks again! Look forward to getting to know your theme, and indieweb better!

AngeloStavrow commented 5 years ago

Thanks for opening this! You're right that generally speaking, meta tags for the site aren't populating properly — I recently discovered https://www.heymeta.com/ as a good way to verify this working on another site, and there are a bunch of things that could be improved.

infominer33 commented 5 years ago

yes, I've been discovering that there is code for that, but haven't examined it closely.

I'm pretty new to static site development, so I'd eventually dig in to see what could be done with it. I'm still settling into the feel for Hugo.

Just lately I've been seeing what indieweb themes are available for whatever SSG, and seeing where they're at collectively... and let my interest in indieweb drive my heaviest habit: independent web-publishing.

I'm most excited with learning how to make use of all the awesome indieweb markup you ensure each page is wrapped with :D

infominer33 commented 5 years ago

So, would probably need some tweaking for hugo...

However, I just dropped this include into Jekyll-Indieweb and it works great!

Ultimately I will try and see about integrating the header image functionality like Minimal mistakes does, also...

for header images it simply uses the whole width of the page between the header and the content.

AngeloStavrow commented 5 years ago

Ah that seems pretty straightforward to port, nice find!

infominer33 commented 5 years ago

Ok, Now I have figured out twitter cards which choose the image from the config file (if params:images is set) and\or the page level if images variable provided in the front matter:

    <!-- Twitter Cards-->
    <!-- Twitter summary card with large image must be at least 280x150px -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="{{ with .Params.images }}{{ . }}{{ else }}{{ .Site.Params.images }}{{ end }}"/>
    <!-- Twitter Card data -->
    <meta name="twitter:title" content="{{ .Title }}"/>
    <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
    {{ with .Site.Social.twitter }}<meta name="twitter:site" content="@{{ . }}"/>{{ end }}
    {{ with .Site.Social.twitter_domain }}<meta name="twitter:domain" content="{{ . }}"/>{{ end }}

this is now live on my site:

https://github.com/web-work-tools/indieweb/commit/1cc418a0e278a87bccb88799c8e0bc11c8405124

which can be verified by checking the source of https://web-work.tools/indieweb and that of https://web-work.tools/indieweb/resources

I didn't include in a pull request, since this example assumes you have title description and image set in the params of config.yml

It's simple and gets the job done

infominer33 commented 5 years ago

I just wanted to include, because it's not obvious if you don't visit the site, but I didn't just pass that image variable through to the og_image, but also have set a header image on each page.

I don't know enough CSS to make this proper, but I'm happy with it for now.. I feel like I got quite a lot of value from adding a few simple lines of code.

AngeloStavrow / indigo

Twitter \ OG \ Header Images [Feature Request] #44

Example on a Post

On the Home Page