• Chevereto Support

    General support checklist

    1. 🎛Confirm that your server meets the System Requirements
    2. 🔥Check for any available Hotfix
    3. 📚Read documentation - It will be required to Debug and understand Errors for a support response

    Requesting help

    1. 👑Purchase Extra Support to get direct email communication with the developer - Save yourself all the hassle of ticketing
    2. 🛎Open a Ticket - If you need software support
    3. 🐞Open a Bug - If you found something not working properly

Dynamic Cropping of Medium images or Maximum Height for image container

jeranon

Chevereto Member
Thank you for such a great product! I do realize that I'm not entitled to customization support, but I'm hoping that what I'm looking for falls enough under product improvement that it is something that can be implemented in future releases... or if some stray coder takes mercy on me and has a solution, I will certainly not sneeze at that either!

I have Chevereto installed at https://3x4k.ca/
With this site, I'm not as interested in having a community of uploaders (yet), but rather I'm more concerned about curating a specific type of image - Background images for three 4k monitors side by side (native resolution of 11520 x 2160).

I have two Categories (currently) based on resolution. What I hope is the main draw (and hence my url) is the 3x4k resolution images: https://3x4k.ca/category/3x4k.
And as an added bonus, 2x4k images at https://3x4k.ca/category/2x4k. Because these images are all so very wide, they look a little ridiculous in the fixed image container. So I selected "Fluid" (as well as tweaking the medium width size to 1920, and making a maximum of two columns).
Viewing the 2x4k images from a desktop, they look amazing. The container fits the images perfectly and there is no grey-space anywhere around the image.
Where the issue arises, is when you look at the 3x4k images, there are grey bars at the top and bottom of the image - ideally, I would like the height of the container to be the height of the image being displayed.
This issue is especially exacerbated with a mobile device in portrait mode.

I can think of several ways to get to my goal, but I'm not sure how to implement them.
Option one:
Instead of the image scaling and creating grey rectangles around it, is it possible to "dynamically crop" the image to fully fill the space as it resizes? Is that even a thing?
Option two:
Force the grey-space to have a maximum height of whatever the image size being displayed is.

While I can picture what I'm hoping to achieve, my css skills are rusty at best, and I'm hoping someone with more experience can point me in the right direction on tweaking this.

Thank you for your time, and again, for a great product!
 

Rodolfo

⭐ Chevereto Godlike
Chevereto Staff
Administrator
Nice project!, sorry for the late response. Anyway, add this CSS:

CSS:
.js .list-item-image .image-container img {
    width: auto !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-height: 100% !important;
    min-width: 100% !important;
    transform: translate(-50%, -50%) !important;
}
.js .list-item-image .image-container {
    margin-top: 0 !important;
}

Hope it helps!
 

jeranon

Chevereto Member
Nice project!, sorry for the late response. Anyway, add this CSS:

CSS:
.js .list-item-image .image-container img {
    width: auto !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-height: 100% !important;
    min-width: 100% !important;
    transform: translate(-50%, -50%) !important;
}
.js .list-item-image .image-container {
    margin-top: 0 !important;
}

Hope it helps!
Rodolfo! Thank you so much. What an incredible and immediate difference it makes!
I figured the late reply was due to me making the request in the wrong section and it getting buried... So I appreciate you finding it :)

I appreciate the feedback on the site, and thank you for the time and effort you put into making this work.

Cheers!

Edit: You fixed the album covers at the same time!! Wow that looks sharp! Thank you!!
 

luoncogang88

Chevereto Member
@Rodolfo Hi, I want to display the image in masonry scale in width I edited the listing size to Fluid, but it displays still trimming the width
please help me with a css or edit somewhere please let me know, thank you
For ease of understanding I want to show the listing size as shown below
1617524025865.jpeg
 

Rodolfo

⭐ Chevereto Godlike
Chevereto Staff
Administrator
@Rodolfo Hi, I want to display the image in masonry scale in width I edited the listing size to Fluid, but it displays still trimming the width
please help me with a css or edit somewhere please let me know, thank you
For ease of understanding I want to show the listing size as shown below
View attachment 3768
You can't do that, the implementation is made for columns not rows. There's a css mode for masonry display but is still not supported by any major web browser. All existing masonry implementations are highly tied to JavaScript.
 
Last edited:

luoncogang88

Chevereto Member
You can't do that, the implementation is made for columns not rows. There's a css mode for masonry display but is still not supported by any major web browser. All existing masonry implementations are highly tied to JavaScript.
Thank you @Rodolfo Please send me the css to do that ^^
I want to make a wallpapers site with chevereto, but with the current display, it doesn't attract visitors to surf the page.
 
Top