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?

 

[Sprony]

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.

I found a workaround by making the thumbnails bigger by multiplying with 2. So the thumbnail - as you said - is 335x250 and I made that 670x500. Now it looks good in the article and downsized as the thumbnail as well.

 

[Sprony]

I'm a bit confused @Russ. We changed the code, everything is working as it should, but apparently it only works on the news page of my website. I went through this topic again and on the site you listed at first, it says this:

Specific Nodes​

To only apply the layout to a specific node, wrap the code like so, replacing the 2 with the node ID:
Less:
<span>[data-container-key="node-2"]</span><br><span>{</span><br> ...<br><span>}</span>

To apply it to multiple nodes, add additional node IDs comma separated like this:
Less:
<span>[data-container-key="node-2"],<br>[data-container-key="node-4"],<br>[data-container-key="node-8"]</span><br><span>{</span><br> ...<br><span>}</span>

Here you can see the layout is applied to one node but not the other.

However, I've never done this, so I would assume it would work on my other pages as well. This is not the case and I bet I'm overlooking something obvious, but I simply can't find the reason why it doesn't work on other pages.

This is the complete custom code we have at this point in extra.less.

.xb-welcome-notice
{
background-size: auto 100%;
.xb-welcome-notice--mask
{
background: transparent;
}
}
#XF .xb-welcome-notice {
background-size: auto 80%;
background-position: 98% center;
}

.structItem--resource .structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded {
width: 130px;
}
.structItem--resource .structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded .avatar:not(.avatar--separated) {
width: 96px;
height: 96px;
border-radius: 0;
}

.structItem--resource .structItem-cell--iconExpanded .structItem-iconContainer .structItem-secondaryIcon { display: none; }

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

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

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

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

.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]

Which pages is it not working on? The article stuff would only work on the initial forum_view article node.

 

[Sprony]

These two:

Articles

Tutorials

 

[Russ]

In your node settings, you probably need to update the display style.

 

[Sprony]

In your node settings, you probably need to update the display style.

View attachment 15345

That's the first thing I checked. All of them are set to preview.

 

[Sprony]

Ah, I kept testing it with one post and it blows it up to the entire page, if you add more posts it does in fact work. Sorry for the confusion, I did not realize it blows up the first post only, which is quite annoying to be honest.

 

[Sprony]

This is probably beyond the support you offer here @Russ , but I'm asking anyway since I'm not getting anywhere on the Xenforo forums. It's about the first post blowing up with the this custom code. I asked them about it here. To save you a click, here's a screenshot. Any help/suggestion would be greatly appreciated!

 

[Russ]

Try adding this to extra.less:

@media (min-width: (@xf-responsiveWide  + 1))
{
    #XF .p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body>.message:first-of-type:last-of-type {
            grid-area: auto;
        }
}

There's CSS that applies special grid-area when the item is the first and last of time (they make it span 100% when that happens).

 

[Sprony]

Works like a charm, thank you!