Refactoring post image display (Source/Magazine)

Themes
1

When using the Magazine layout for the Source theme, there are some posts which, owing to the geometry of the page, do not show their header image (see screenshots below). I think it would be much more preferable to show fewer posts in this “above the fold” section, with their images intact, than to fit more posts without them.

Is there an easy/clean way to adjust the logic used by this theme to determine when and how many post images to show? Might adding post excerpts help alleviate this formatting issue?

Any help on this would be very appreciated!

Narrow window (ideal would be to show the picture for Burning Bright and push the next post out of this section):

blog_images_view
blog_images_view858×539 110 KB

Widescreen window (ideal would be to not have the two truncated posts in this section at all):

image
image1377×673 204 KB

2

Source has some rules about not showing the image for the last post. You could override those (code injection would work), or you could edit the theme to put fewer posts in the columns. IIRC, Source shows the same image dimensions always, although the length of the title can vary (one vs two or more lines…)

1 Like
3

Thanks for that Cathy. I found what I thought was the right section within partials\components\post-list.hbs as follows, but in my tests, changing the match amount didn’t seem to alter the display at all. Do you know off-hand where else this logic could be living within the code? Much appreciated!

{{else match @custom.header_style "Magazine"}}
	{{#match posts.length ">=" 7}}
		{{#get "posts" include="authors" limit="19"}}
			{{#foreach posts from="8"}}
				{{> "post-card" lazyLoad=true}}
			{{/foreach}}
		{{/get}}
	{{/match}}
4

It’s in the css. The image is just hidden.

5

Oh my apologies for being unclear! I meant for designating how many posts are shown in the “above the fold” area of the Magazine layout; I know the specific number depends on screen size.