Page overview questions

[Sprony]

I need some help figuring out where I can change the overview of the news section of my website. As mentioned earlier, someone bailed on me while in the middle of finishing the old theme and based on how the new theme looks, I assume it has got to do with whatever he did. This is the top of my news page:

Then when you scroll down, it looks like this:

I want the entire page to look like the latter with fixed thumbnail sizes (or at least something I can work with since they're now all messed up). Where do I start?

 

[Russ]

This is how XenForo displays it by default, actually.
Look at the HYS forum:

Have you seen...?

This forum spotlights some of XenForo's interesting features. Spotlights on features in upcoming releases will be posted here.

xenforo.com

Here is a resource which has CSS to change the format to how you want

Article Forum Symmetrical Grid Layout

In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the extra.less template. Equal Grid -...

xenforo.com

 

[Sprony]

This is how XenForo displays it by default, actually.
Look at the HYS forum:

Have you seen...?

This forum spotlights some of XenForo's interesting features. Spotlights on features in upcoming releases will be posted here.

xenforo.com

Here is a resource which has CSS to change the format to how you want

Article Forum Symmetrical Grid Layout

In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the extra.less template. Equal Grid -...

xenforo.com

Perfect, thank you! I almost got it completely sorted, but only one part keeps messing up. I'm using the code of Equal Grid - Fixed Footer to the letter.

 

[Russ]

Looks like the fix was in the comments. The resource needs an update:

Add this into the code, just below the articleFooter bit:

    .block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
        height: auto;
    }

 

[Sprony]

Looks like the fix was in the comments. The resource needs an update:

Add this into the code, just below the articleFooter bit:

    .block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
        height: auto;
    }

View attachment 15166

Sorry Russ, I was unaware I was looking at reviews instead of comments. The code helped, but there's still one post that doesn't want to play nice. I've asked them if they know what might be up.

 

[Russ]

Which one isn't playing nice?

 

[Sprony]

Which one isn't playing nice?

This one:

I also noticed the Quake 3 Urban Jam Release not lining up but that mught be because the title is shorter, so that's another problem I suppose. I had some back and forth in the topic you linked and in the end I got this advice:

Code:
.message--articlePreview .articlePreview-image&gt;img {<br> aspect-ratio: 5 / 3;<br>}

or

Code:
.message--articlePreview .articlePreview-image&gt;img {<br> aspect-ratio: 4 / 3 !important;<br>}

I've tried it, but I'm unsure where to put this and while experimenting the results were unsuccessful so far.

 

[Russ]

Looking at it, seems like you got it sorted out? They all appear to be displaying the same for me.

 

[Russ]

Actually just noticed the Urban Jam... I guess something like this might help?

.articlePreview-headline {
    flex-grow: 1;
}

Place it into the media query.

 

[Sprony]

Actually just noticed the Urban Jam... I guess something like this might help?

.articlePreview-headline {
    flex-grow: 1;
}

Place it into the media query.

Yeah, that works, only it does cause this, so it probably needs one last tweak.

 

[Russ]

For some reason there-s a margin-bottom: -40px on the content.

.message--articlePreview .articlePreview-content {
    margin-bottom: -20px !important;
}

Try this out.

 

[Sprony]

For some reason there-s a margin-bottom: -40px on the content.

.message--articlePreview .articlePreview-content {
    margin-bottom: -20px !important;
}

Try this out.

I now get this:

Looks like everything aligns now, except for the body text. Maybe I messed something up in the code with all these changes. Here's the whole thing as it is now:

@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;

.block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
height: auto;
}

.articlePreview-headline {
flex-grow: 1;
}

.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;

&:nth-of-type
{
grid-area: unset;

& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}

&-image
{
width: 100%;
}

&-title
{
font-size: @xf-fontSizeLarger;
}

&-content
{
margin-bottom: -@__ctaArticleFooter;
}

&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}

&-meta
{
border-top: solid 1px @xf-borderColor;

& .articlePreview-by
{
display: none;
}
}
}
}
}
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}

.message--articlePreview .articlePreview-image>img {
aspect-ratio: 4 / 3 !important;
}

.message--articlePreview .articlePreview-content {
margin-bottom: -20px !important;
}

 

[Russ]

Would you prefer it like this?

 

[Sprony]

Would you prefer it like this?
View attachment 15178

Yes, that's exactly what I want!

 

[Russ]

Yes, that's exactly what I want!

Change:

    .articlePreview-headline{
        flex-grow: 1;
    }

To :

    .articlePreview-content {
        flex-grow: 1;
    }

Then add:

.articlePreview-headline {
    min-height: 50px;
}

See how that goes for you.

 

[Sprony]

Change:

    .articlePreview-headline{
        flex-grow: 1;
    }

To :

    .articlePreview-content {
        flex-grow: 1;
    }

Then add:

.articlePreview-headline {
    min-height: 50px;
}

See how that goes for you.

Perfection! Thank you so much!

 

[Sprony]

One last thing about this @Russ: where can I find the sizes of the thumbnails? I want to redo the images so that they fit but I can't seem to find it in the code or I'm looking in the wrong place. I took a printscreen and measured it in Photoshop and that gives me 335 x 250 (give or a take a couple of pixels) but I'm not sure how accurate that is.

 

[Russ]

There are no real settings to control the image size specifcially here.

XenForo is actually cropping out the image a little bit. This Quake logo as an example, the image is 1024px by 1024px but XenForo is cropping it out and reducing the size down to 334x250. This changes though on smaller screens, at a certain point you go dual column and the images are larger than that. I'd personally find the thumbnail that looks best on different size screenses and copy those dimensions.

 

[Sprony]

A quick question about this Russ: Xenforo uses the image in the post as a thumbnail. I've made new thumbnails based on what you said and it works great. However, that does mean I'm stuck with these small thumbnail images in the actual post. Is it possible to upload 2 images in my post? One for the thumbnail and the other the actual size for in the post itself?

 

[Russ]

A quick question about this Russ: Xenforo uses the image in the post as a thumbnail. I've made new thumbnails based on what you said and it works great. However, that does mean I'm stuck with these small thumbnail images in the actual post. Is it possible to upload 2 images in my post? One for the thumbnail and the other the actual size for in the post itself?

I think you do have to either insert them into the post or else they'll just show as attachments if they're not inserted. Don't really know an easy way around it. Like XenForo's HYS: https://xenforo.com/community/forums/have-you-seen/ all the thumbnails are inserted into the post.