- This topic has 23 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
Hi,
I’m testing cards to use it on some pages and I think to use the polaroid style.
My problem is the image size, actually it shows a cutted square image of bad quality. I defined images width and height (300×154 shall be the max size) but nothing happens. How can I solve this? Furthermore, the images are not on the left / right border, but have an indent.
Test pageHi there,
What happens if you remove the image sizes and show the full size?
As for the space, are you adding some CSS like this?:
@media (min-width: 560px) { .wpsp-card.wpsp-polaroid .wpsp-content-wrap, .wpsp-polaroid .wp-show-posts-inner { padding: 2em; } }It’s hard to tell where it’s coming from as all of the CSS is combined.
Let me know 🙂
Hi Tom,
I use one rule on the site which limits the wpsp title to 3 rows and I disabled it on the test page. There shall be no other CSS referred to WPSP on the test page.
I removed the image size – the image is still square and cutted but the quality is ok
I inserted the CSS which you have indicated above – no change
I added a second list with the base style – also in this style the images are cutted. If I insert an image size, also in this style the image is fuzzyCan you please indicate a sample, how the polaroid style shall look like.
Is there a way in the polaroid style to define the image size and is it possible to keep the original image ratio (as it does with cards disabled)You can find the polaroid style on this page: https://demos.wpshowposts.com/cards/
The CSS I mentioned above is the cause of the issue. The
min-width: 560pxis what makes me think it’s custom CSS, as we don’t use that media query in the plugin.The only reason the image quality would suffer is if the image is smaller than the size it’s displaying at. What if you use image resizing with a width/height that’s larger than what it displays at on the page?
I see that also in your demo the image is cutted and not resized.
I don’t know where the 560px comes from, I’m using 768px. Where do you see this query?
The source images are 672×345, this is a wide ratio 19.5:10 and therefore the cut is more evident than in your demo.
I updated the test page with samples wiwith and thout indicating image sizes in the images tab. Please observe also, how the images are with various browser width.
Anyhow, I would like to be able to define the size of the cards by my own and to show the full resized image, is there any solution?
In alternative, would it be possible to add to the settings without cards in image location (actually above title and below title) left and right?
Does this CSS do the trick?:
.wpsp-card .wp-show-posts-image img, .wpsp-card.wp-show-posts-columns .wp-show-posts-single .wp-show-posts-image img { object-fit: unset; }Is that CSS still active? I’m not seeing it.
The image is already set to 300×154. I believe the blur is coming from the height being defined in the CSS.
Yes, the CSS is active.
I have now inserted in the test page the resized image 300×154. This would be the expected result.
I see the height set to 100%, but not auto as I wrote above: https://www.screencast.com/t/Tmsu1Nwn5
The issue is the height is set to 154, but you’re stretching it to be 100% of the height. That stretching is forcing the image to lose quality.
I do not have the spark of an idea where this code comes from. May I send you an access to the site, maybe this will help?
The code `.wpsp-card .wp-show-posts-image img {
height: auto;
}`
is inserted with Elements #22852CSS can’t be inserted using Elements. Can you try inserting it using one of these methods?: https://docs.wpshowposts.com/article/adding-css/
Oops, I forgot to wrap it into
<style></style>then I can address with the CSS a specific location in Elements. Now it works.I played a bit around and made 3 pages:
1. No additional CSS
2. 1st code.wpsp-card .wp-show-posts-image img, .wpsp-card.wp-show-posts-columns .wp-show-posts-single .wp-show-posts-image img { object-fit: unset; }3. 2nd code
.wpsp-card .wp-show-posts-image img { height: auto; }I think, this is the best solution for me.
In the page I prepared a screenshot to explain my formatting problems.
I want the title at the same height as the image as well as title and text with the same border width as the image. The “Read more” text should be directly attached to the text, without border. Is that possible?
My original idea was to use cards without background. Then the pictures would have to be flush on the edge and the text could be even wider.
- You must be logged in to reply to this topic.