Home › Forums › Pro Support › Cards image size
Tagged: cards image size
- This topic has 23 replies, 2 voices, and was last updated 4 years, 2 months ago by
Tom.
-
AuthorPosts
-
August 23, 2019 at 10:28 am #10874
Bernhard
ParticipantHi,
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 pageAugust 23, 2019 at 7:49 pm #10877Tom
KeymasterHi 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 🙂
August 24, 2019 at 7:07 am #10883Bernhard
ParticipantHi 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)August 26, 2019 at 4:18 pm #10901Tom
KeymasterYou 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: 560px
is 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?
August 27, 2019 at 4:53 am #10917Bernhard
ParticipantI 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?
August 27, 2019 at 5:10 pm #10923Tom
KeymasterDoes 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; }
August 29, 2019 at 4:07 pm #10951Bernhard
ParticipantI’m sorry, no change.
August 29, 2019 at 8:19 pm #10957Tom
KeymasterWhat about this?:
.wpsp-card .wp-show-posts-image img { height: auto; }
September 2, 2019 at 3:19 am #10977Bernhard
ParticipantNo change. Would it be possible to define the image size 300×154 in the hook?
September 4, 2019 at 4:50 pm #11005Tom
KeymasterIs 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.
September 8, 2019 at 3:02 am #11043Bernhard
ParticipantYes, the CSS is active.
I have now inserted in the test page the resized image 300×154. This would be the expected result.
September 8, 2019 at 3:37 pm #11044Tom
KeymasterI 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.
September 9, 2019 at 12:48 am #11047Bernhard
ParticipantI 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 #22852September 9, 2019 at 4:29 pm #11061Tom
KeymasterCSS can’t be inserted using Elements. Can you try inserting it using one of these methods?: https://docs.wpshowposts.com/article/adding-css/
September 10, 2019 at 9:18 am #11064Bernhard
ParticipantOops, 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. -
AuthorPosts
- You must be logged in to reply to this topic.