We're merging with GenerateBlocks! Learn more here.

[Resolved] Cards image size

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Cards image size

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #10874
    Bernhard
    Participant

    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 page

    #10877
    Tom
    Keymaster

    Hi 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 🙂

    #10883
    Bernhard
    Participant

    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 fuzzy

    Can 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)

    #10901
    Tom
    Keymaster

    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: 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?

    #10917
    Bernhard
    Participant

    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?

    #10923
    Tom
    Keymaster

    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;
    }
    #10951
    Bernhard
    Participant

    I’m sorry, no change.

    #10957
    Tom
    Keymaster

    What about this?:

    .wpsp-card .wp-show-posts-image img {
        height: auto;
    }
    #10977
    Bernhard
    Participant

    No change. Would it be possible to define the image size 300×154 in the hook?

    #11005
    Tom
    Keymaster

    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.

    #11043
    Bernhard
    Participant

    Yes, the CSS is active.

    I have now inserted in the test page the resized image 300×154. This would be the expected result.

    #11044
    Tom
    Keymaster

    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.

    #11047
    Bernhard
    Participant

    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 #22852

    #11061
    Tom
    Keymaster

    CSS can’t be inserted using Elements. Can you try inserting it using one of these methods?: https://docs.wpshowposts.com/article/adding-css/

    #11064
    Bernhard
    Participant

    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.

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.