Header image aspect ratio depends on excerpt length #3000

DanielSank · 2016-09-18T20:58:34Z

DanielSank
Sep 18, 2016

This is a question about using the theme.
I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
This is a feature request.
I have updated all gems with bundle update.
I have tested locally with bundle exec jekyll build.

Environment information

OS: Ubuntu 14.04
Minimal Mistakes version: 3.4.4
github-pages version: ?

Expected behavior

I expect the aspect ratio of a header image to be the same whether I use that image is used as a regular image or as an overlay image with an excerpt.

Steps to reproduce the behavior

See example post here.

The front matter looks like this


---
title: Modularity in LaTeX
header:
  image: header.png

---

and the image has a certain aspect ratio as shown:

Now, if we change to overlay image with an excerpt,


---
title: Modularity in LaTeX
excerpt: blarg
header:
  overlay_image: header.png

---

then the image becomes much less tall, as shown here

Interestingly, if we leave the excerpt line out, the auto-generated excerpt is much longer, and as a result the header image is taller.

To produce this error, I cloned the repo, adjusted the configuration, and wrote the post linked above.

mmistakes · 2016-09-19T12:26:11Z

mmistakes
Sep 19, 2016
Maintainer

The "hero" headers are fundamentally different, which is why you're observing differences in how they look.

header:
  image: image-filename.jpg

Default header.image uses a <img> element which has some CSS on it to scale it to fit the full width of the screen. The height scales proportionally to the width maintaining the image's aspect ration.

header:
  overlay_image: unsplash-image-1.jpg

While header.overlay_image does not use an <img> element and instead adds it as a background-image to div.page__hero--overlay. Since that image is added via inline CSS it doesn't know what the aspect ratio of the image. It simply applies a background image to the parent container.

If more content is added to it making the container larger the image will appear taller.

If there's is less content it will appear shorter.

What you can do is add CSS to apply a height to that container. This could become problematic as the height will vary at different screen sizes, and will be especially hard to maintain if your images all have different aspect ratios.

I'm sure there is some sort of JavaScript magic you could apply, but that's out of scope of this theme.

0 replies

DanielSank · 2016-09-19T12:30:18Z

DanielSank
Sep 19, 2016
Author

What you can do is add CSS to apply a height to that container.

This leads to an obvious question: how does one apply CSS to specific elements, i.e. the height of the hero imagine on one specific post? I was trying to figure that out also in order to change the overlay title color, because some images make white titles hard to read. Unfortunately, I only figure out how to do this by editing the hard-coded value in _sass/_page.scss directly. Is there a way to edit the title color or image height on a per-post basis?

0 replies

mmistakes · 2016-09-19T12:49:19Z

mmistakes
Sep 19, 2016
Maintainer

This hasn't been merged into master yet but there was an enhancement to allow custom classes.

The way this will work is you assign custom class names to a post or page's YAML Front Matter like so:

classes:
  - your-class-name

This will add your-class-name to the <body> element. Allowing you to specifically target the overlay with a selector like .your-class-name .page__hero--overlay, and then adding whatever CSS you need to style it.

I should be merging this into master shortly.

0 replies

DanielSank · 2016-09-19T12:56:52Z

DanielSank
Sep 19, 2016
Author

there's a discussion of custom classes in the docs, so I'm a little puzzled by you're saying that's not merged yet. Will go experiment. In any case:

How does one add inline CSS to classes defined in the front matter? A trivial example in the docs would be helpful.
Using custom classes seems a bit odd because we're then overriding CSS from _page.scss in our custom class. It's not obvious to me why the custom class properties would take priority. Is there some way to parametrize the stuff in _page.scss in a way that the parameters can be defined on a per-post basis? If this is not presently possible, I'd like to make it so, so any guidance you can give would be appreciated and might result in a pull request :)

I realize that in asking two questions here I might be going outside the bounds of a single issue. I can break up the discussion into smaller more focused ones if you prefer.

0 replies

mmistakes · 2016-09-19T13:11:07Z

mmistakes
Sep 19, 2016
Maintainer

My bad. It was merged in. Too many themes too many issues too many PR, hard to keep it all straight 😛

You can't add inline CSS via Front Matter. You either have to add <style>your css</style> as part of the post/page's content or add those classes to main stylesheet.

The later is probably the better option. I'd create your own custom .scss, place it in _sass and then @import it into /assets/css/main.scss.

RE: 2. I get why that would be odd. Because of how the background images are assigned that's really the only option as you can't do it in _page.scss as that file doesn't read a post or page's YAML Front Matter.

Not saying it's an ideal option but it's certainly one of the more common approaches. Back when "art directed" posts were all the rage a few years ago that's how a lot of people did it eg: custom class overrides in the body of a post.

The custom classes take priority depending on the "cascade", hence the name CascadingStyleSheets. If you add a height or colors to .your-custom-class .whatever, it will take priority over .whatever because it of specificity. There are sites devoted to the topic that will explain it better than I can.

0 replies

DanielSank · 2016-09-19T14:09:31Z

DanielSank
Sep 19, 2016
Author

You can't add inline CSS via Front Matter. You either have to add <style>your css</style> as part of the post/page's content...

Ewwwwww

...or add those classes to main stylesheet. The later is probably the better option. I'd create your own custom .scss, place it in _sass and then @import it into /assets/css/main.scss.

Aha! I may be missing something really obvious, but even if I do this, how would I set attributes like the title color on a per-post basis? See next item.

RE: 2. I get why that would be odd. Because of how the background images are assigned that's really the only option as you can't do it in _page.scss as that file doesn't read a post or page's YAML Front Matter.

Yeah this gets at the real problem. Is there some way to parametrize the sass in a way that we can pick values of the parameters on a per-post content? If not, I'd really like to figure out a way to set that up.

Back when "art directed" posts were all the rage a few years ago that's how a lot of people did it eg: custom class overrides in the body of a post.

I see how that works, but it's not DRY and it messes up the separation of content and styling, so I'm interested in finding another way.

The custom classes take priority depending on the "cascade", hence the name CascadingStyleSheets.

I should have been more clear. I understand that CSS uses cascade to determine precedence. It's just not obvious whether custom classes are higher or lower in the cascade than the defaults because there's no specification about how custom classes propagate to the final document.

Thanks for your help so far.

0 replies

DanielSank · 2016-09-19T14:11:28Z

DanielSank
Sep 19, 2016
Author

To be clear, I am totally happy to do the legwork in setting up a way to parametrize CSS attributes on a per-post basis (assuming it's possible). Right now I'm trying to understand how the present system works and understand the boundaries of what's possible.

0 replies

mmistakes · 2016-09-19T14:45:51Z

mmistakes
Sep 19, 2016
Maintainer

The present system isn't meant to be a full on custom CSS for every post/page slution. The theme isn't built for that nor will it ever be.

It's merely adding the ability to add custom classes to the body to use a simple JS hooks or to style an element here and there. If you're looking to inject custom CSS into every page to change title colors or anything else then the better solution would be to add your own custom Liquid to the `_layouts.

I have yet to see a DRY approach to this problem. It's possible if you're doing something simple like wanting an inverted style for every element to improve light on dark then sure. But if you're looking to do more than all bets are off unless you want to build a custom CSS file for every post/page.

And no, you can't currently do that with the way Jekyll reads assets. What you're looking to do is really not possible (well not easily at least). You'd essentially need to evaluate the Sass file(s) against every post/page to pull in YAML Front Matter to do what you want. And that likely wouldn't work as each post/page would just end up overwriting each other unless you're naming classes specifically.

My understanding of Jekyll is that isn't something done out of the box. You can ask around on talk.jekyllrb.com but without a custom plugin I think you are out of luck.

Two solutions I can think of, both of which involve you customizing layouts and includes to bend it to your will. Not something I'm interested in adding to the theme as it opens the doors to a million and one customizations as everyone will want something different. But if you're interested here's what you could do:

Option 1

Jam custom variables in _config.yml which are accessible from the site object. /assets/css/main.scss could then pull from those as it is processed by Jekyll. Any of the partials would not though since they don't contain YAML Front Matter and are treated by Jekyll as static assets.

A real simple example:

_config.yml:

custom-var1: green

/assets/css/main.scss:

.my-custom-var1 {
  color: site.custom-var1;
}

Option 2

Edit layouts and includes adding conditional statements where you want to apply customizations.

Example:

Say you want to change the post title's color using a value specified in it's YAML Front Matter.

post/page YAML:

title-color: green

And then modify the template:

<h1 class="page__title" {% if page.title-color %}style color: "{{ page.title-color }};"{% endif %}>

As you can see this has the potential to turn into a maintenance nightmare.

Again this is probably something that is super out of scope with this theme and dips more into "how to use Jekyll" land. I'd read out on talk.jekyllrb.com or Stackoverflow. Perhaps there are others who have a better solution.

0 replies

DanielSank · 2016-09-19T18:08:13Z

DanielSank
Sep 19, 2016
Author

The present system isn't meant to be a full on custom CSS for every post/page slution. The theme isn't built for that nor will it ever be.

Of course not. You must get a lot of people expecting your theme to solve all the world's problems...

If you're looking to inject custom CSS into every page to change title colors or anything else then the better solution would be to add your own custom Liquid to the `_layouts.

Yeah, that seems like a half-decent approach. Will use that as a stop-gap for now. I'll see if I can figure out a better way though.

Thanks for your help.

0 replies

mmistakes · 2016-09-19T18:10:29Z

mmistakes
Sep 19, 2016
Maintainer

Of course not. You must get a lot of people expecting your theme to solve all the world's problems...

Naturally 😉

1 reply

jtbuffmire Jul 18, 2023

Hey @mmistakes - Thanks for everything you do! ... quick question about increasing the header image size (issue 542). You showed how to do so by adding multiple lines of text to the "exerpt" that overlays the "overlay_image", but when I try to get the same result by adding paragraph syntax ("<p>" and "</p>") to the markdown file, it doesn't work (all paragraphs are still combined into one). How do you get the multiple paragraphs shown in your example? Cheers and again thanks for all you do!

mmistakes · 2023-07-18T12:24:26Z

mmistakes
Jul 18, 2023
Maintainer

@jtbuffmire Sorry about that, bad example. I did that in the browser's dev tools just to demonstrate how the height scales the image. I don't think you can do multiple paragraphs unless you customize the theme.

Currently <p></p> paragraph elements are stripped from the overlay description/tagline.
https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/page__hero.html#L33-L37

0 replies

jtbuffmire · 2023-07-18T19:51:45Z

jtbuffmire
Jul 18, 2023

Well, in a way, I'm relieved I didn't ask a stupid question. Thanks for the quick reply. Like others, I'd really like to find a way to increase the header image size, that doesn't mess things up or take a significant amount of re-work per page. I guess I'll keep noodling on it. Thanks! Jameson Buffmire ***@***.*** Mobile: (805) 602-8161 http://www.linkedin.com/in/jtbuffmire http://www.facebook.com/JTBuffmire Sent via Superhuman ***@***.***>

…

On Tue, Jul 18, 2023 at 5:24 AM, Michael Rose ***@***.***> wrote: @jtbuffmire <https://github.com/jtbuffmire> Sorry about that, bad example. I did that in the browser's dev tools just to demonstrate how the height scales the image. I don't think you can do multiple paragraphs unless you customize the theme. Currently <p></p> paragraph elements are stripped from the overlay description/tagline. https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/ page__hero.html#L33-L37 — Reply to this email directly, view it on GitHub <#3000 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADGY5PQUG3NZB753AH2DNYDXQZ6ANANCNFSM6AAAAAA2NUJQII> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Header image aspect ratio depends on excerpt length #3000

{{title}}

Replies: 12 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Header image aspect ratio depends on excerpt length #3000

DanielSank Sep 18, 2016

Environment information

Expected behavior

Steps to reproduce the behavior

Replies: 12 comments · 1 reply

mmistakes Sep 19, 2016 Maintainer

DanielSank Sep 19, 2016 Author

mmistakes Sep 19, 2016 Maintainer

DanielSank Sep 19, 2016 Author

mmistakes Sep 19, 2016 Maintainer

DanielSank Sep 19, 2016 Author

DanielSank Sep 19, 2016 Author

mmistakes Sep 19, 2016 Maintainer

Option 1

Option 2

DanielSank Sep 19, 2016 Author

mmistakes Sep 19, 2016 Maintainer

jtbuffmire Jul 18, 2023

mmistakes Jul 18, 2023 Maintainer

jtbuffmire Jul 18, 2023

DanielSank
Sep 18, 2016

Replies: 12 comments 1 reply

mmistakes
Sep 19, 2016
Maintainer

DanielSank
Sep 19, 2016
Author

mmistakes
Sep 19, 2016
Maintainer

DanielSank
Sep 19, 2016
Author

mmistakes
Sep 19, 2016
Maintainer

DanielSank
Sep 19, 2016
Author

DanielSank
Sep 19, 2016
Author

mmistakes
Sep 19, 2016
Maintainer

DanielSank
Sep 19, 2016
Author

mmistakes
Sep 19, 2016
Maintainer

mmistakes
Jul 18, 2023
Maintainer

jtbuffmire
Jul 18, 2023