XF 2.3 Change size of featured content article previews?

Growlithe

New member
Licensed customer
Our articles on the /featured page are very tall, and the preview containers per article are all huge with a lot of blank space despite the images themselves not being that big. Is there a way to change this? I am blanking and unable to locate it. Thank you!
 
The featured content article previews can be resized with some CSS in your extra.less template.

Go to Admin Panel > Appearance > Styles > [Your Style] > Templates > extra.less and try something like this:

.block--articlePreview .articlePreview-content {
max-height: 300px;
overflow: hidden;
}

.block--articlePreview .articlePreview-image {
max-height: 200px;
overflow: hidden;
}

.block--articlePreview .articlePreview-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

Adjust the max-height values until it looks right for your layout. The object-fit: cover part makes sure the images scale without getting distorted.

Quick tip — open your /featured page, hit F12 to open dev tools, and inspect the containers directly. That way you can see the exact class names and tweak the values in real-time before committing them to your template.
 
Back
Top Bottom