It just doesn’t seem to matter what I do, the listing page image remains too large. I’ve looked at your AI support, I’ve looked at the related forum items, I’ve changed my landscape (large) settings, I’ve tried to add snippet code, I’ve tried to add CSS Customization Code. Nothing seems to work.
My desire is to have the image on the listing page appear in the same dimensions in which I uploaded it. Typically, no more than 350 pixels wide, and no more than 300 pixels high.
What’s the solution?
Hi,
If you’re referring to the listing gallery images on the page (similar to the demo here: “Stylish remodeled room – ListingHive” where the gallery appears on the left), the gallery width is aligned with the container that holds the listing description.
This behavior is controlled by your image size settings. Please navigate to Settings > Media and check the “Landscape (Large)” image size settings, which is set to 800×600 by default. Here’s how it works: images wider than 800px will be resized to fit that width, while smaller images will be centered. This might create grey side spaces for visual consistency when viewing the slider.
This approach ensures your site maintains a clean, consistent layout across different image sizes.
To help us understand exactly what you’re experiencing, could you share: what type of image you’re uploading (dimensions and file size), what you’d like to see happen and how the current behavior differs from your expectations.
This will help us better understand the issue and assist you more precisely
My site is a business directory site and most of the images I want to display with the listing is a company logo. Attached is a company logo that I uploaded as a 300 x 300 pixel image. Also attached is the listing page containing the logo. It’s been expanded to a much larger image (approximately 765 x 765. My present landscape (large) setting is 400 width, 400 height, Crop Position Center and Bottom. I’ve played with these settings quite a bit and it seems to have no effect; regardless of what I do the image gets expanded on listing page which 1) causes it to be blurry and 2) dominates the page when it should not be so prevalent. I understand it being so if it were an apartment or product, but it’s a simple logo that I don’t want dominating the page and appearing in low resolution because of the expansion. (FYI - the pictures I uploaded that you’re looking at are png files, but I’m using jpg files on the site). The site is marionvibe.com if you’d like to view it. Thanks
Thanks for the details.
Yes, the built-in listing gallery is not suitable for images like a company logo, as it’s intended for listing gallery images (for example, photos). There are 2 ways to resolve this:
<img src="%value%" loading="lazy" style="margin:0 auto">
Then, please edit any listing and upload an image via the custom field you added – the image should appear on the listing page.
Hope this helps
Thanks, I solved the issue by adding the following CSS (provided by Grok) in my child theme.
/\* Force logos / listing images to original size + left aligned \*/
.hp-listing__images img,
.hp-image img,
.hp-gallery img,
.hp-listing__image img {
width: auto !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: unset !important;
object-fit: contain !important;
/\* Top & bottom spacing only \*/
float: none !important;
display: block !important;
}
Thanks for sharing the solution.
Just in case you’d like to experiment a bit more with the layouts, here’s how Ihor’s first suggestion would look: Loom | Free Screen & Video Recording Software | Loom
I’ve added a listing attribute of type attachment and assigned it to the Page (Primary area).
If you do not plan to use the gallery at all, you can use the following snippet to hide the image slider on the listing page and display only the main image on the listing block [How to add custom code snippets - HivePress Help Center]:
add_filter('hivepress/v1/templates/listing_view_page/blocks', function ($blocks, $template){
$listing = $template->get_context( 'listing' );
$images = $listing->get_images();
if ( ! $listing || ! $images ) {
return $blocks;
}
hivepress()->template->fetch_block($blocks, 'listing_images');
return $blocks;
}, 1000, 2);
So the result will look like in my screenshot: the gallery will be removed from the single listing page, but the main image will still be displayed in the listing block (i.e. on archive pages where all listings are shown).
You can also style your attributes and turn them into buttons if needed. For example, for the website attribute, you can paste the following code into the display area of the attribute:
<a href="%value%" target="_blank" rel="nofollow" class="button button--large button--primary hp-button--wide weblinkbutton">
Website
</a>
In a similar way, you can also make numeric attributes clickable or styled as buttons, depending on your use case.
<a href="tel:%value%" class="hp-phone-link" rel="nofollow">
%value%
</a>
<a href="tel:%value%" rel="nofollow"
class="button button--large button--primary hp-button--wide hp-phone-button">
Call
</a>
Thank you. At the moment I’m happy with the way it looks.