Previously the images in the Toolset View on the homepage were all the same size and nicely side by side, but that is no longer the case. I don't know if it's because of an update.
I have noticed my former collegue who designed this website used a Toolset view.
Then he added some custom CSS with this in it:
.ttp-grid-beeld img {
width:100%;
height:80px;
object-fit:cover;
}
What could have changed so that the images aren't how they were supposed to be?
Hi,
Thank you for contacting us and I'd be happy to assist.
I've checked the page's source code and the image thumbnails are correctly being generated in the specified sizes.
Since, the originally uploaded images have variable image dimensions ( ratio of widths and heights ), the generated thumbnails also have different widths and heights, as expected. That is where the custom CSS code from your colleague comes in handy, to make them look in uniform sizes.
I don't find this custom CSS code included in the page so it only seems to be the missing link. You can include this code in the view's 'CSS editor' and it should work as before.
regards,
Waqar
Hi Waqar,
Thanks for the quick help.
My colleague used another custom CSS plugin to add this code. The full CSS code looks like this:
.ttp-grid-box {
}
.ttp-grid-beeld {
}
.ttp-grid-jaar {
font-size:12px;
}
.ttp-grid-meta {
font-size:12px;
}
.ttp-grid-beeld img {
width:100%;
height:80px;
object-fit:cover;
}
.ttp-grid-titellink {
text-align:left;
font-size:16px;
font-weight:700;
}
.ttp-grid-titellink a {
color: #000;
}
.ttp-grid-leesmeer {
font-size:13px;
text-align:left;
margin-top:5px;
text-decoration:underline;
}
.ttp-grid-leesmeer a {
}
.ttp-grid-leesmeer a:hover {
color:#000;
}
Can I paste this completely under the CSS editor of this view?
Hi,
I tried it with a test view and it worked! So now I changed the view on the homepage.
Thanks for the assistance!
