Polaroid images on the left

This topic has 24 replies, 2 voices, and was last updated 3 years, 7 months ago by Tom.

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

1 2 →

Author

Posts
January 22, 2020 at 2:06 pm #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
January 22, 2020 at 5:27 pm #12831

Tom
Keymaster

Hi there,

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

January 23, 2020 at 1:04 am #12848

Bernhard
Participant

Yes, @ 768px

January 23, 2020 at 7:39 am #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.
January 23, 2020 at 6:01 pm #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 🙂
January 24, 2020 at 1:37 am #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.

January 24, 2020 at 6:14 pm #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?

January 25, 2020 at 10:16 am #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?

January 28, 2020 at 6:29 pm #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.
January 29, 2020 at 3:31 am #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()
    );
} );
```
January 29, 2020 at 5:51 pm #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?

January 30, 2020 at 3:17 am #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?

January 30, 2020 at 8:26 pm #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?

January 31, 2020 at 10:33 am #13069

Bernhard
Participant

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

February 1, 2020 at 5:50 pm #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.
Author

Posts

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

1 2 →

You must be logged in to reply to this topic.

[Support request] Polaroid images on the left