Archived topic

Feature Grid Post (with background image), Magazine/Newspaper style (Gazette)

1 reply · Started by infocus on September 22, 2018

Viewing posts 1–2 of 2

September 22, 2018 at 10:44 am #683941

Hello Tom and team support!
I want something like a feature post with background image. Better if the posts in the header don't repeat after, if a post is “feature” this will display like feature, but not display again.

Like Gazette theme by Automattic: https://wordpress.com/theme/gazette

If is possible some examples, 3 posts, 6 posts, with variant style.

If is possible too, with WPSP and without, for example, the last 3 posts that are "feature" with a different style (background image and title over the image).

Thank you very much!

September 22, 2018 at 4:21 pm #684042

Hi there,

so you are going to need to create 2 lists in WPSP.
List 1 is for the content. Set your list up for how you want it to be displayed. Do not use Pagination as we are going to have 2 lists on the page it wont work. On the More Settings tab set the Offset to 6.
You can add the Shortcode for this list to the page content.

List 2 is for the featured posts.
Posts: set to 6 posts. Again no pagination.
Columns: Set to 1, remove gutters and padding. Uncheck all other options.
Images: leave as is with the Image Location below title
Comtent: Content Type None. Check include title. You can select what Title Element and colors you want.
Meta: Only check the Include Terms and set its position below Title. Change colors if you wish.
Copy this Shortcode for use in the Header Element.

Now create a new Header Element:
https://docs.generatepress.com/article/header-element-overview/

In Hero content. Paste the Shortcode. Inside the following HTML:

<div class="wpsp-grid">add-shortcode-here</div>

Set the Container and Inner Container to Full width and leave the rest of the options. Now set the Display Rules to the page you have added the other list.

Preview the page and go into the Customizer and add this CSS:

.wpsp-grid .wp-show-posts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 420px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 421px) and (max-width: 1024px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: 1fr 1fr;
    }
}

.wpsp-grid .wp-show-posts-inner, .wpsp-grid .wp-show-posts-image, .wpsp-grid .wp-show-posts-image a img {
    height: 300px;
}

.wpsp-grid .wp-show-posts-inner {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-grid .wp-show-posts-image, .wpsp-grid .wp-show-posts-single {
    margin-bottom: 0 !important;
}

.wpsp-grid .wp-show-posts-image a img {
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid .wp-show-posts-entry-meta, .wpsp-grid .wp-show-posts-entry-header {
    position: absolute;
    z-index: 10;
    left: 3%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-grid .wp-show-posts-entry-header {
    bottom: 3%;
    display: block;
}

.wpsp-grid .wp-show-posts-entry-meta {
    top: 3%;
    font-size: 1em;
}

.wpsp-grid .wp-show-posts-entry-meta, .wpsp-grid .wp-show-posts-entry-title a {
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

Note that the first rules will show an error relating to CSS Grid, just ignore them.

Let me know

This archived topic is closed to new replies.

Start building better websites today.