question

Image crop

Author

Posts
gsmobina 7 months ago

I want to keep the list thumbnail height fixed while width has to 100% according to the column/grid

eg: width: 100% & Height: 350px

how do i do this?

ihor 7 months ago developer

Columns may have different width depending on the screensize so it’s not possible to set a fixed height in px, but you can change the aspect ratio (it’s set to 4:3 by default) via HivePress API https://hivepress.io/support/topic/picture-size/#post-5040

gsmobina 6 months, 3 weeks ago

hi,

the solution works somewhat for landscape images, but how will it work on portrait images?

see the below image
https://prnt.sc/umv2ss

listing page thumnails if not equal heights at least closed equal would be displayed nicely. as you can see in the image, having a portrait image is making it ugly.

Either crop or resize should be there. don’t you think?

ihor 6 months, 3 weeks ago developer

I guess it was uploaded before the changes, or it’s smaller than 400x300px. HivePress uses the WordPress image cropping and you can fully change it via API, you can check the allowed values for the width, height, and crop parameters here https://developer.wordpress.org/reference/functions/add_image_size/
gsmobina 6 months, 2 weeks ago

i found a different solution for this. instead of using img src i used it as a background image and also used a default image path from the uploaded media folder. adding it here for anyone who has the same problem as me and hope this will help

edited this template https://github.com/hivepress/hivepress/blob/master/templates/listing/view/page/listing-images.php
```
<div class="hp-listing__image">

	<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
	    	<?php if ( $listing->get_image__url( 'hp_landscape_small' ) ) : ?>
	    <div class="hp-listing__image-bg" style="background-image: url('<?php echo esc_url( $listing->get_image__url( 'hp_landscape_small' ) ); ?>');">&nbsp;</div >
	
		<?php else : ?>
		    <div class="hp-listing__image-bg" style="background-image: url('<?php echo esc_url( hivepress()->get_url() . '/../../uploads/2020/09/placeholder-2.jpg' ); ?>');">&nbsp;</div >
		
		<?php endif; ?>
	</a>
</div>
```
css:
.hp-listing__image-bg{
background-repeat: no-repeat;
background-size:cover;
height:250px;
background-position: center center;}
ihor 6 months, 2 weeks ago developer

Thanks for posting the solution. Please make sure that you override files instead of editing them directly in the HivePress folder, because any direct changes may be erased on update.

gsmobina 6 months, 2 weeks ago

I did this on my child theme hivepress folder templates.

garagster 6 months, 2 weeks ago

Hi,
Can i also ask a question here, because it’s related to this?
Referring to the gsmobina’s example picture of listings. Can I make the listing boxes displayed equal height even if the images would be bigger or smaller inside them?
Thanks in advance! 🙂

gsmobina 6 months, 2 weeks ago

my method is background image instead of img src. so you can fix an height in css position it the way you want. my css i have made the background image size as cover and made it position it to center of the image. so if a user uploads a landscape or portrait, it will display in the height i want. background cover will fill the image area even if the image is smaller than the area, only it will pixelate a little, bit at least the each grid will have aligned look

ihor 6 months, 2 weeks ago developer

There’s no easy way to do this unfortunately, and this would add extra white space inside smaller boxes (instead of the outside space by default).

garagster 6 months, 2 weeks ago

Thanks!

@gsmobina: Your solution sounds good. Would you be kind and you provide more like step by step instructions how to do this. I was able to create a child theme with the functions.php and style.css but now I’m a bit stuck what next. I guess i need to have at least the background images uploaded in correct place..?

gsmobina 6 months, 2 weeks ago

@garagseter i have in my child theme a folder for hivepress. and have added the files from this link to my hive press folder.
Source:
https://github.com/hivepress/hivepress/blob/master/templates/listing/view/page/listing-images.php

Cildtheme path:
child-thme/hivepress/listing/view/page/listing-images.php

and in this filesi have replaced the code that is displaying the image thumbnail with my code

and css class options in customizer css area

garagster 6 months, 2 weeks ago

@gsmobina: Thanks very much for your help.. I will try this 🙂
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.