[Resolved] Dispatch Theme – WP-Post Size

[Bernardo]

For reference, please look at https://whiteplainslive.com/ The Recent News and Government Section.

I have identical settings for both.

The only difference, in the Home Page I’m using the Post ID rather than Post Name like it was for the Demo. For some reason, using the Post ID for Government makes it different than when using the Post Name.

I even used the same size of 2400W and 1600H for image size on both, but it gets distorted for Government. I was wondering about that. I’m pretty sure I’m missing some sort of CSS, but I don’t know where to put it.

on a different note, when I inspect the images from recent news, the 2400w and 1600h change to something smaller, which makes more sense to me, but when I change it on government to the closest whole number, it still doesn’t give me the same nice alligned images.

Can someone take a look, I’m sure I’m missing something important that should be obvious.

[David]

Hi there,

in the WP Show Post list you have for the Government did you set the image Width and height ? If so can you remove them and leave them blank.

Also the original Dispatch had full width images which is why we uploaded 2400px side images. As you no longer have them on your single posts i reckon 1600px would be more than adequate.

[Bernardo]

even if I remove the image sizes from government it still doesn’t look like recent news. I removed the image size from recent news as well but had to at least change the height to 600 px so the images remain symmetrical in size, next to each other.

[David]

Edit the front page, the WPSP shortcode for the Government news is wrapped in this HTML:

<div class="wpsp-align">

Shortcode here

</div>

Remove the HTML so only the Shortcode is there.

[Bernardo]

Thank you, I removed it and that seemed to do the trick for one issue.

Now, the last one is the height of the images in government and more articles.

I made 2 columns so that on the left is government and the right is more articles.

However, despite adding the 600px height max to both of them in WPSP, they are still not aligned. i know all the images are more than 600px in height, so not sure why they aren’t all syncing.

It could be because of the excerpt too. but the hello world image is smaller in government column compared to recent news area.same with the image for the article called “The New Westchester County Reopening Task Force”.

This is the new home page html:

<!-- wp:heading -->
<h2>Recent News</h2>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[wp_show_posts id="1275"]
<!-- /wp:shortcode -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Government</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>More Articles</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:shortcode -->
[wp_show_posts id="1756"]
<!-- /wp:shortcode --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:shortcode -->
[wp_show_posts id="1471"]
<!-- /wp:shortcode --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>More Articles</h2>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[wp_show_posts name="Simple"]
<!-- /wp:shortcode -->

[Tom]

Hi there,

Are you sure the More Article list has 600px set as the image height? The image itself isn’t displaying the HTML output by WPSP when image attributes are added.

[Bernardo]

here are some screenshots, yes, i set gov and more articles to 600. but recent news i kept it as 2400×1600. but if i update gov and more articles to that size, they come out all giant and long and skinny.

All 3 of them i confirmed have the same post id’s in the home page.

Recent News:
https://paste.pics/5e84f3d5cab3f0b2c3d0568c30717d4d

Government:
https://paste.pics/94c2aafcab22510e6f9da193006bb90a

More Articles:
https://paste.pics/3b78bb050b2f6f990ca54757fe2922a3

[David]

Did you resolve the issue ? as the 2 columns look correct to me. Let us know.
As a side note – i personally don’t add image sizes unless i am specifically forcing a change in size.

[Bernardo]

Hi David, the first part yes, it was resolved.

Now i’m having the issue of the images for sections government and more articles, are not lined up properly. even the image i put for hello world, it comes out even smaller than the others. i’m not sure why.

[Bernardo]

for some reason now that I put everything to 2400×1600 it is all the same size, even in the 2 columns.

the issue I see is because of the excerpts. there are some gaps in the excerpt making the images, title and excerpts not align despite changing the length between 15-25 length. i’m not sure how to fix that, maybe adding to the excerpt section rather than let the site generate the excerpt on its own?

I just removed excerpts and the images aligned fine. but for some things i’m going to need to add excerpts.

in the recent news, the excerpts are there and some have 2-3 lines of excerpts but still align correctly. so it could be the columns too?

i’m not sure.

[David]

Images: The various heights occur because those images have a different aspect ratio. Even if you set a specific width and height WordPress will not distort the image to make them fit.
The best advice is to keep all images a set size if possible.
And to leave the Width and Height values in WP Show Posts empty.

If not we can use some CSS like that is being used in the Hero Grid to force the image to fill a space. Let us know if you want that.

Headings: The Dispatch Site adds some CSS to trim all titles to a fixed 2 lines. If you don’t want that then remove this CSS found in Customizer > Additional CSS:

.generate-columns-container article .entry-header .entry-title,
.wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}

Excerpts: again are variable in height – we can again use some CSS to force them to align. But i would need to see some dummy content to help with that.

[Bernardo]

thank you, i’ll save it for future reference.

-B

[David]

You’re welcome.

[Author]

Posts