[Resolved] Grid Magazine on Home as Dispatch theme on another site

[Roger]

Hi!

How can I use the Dispatch theme’s grid magazine in another theme?

I would like to just use the grid as my theme has a lot of customizations and I wouldn’t want to lose them.

I followed these instructions (https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439597). But I didn’t get the same result.

I’m using WPSP Pro, but I didn’t get an interesting result, especially on mobile…

[Ying]

Hi Roger,

I would recommend trying the Query loop block of GenerateBlocks 1.5.
https://docs.generateblocks.com/article/query-loop-overview/

We’ve merged WPSP’s function into the Query loop block, and once your WPSP pro license is expired, we’ll stop supporting the WPSP plugin.

Let me know if you need further help.

[Roger]

Hi Ying,

Sorry. But I didn’t understand how to build the grid… all I could do was display the posts without the same result as the Dispatch theme…

[David]

Hi there,

you supplied a link to the Mais Renda site – is that the site you’re trying to add the Magazine Grid to ?
If so then do you want to be an identical match the Dispatch site ?

[Roger]

Hi David,

Yea! I would like to use the Dispatch Grid on the home page of this site (link in box).

I like the design of Dispatch’s grid magazine and would like to use it.

[David]

OK – see my reply here, which explains what to do ….

https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439597

[Roger]

It worked. But I have some questions…
1. How to increase the contrast between the image and the text?
2. How to decrease the distance between the title and abstract text lines
3. Grid posts are repeating below the grid. Is it possible to hide them?

[Fernando]

Hi Roger,

1. In the CSS code you added for the Dispatch Grid, look for this code:

.wpsp-card .wpsp-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5% 8%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.35);
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(30%, rgba(80, 50, 50, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(
    0deg,
    rgba(80, 50, 50, 0.5) 30%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

Then, replace it with something like this:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

Kindly replace 0.5 in the background-color to change the opacity, making the contrast more or less evident.

2. You’re currently displaying only the title in the grid. To clarify, may we know which abstract text lines you’re referring to?
3. Referring to the WP codex, we can use this PHP snippet.
Reference: https://codex.wordpress.org/Making_Custom_Queries_using_Offset_and_Pagination

add_action('pre_get_posts', 'myprefix_query_offset', 1 );
function myprefix_query_offset(&$query) {

    //Before anything else, make sure this is the right query...
    if ( ! $query->is_home() ) {
        return;
    }

    //First, define your desired offset...
    $offset = 4;
    
    //Next, determine how many posts per page you want (we'll use WordPress's settings)
    $ppp = get_option('posts_per_page');

    //Next, detect and handle pagination...
    if ( $query->is_paged ) {

        //Manually determine page query offset (offset + current page (minus one) x posts per page)
        $page_offset = $offset + ( ($query->query_vars['paged']-1) * $ppp );

        //Apply adjust page offset
        $query->set('offset', $page_offset );

    }
    else {

        //This is the first page. Just use the offset...
        $query->set('offset',$offset);

    }
}

add_filter('found_posts', 'myprefix_adjust_offset_pagination', 1, 2 );
function myprefix_adjust_offset_pagination($found_posts, $query) {

    //Define our offset again...
    $offset = 4;

    //Ensure we're modifying the right query object...
    if ( $query->is_home() ) {
        //Reduce WordPress's found_posts count by the offset... 
        return $found_posts - $offset;
    }
    return $found_posts;
}

I’ve set the offset to 4 since that’s the number of posts in your grid.

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Kindly let us know how it goes.

[Roger]

Thank you!

[Fernando]

You’re welcome Roger!

[Author]

Posts