[Support request] Polaroid images on the left

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Polaroid images on the left

This topic contains 24 replies, has 2 voices, and was last updated by  Tom 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #12822

    Bernhard
    Participant

    Hi Tom,
    you gave me already in the past some CSS to adapt polaroid cards to my layout.
    Now I try to have all images on the left and this works fine for larger browser width. Reducing browser width, in the uneven cards title and text drop down but in the even cards title and text remain on the right side. My testpage

    The code I’m using actually is

    .wpsp-card .wp-show-posts-image img {
        height: auto;
    }
    	
    .wpsp-card.wpsp-polaroid .wpsp-content-wrap {
        padding: 0;
    }
    
    .wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: unset;
    }
    
    .wpsp-row article .wp-show-posts-image {
        padding-right: 1.5em;
        box-sizing: border-box;
    }
    
    .wpsp-polaroid .wp-show-posts-inner {
        padding: 0;
    		box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    }
    
    	.wpsp-polaroid .wp-show-posts-entry-header {
        margin-bottom: 0;
    }
    
    	.wpsp-polaroid .wp-show-posts-entry-title {
        line-height: 1.2em;
    		min-height: auto;
        margin-bottom: 10px;
    }

    Thank you

    #12831

    Tom
    Keymaster

    Hi there,

    Just to confirm, do you want the images on top at smaller screen sizes?

    #12848

    Bernhard
    Participant

    Yes, @ 768px

    #12851

    Bernhard
    Participant

    In the meanwhile I made some more tests:
    a) I tried to substitute the excerpt with a custom field. The problem is that the php You’ve indicated, if I insert it in the functions.php it works so far. But the custom field is shown everywhere, even where I don’t want it. Question is how I can limit the php to the specific page (using Elements?) – for now I took it out
    b) If I use the custom field, I’ll need the read more button a bit above the border
    c) In the same sample page, below the Polaroid are Overlay cards. There I need to trigger the text size (px, bold, etc.). Title and text exceed the image width (672px), this shall not be. Furthermore I need to trigger colour and size of the “read more” arrow, used code is

    add_filter( 'wpsp_ellipses', function() {
        return sprintf( 
            '...<a href="%1$s">&ensp;<strong>→</strong></a>',
            get_permalink()
        );
    } );

    but it’s more or less invisible.

    #12868

    Tom
    Keymaster

    Give this a shot:

    @media (max-width: 768px) {
        .wpsp-row article:nth-child(even) .wp-show-posts-inner,
        .wpsp-row article:nth-child(odd) .wp-show-posts-inner {
            flex-direction: column;
        }
    
        .wpsp-row article .wp-show-posts-image {
            padding-right: 0;
            padding-bottom: 10px;
        }
    }

    As for the excerpt, why not just use the “Excerpt” metabox instead of a custom field?

    Let me know 🙂

    #12876

    Bernhard
    Participant

    OK, it works. Now I need the same breakpoint for the uneven cards.

    About the excerpt metabox: How can I address it? I enabled the excerpt metabox for pages and inserted some text to it (Ciampino page), but still the first words of the page content are shown.

    #12883

    Tom
    Keymaster

    Which are the uneven cards, exactly?

    Ah, so they’re pages? Not sure about the excerpt metabox for pages. Is that pages using a more tag or anything?

    #12893

    Bernhard
    Participant

    Hi Tom, I mean card 1, 3, 5, … which are already on the left. The even cards 2, 4, 6, … we moved to the left with the CSS above.

    I don’t use more tags on pages.
    I disabled the more tags for WPSP with
    add_filter( 'wpsp_more_tag', '__return_empty_string' );

    I can switch the pages to posts, would that help?

    #12985

    Tom
    Keymaster

    Can you show me a screenshot of the problem cards? I’m not seeing any issues on desktop, tablet or mobile.

    As for the excerpt, try targeting the specific list:

    add_action( 'wpsp_before_content', function( $settings ) {
        $meta = get_post_meta( get_the_ID(), '_your_custom_meta_key', true );
    
        if ( isset( $meta ) && '' !== $meta && 123 == $settings['list_id'] ) {
            echo $meta;
        }
    } );

    Just replace 123 with the ID of your list.

    #12998

    Bernhard
    Participant

    Hi Tom,
    I’ve inserted the screenshot on top of my sample page.

    As you can see, the 2nd card changes at 768 px, the 1st and 3rd are different.

    Only the read more function is not shown, which I added with

    add_filter( 'wpsp_ellipses', function() {
        return sprintf( 
            '...<a href="%1$s">&ensp;►►►</a>',
            get_permalink()
        );
    } );
    #13018

    Tom
    Keymaster

    Try the updated CSS: https://wpshowposts.com/support/topic/polaroid-images-on-the-left/#post-12868

    Is there anything different about the post missing the arrows? Using the more tag? The excerpt metabox?

    #13030

    Bernhard
    Participant

    The breakpoint for the cards is ok now. It’s now set to 576px.

    The difference is, that card 2 and 3 have an empty excerpt metabox. The arrows work then as expected. I tried also to change the type from page to post, taking out the code used to call the excerpt metabox on pages, but the result is the same.

    In alternative, would it be possible to define the complete excerpt text as link?

    #13056

    Tom
    Keymaster

    What’s different about the first post? I see it has two paragraphs instead of a single line of text – how are you doing that?

    #13069

    Bernhard
    Participant

    I inserted the two paragraphs in the excerpt metabox. Now I made only one, but the result is the same.

    #13099

    Tom
    Keymaster

    Are the other posts also using the excerpt metabox? I’m trying to figure out why they’re displaying differently – there must be a difference in how they’re set up.

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.