- This topic has 12 replies, 2 voices, and was last updated 2 years, 9 months ago by
.
-
Posts
-
I’m just starting to rebuild a Thesis site using GPP and Generate Blocks – and since I love some of the options with WP Show Posts Pro, bought that (I have a boatload of sites to transition!). However, I’m having a bit of a problem with the image sizes and suspect that I will need some custom CSS to fix it, possibly along the lines of the CSS recently proposed (though haven’t seen implemented on his test page) for the person who wanted square images for a real estate site.
Basically – the problem is that the Card Overlay Style 2, which I really like, is displaying all the images with the same height as the featured image, including those in the second row, which is not what I want. The result is that I’ve got three very tall, narrow images in the second row. I’d like them to look more like the example on the samples page. Obviously, there will need to be some work done on appropriate choices for the featured image, but that’s not the problem here. This is the case in Chrome and Safari – and also, the crop on the second photo is not at all what I would expect; it’s cropping from all sides. In Firefox, it’s another story – this time, the second row of photos are the expected ratio of height to width, but the second photo is the same dimension as they are as well, so the layout is screwed up. Haven’t checked Windows browsers yet.
I’ve done another version at muskokastyle.com/test1/alternative-home-page-2/ with Overlay Style 2 where I made two different lists to see if I could control this better. It’s slightly better – I added the CSS which helped, but still hasn’t solved the crop problem in the second row. (landscape oriented photos are still getting cropped top and bottom, not just on the sides, and I still can’t get complete control over the height of the images in the second row. I can’t figure out how to target them…)
.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image, .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img { min-height: 200px; max-height: 400px; }And in the continuing saga – the above CSS screws up the first example (https://muskokastyle.com/test1/alternative-home-page/ ) and it displays differently in Firefox than in other browsers. 🙁
The above CSS does work across all browsers for https://muskokastyle.com/test1/alternative-home-page-2 – but that’s with the two different lists. I’d love to figure out how to make it work for all browsers and using 5 images in the list.
Hi there,
the issue arises when there are a mixture of image sizes and more so when mixing portrait and landscape images.
Can you try adding 3 x landscape images with similar/same aspect ratios ?Hi David, ok – changed the posts around a bit so that all the featured images were landscape. Took out the CSS. The images in the second row of https://muskokastyle.com/test1/alternative-home-page-2 are still square and cropped.
The images in https://muskokastyle.com/test1/alternative-home-page/ have now gone completely off the rails; all are now cropped and still have the issue with the long images in the second row. Looks pretty bad.
Does this CSS do what you’re looking for?
It applies specifically to the second row of:
https://muskokastyle.com/test1/alternative-home-page-2/#wpsp-1950.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image, #wpsp-1950.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img { min-height: unset !important; height: 250px !important; }Hi David – yes, that works!! (you can see it now on alternative 2)
So…that leaves the enduring mystery of the https://muskokastyle.com/test1/alternative-home-page/ – how to fix that one? The images are ALL cropped now that I’ve got landscape images in the second row and the featured image has also gone wonky. The problem is that the posts will be constantly updated – so how to make it work with any set of images – if that’s possible, or at least knowing the parameters to make it work. The examples shown on the sample page use images that appear to all be in landscape.
I looked at the plugin CSS and really couldn’t figure out which bits set the image sizes and relationships, but that may be due to not having spent much time trying to get my head around flexbox CSS. :p
The above CSS was specific to post list
#wpsp-1950
Instead of using the lists ID – you can add a Custom CSS class to the WPSP list eg.landscape-cardthen add that to the CSS:.landscape-card.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image, .landscape-card.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-image img { min-height: unset !important; height: 250px !important; }David, I’ve tried repeatedly to respond here and it’s not letting me – disappears my posts entirely, then tells me I’ve duplicated the post; I have cleared caches, restarted, tried other browsers. One last try…
Long story short – the CSS above reduces everything in the first alternative to 250px high. Trying to achieve the same look as the Overlay style 2 on the demo page. CSS for that, btw, looks more extensive than CSS for my attempts – compared the two in FF Dev. Inline CSS #11… Would ideally like to create something like the card grid on the homepage of Dispatch, but using WPSP Pro and blocks, instead of custom code and the prebuilt style.
Ok – so it finally let me post! The targeted CSS for alternative 2 works fine, btw. I left the CSS for https://muskokastyle.com/alternative-home-page up so you could see it in action. Another thing I’m wondering about – the featured images used in the demo are all exactly the same size. Could that be part of the issue here? (That will be a tough one for this site, given that the images come from all over)
Having all the images the same size and orientation will deliver the most consistent results.
Mixing different orientations and aspect ratios is going to lead to the issues you have experienced.Yeah – that’s what I figured. I’ve been working on another site over the past few days, so haven’t gone back into that one to try to create featured images that are all the same size yet! The problem with that site is that the content comes from all over – so it will take asking the providers of the content to provide certain size, preferably uncropped, images. Maybe easier said than done. But maybe going forward it will be doable. I’ll report back when I’ve had time to fiddle (probably later today).
- You must be logged in to reply to this topic.