Style in horizontal blocks

I will be glad to do this for you. Please send me the page the shortcode is being used on plus the page with the look you like. Plus the name of the thumbnail sizes you are using.
Thank You

• This reply was modified 6 years ago by johnzenausa. Reason: Thumbnail size

Hi @faun ;

I notice your images have a size of 800×600 so in your shortcode you would add the following argument size='thumnail-size' from the following page as an example: https://codex.ww.wp.xz.cn/Post_Thumbnails. So if you choose the 300px by 300px size it would be size='medium'.

With the following shortcode below as a starter I would get the design using the following css code:

.netsposts-block-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fill,minmax(300px,392px));
    gap: 1em;
}

.netsposts-content {
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	grid-template-areas: "img-link" "posttitle" "postdate" "postexcerpt";
}

.link-img-wrapper {
	grid-area: img-link;
}

.netsposts-posttitle {
	grid-area: posttitle;
}

.netsposts-source {
	grid-area: postdate;
}

.netsposts-excerpt {
	grid-area: postexcerpt;
}

.netsposts-read-more-link {
	display: block;
        margin-top: 5px;
}

.
Now this will effect all instances of the shortcode. If you want to target just this shortcode add the argument shortcode_id='mycustomid' and the css code would then look like the following:

#mycustomid .netsposts-block-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fill,minmax(300px,392px));
    gap: 1em;
    align-items: stretch;
}

#mycustomid .netsposts-content {
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	grid-template-areas: "img-link" "posttitle" "postdate" "postexcerpt";
}

#mycustomid .link-img-wrapper {
	grid-area: img-link;
}

#mycustomid .netsposts-posttitle {
	grid-area: posttitle;
}

#mycustomid .netsposts-source {
	grid-area: postdate;
}

#mycustomid .netsposts-excerpt {
	grid-area: postexcerpt;
}

#mycustomid .netsposts-read-more-link {
	display: block;
	margin-top: 5px;
}

.

As of right now the image looks like this:
https://drive.google.com/file/d/17s_6gxI1zaj-qWFZmLcMoWRWII5xO47e/view?usp=sharing

Notice that the image is small since it’s set to use the default thumbnail. Check to see which thumbnail size the other one is using. They are scaled to 300px by 292px so in the below image I added the css code:

.post-thumbnail.wp-post-image {
    width: 390px;
    height: 292px;
}

which gives the image the same size.
Note: The images are blurry because I’m enlarging the 150px by 150px image.

https://drive.google.com/file/d/1hqOBq10UPDx_y0b6r0G0OqGkTsRJfmCA/view?usp=sharing

Note: If you don’t know the name of the thumbnail just use the argument size='full'.

Okay I see it’s all in english. Will work on creating a file.

You don’t need the excerpt in Dutch?

For now you can change the language of read more with the following argument:
read_more_text='Les Meer'.

Okay I can see on what you are showing me it’s below. I’m surprised the css code I sent you didn’t work.

You’ll might need to grant me temporary access here: https://support.agaveplugins.com/contact

This way I can set up the shortcode also.

Did you checkout this link? https://drive.google.com/file/d/1hqOBq10UPDx_y0b6r0G0OqGkTsRJfmCA/view?usp=sharing

• This reply was modified 6 years ago by johnzenausa.

Is it okay if I deactivate and reactivate the npe plugin so I can have the new language files installed? That is delete then reinstall.

Before uploading the new po/mo files I sent you via email add this argument and see if the date gets displayed in your language.

date_format='%B %e, %Y'