Sprony

Customer
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:

1763382244736.png


Then when you scroll down, it looks like this:

1763382432047.png


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?
 
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.
 
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(n)
{
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;
}
 
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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back