I have my homepage as showing only featured listings. It gives an option to set the number of columns from 1 to 4. But I need to set it to 5 or even 6. The images are in portrait style, so 4 images per line looks very wrong. I tried a snippet I found on here pointing to listings_view_page with columns at 5, but it only works on other listings pages. How do I get this to work on the homepage with featured listings?
Also, the page layout options are quite limited. I need one column 20% wide, and the other 80% wide. Using Lisinghive.
Unfortunately, there’s no such feature, it would require a custom implementation. Also, note that this will require custom CSS tweaks, as it will look incorrect (all attributes will not fit if there are more than 4 columns). Therefore, we recommend using a maximum of 4 columns.
Thanks for the reply. I’ve gone into the core files and added an option for 5 columns, around line 100 in includes/blocks/class-listings.php Maybe there is a snippet that could be used so not to edit core files.
I know you’re great guys, and you have a great script. It’s not my intention to criticise, just give feedback. But i think you should allow more columns so to make the script more usable to as many people as possible. With portrait images, 4 looks wrong and wastes valuable space. I think it needs a lot of customisation to make a good website, and it seems everyone is having to make major changes. So tweaking the CSS is not so bad, compared to programming. Have spent 3 weeks of heavy customisation so far.
I have other issues with images. When clicking through to the listing page, the images are huge on a desktop/laptop, especially as my users will upload portrait style photos. If the image they upload is small, it stretches them to fit the full width, which looks of poor quality. Even if i edit the media settings to 300 wide by 450 in height, it doesn’t stop the image stretching to a huge size. Nothing works. How do I limit the width of portrait images on the listing pages, but still allow landscape to be relatively wide?
I appreciate any help. I don’t like to take up your valuable time, but it’s difficult to customise some things.
Hi cotasson. Thanks, I appreciate your reply and the contribution you make to helping others here. I know you’re not staff.
I’ve looked this issue up using search, but the answer is usually a link to the page ‘How to customize the image sizes’. I’ve set everything to small dimensions, but on listing pages the image always expands. I’ve set it to 400 in width to 600 in height, but it expands to around double the size on my laptop! People viewing my site need to be able to see portrait images on the screen, not scroll up and down. The script assumes everyone to upload only landscape, but my users upload both. I’ve tested this with newly uploaded images, so it’s not that.
As you understood, I am not part of the official support, just helping out whenever I can.
I came across the same problem regarding listings display (and column), and we came to the same conclusion as a workaround. Maybe you this post ?
Unfortunately for image sizes, I haven’t investigated any further. Just pointing you to a possible direction, hopefully.
Since mobile devices can be used in landscape and portrait mode, maybe 1:1 format is your best option. At least that the one I am using.
Thanks. That link goes to a page that’s been removed.
If set to 1:1 it chops the top off portrait images. The issue is that whatever size you set, the photo expands to fill the whole width of the box, which on a large display can be huge. That’s using Listinghive. A really good website, and therefore profitable business, needs everything to work for everyone and in all situations. On a laptop, portrait images are far too big. I don’t know what your project is, but maybe a user can upload portrait images. That always has to be considered.
Regarding your problem I once had the same too.
For an ecommerce website, some square thumbnails are generated for product page. Sometimes the thumbnail is not appropriate, especially for books (portrait mode so to speak). The title, quite often on the top part of the image, was chopped off too.
So I used this this plugin :
Problem solved.
The only drawback is you need to moderate / curate your user generated content and edit the image (which is always a good thing to do anyway).
As for the size of the images, normally WordPress handles this natively : Depending on your screen resolution, it will display one of the thumbnail sizes available.
o you should not bother too much about this, though I understand and share your attention to detail (and speed). You may rely a tinypng plugin to optimize the size or your image, and even change it to *.webp format (plenty of plugins for you to test).
Another solution would be to set some requirements for image upload (dimensions, weight, format). You could investigate this too.
Thanks for your suggestions. My users generally upload portrait photos, and I require it for the homepage.I would like it all to be automated.
I think I have solved the issue to some degree. I’ve set Landscape Large to width 400 and height 600. Importantly, I’ve set the crop positions as both off.
I’ve stopped the images from stretching to a crazy size by using CSS for .hp-listing__images img. Max-width 400px, height auto, margin auto. So now, everything is perfect for portrait images. Landscape is limited in width though with this CSS to the same 400px. It also limits the width even if you have a high resolution display.
Maybe someone has a better solution so that landscape images aren’t restricted to 400. I hope someone can contribute. Otherwise, maybe these posts will help someone.
Thanks for the feedback, we will consider adding more customizations in future updates. We can provide a sample CSS snippet, but please note that it will require further customization, such as a responsive layout for tablet or phone width. Therefore, we recommend using 4 columns.
As for the images, they always fill their container, and the size of the images in pixels is needed to optimize the size of the images and their proportions. You can change these settings using this documentation: How to customize the image sizes - HivePress Help Center. Regarding the current size, you had to change the width of the container using CSS. Please clarify, do you mean the listings page and its gallery or the listings block?
Thank you very much. I appreciate your efforts to help.
That’s a good idea to use that code, so thanks. I’ve had a problem before with people uploading images that are too small. But with my old sctipt, it’s around 20 years old, images that are two small stay that way. With Hivepress they are being stretched to a huge size on a laptop. I’ve set a max-width of 400px because my users upload images of themselves, often in portrait. Without forcing a max-width, portrait images are too long and can’t be viewed in full without scrolling. At a max of 400px wide, most portrait photos will show without scrolling on most computers. Without that CSS, users can’t see a portrait of a person in full, they can only see the top half, and then the bottom half, which is a define no for viewing people.
I edited the code to make sure end-users don’t upload 2Mb pictures :
//add images requirements.
add_filter('wp_handle_upload_prefilter','condorito_handle_upload_prefilter');
function condorito_handle_upload_prefilter($file)
{
$limit = 200; //change to your own limit
$size = $file['size'] / 1024;
$is_image = strpos( $file['type'], 'image' ) !== false;
if ( $is_image && $size > $limit ) {
return array("error"=>"L'image doit faire moins de {$limit}ko.<br>Utilisez éventuellement un outil comme <a href='https://tinypng.com' target='_blank'>tinypng.com</a> pour essayer d'en optimiser le poids.");
}
return $file;
}
Thanks again for taking time to reply. Sure, I would be happy if you share some CSS. I’ve made some changes to make the fearured boxes 200x300 in portrait, which allows 5 or maybe 6 collumns wide. The text is so large that it no longer fits in the boxes, so I will make more changes. As mentioned, i changed the core files to allow 5, but a snippet might be better, especially for other people who have the same requirements.
Yes, on the listing pages, the image fills the container, but that’s bad for portrait images as they become too big, maybe over 1000px, and the length requires the user to scroll down. If a user adds 10 photos to their page and all are portrait, then a user on a laptop will have to scroll down, click the next thumbnail and scroll back up, then down again etc. When the portrait photos are of people, they need to be visible in full without scrolling. People don’t want to see just the top half of a person and then sctoll down to see the legs. Portrait images are just too large. While not every directory involves portrait images of people, portraits in general just look too big, and I think all scenarios should be considered. I’ve limited the width of the container to 400px using CSS, which makes the height around 600px. That fits without scrolling on a laptop. The downside is that landscape are now limited to 400px wide.
