Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
infominer33 opened this issue Jun 2, 2019 · 6 comments

Comments

Projects
None yet
2 participants
@infominer33
Copy link
Contributor

commented Jun 2, 2019

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

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

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

@AngeloStavrow

This comment has been minimized.

Copy link
Owner

commented Jun 5, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 5, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 13, 2019

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

This comment has been minimized.

Copy link
Owner

commented Jun 13, 2019

Ah that seems pretty straightforward to port, nice find!

@infominer33

This comment has been minimized.

Copy link
Contributor Author

commented Jun 30, 2019

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:

web-work-tools/indieweb@1cc418a

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 14, 2019

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.

Example on a Post

On the Home Page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.