Would love additional options for the Card Hero Image that make it easy to set whether the image should be cover, fit, or contain without using custom css.
3 Likes
Here’s a quick and dirty CSS fix…
If you want to change ALL cards with an image where the image is set as the hero image like your example (again, will change everywhere)…
Default
set to Contain
Add this css to your custom code area in noloco:
<style>
/*all card cover images to contain*/
[data-testid="collection-record"] .bg-cover.bg-center{
background-size: contain!important;
}
</style>
More advanced, if you want it JUST for a specific ‘view’ (that is, a specific page you set up with your card collection you need to find the “view” class of that “page”…
Right click on the page with the records, select “inspect elements” and in the ‘elements’ tab use the search bar to search: data-testid="view-collection" - you need a class in this div that looks like: view-IurNdu5Xd:
Then you can modify the above script to work on this specific ‘page’…
<style>
.view-XXXXXXXX [data-testid="collection-record"] .bg-cover.bg-center{
background-size: contain!important;
}
</style>
Hope that helps!
1 Like
Thanks Sean!! I’ve got the css working, mine looks similar to your suggestion, just added background-repeat: no-repeat !important; to prevent it from repeating. Just hoping they’ll put the quick toggle on the roadmap.
2 Likes