Search Results for 'post grid'

[jeff.holt90x]

jeff.holt90x

#290760

Hi Guys,

weird issue.
The “Post Grid/Carousel” is not displaying propery size.
I have high doubt it is theme problem not block problem.

We tested the exact same thing on another client website it is fine.

[jeff.holt90x]

jeff.holt90x

#290760

Hi Guys,

weird issue.
The “Post Grid/Carousel” is not displaying propery size.
I have high doubt it is theme problem not block problem.

We tested the exact same thing on another client website it is fine.

[Anonymous]

Anonymous

#290738

Hi there,

We can assist you on that.

You can make a Portfolio in Kadence using Post Grid/Carousel or Portfolio Grid/Carousel Block.

First, your “Portfolios” be added as a Custom Post Type (CPT). It would be easier to create a template for their “single pages”.

We recommend using a 3rd party plugin for creating your CPTs. Here’s our guide about adding CPTs: https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-post-type/

Once you have set up your Portfolio CPT and the posts, you can show them on normal pages using our blocks.

– Post Grid/Carousel: https://www.kadencewp.com/help-center/docs/kadence-blocks/kadence-blocks-post-grid-carousel-block/
– Portfolio Grid/Carousel: https://www.kadencewp.com/kadence-blocks/portfolio-grid-carousel-block/

Let us know how we could help you further.
 
Kind Regards,
Michael Taro

[Karla]

Karla

#290726

Hi, Nicolae.

I apologize for the delay in getting back to you.

To clarify – the Virtue Premium theme has built-in shortcodes. You can refer to this page for shortcode references – https://docs.kadencewp.com/virtue-premium/shortcodes/

Please try changing the code snippet that Eze gave previously and see if your shortcode’s output will be more accurate:

unction custom_blog_grid_shortcode($atts) {
    // Extract the attributes
    $atts = shortcode_atts(array(
        'items' => 4,
        'columns' => 2,
        'post_id' => ''
    ), $atts, 'blog_grid');

    // Convert the post IDs to an array
    $post_ids = explode(',', $atts['post_id']);

    // Query the posts
    $args = array(
        'post_type' => 'post',
        'post__in' => $post_ids,
        'posts_per_page' => $atts['items'],
        'orderby' => 'post__in'
    );

    $query = new WP_Query($args);

    // Start output buffering
    ob_start();

    if ($query->have_posts()) {
        echo '<div class="custom-blog-grid" style="display: grid; grid-template-columns: repeat(' . esc_attr($atts['columns']) . ', 1fr); gap: 20px;">';

        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="grid-item">';
            if (has_post_thumbnail()) {
                echo '<div class="post-thumbnail">';
                the_post_thumbnail('medium');
                echo '</div>';
            }
            echo '<h2 class="post-title"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div class="post-excerpt">' . get_the_excerpt() . '</div>';
            echo '</div>';
        }

        echo '</div>';
    }

    // Reset post data
    wp_reset_postdata();

    // Return the content
    return ob_get_clean();
}
add_shortcode('blog_grid_custom', 'custom_blog_grid_shortcode');

Use the new shortcode name on your page content (e.g. ‘[blog_grid_custom items=4 columns=2 post_id=”2930,3109,2936,3090″] ‘).

I hope this helps, and let me know if I can help you further.

Regards,
Karla

[emmasss0022]

emmasss0022

#290718

I’d like to create a custom post type for “portfolio items” and showcase them in a visually appealing grid layout. I’m interested in using Kadence Blocks for this to maintain consistency with the rest of my website’s *Login to see link design.

[emmasss0022]

emmasss0022

#290718

I’d like to create a custom post type for “portfolio items” and showcase them in a visually appealing grid layout. I’m interested in using Kadence Blocks for this to maintain consistency with the rest of my website’s *Login to see link design.

[ashley-1436]

ashley-1436

#290697

Hi Michael,
Many thanks for your reply.
Your system won’t let me upload a movie file to demonstrate what I’m referring to (file types are all still images I think) but I’ll have another go at another description.
I’m not talking about Hover Animation, I’m asking about setting the block so post titles are showing over the images by default on mobile and when hovered on desktop.
On mobile when you scroll over the images in the grid the title doesn’t always appear and sometimes to get the title to appear the system thinks you have tapped on the image and it opens the link to that post when all you were trying to do was see what the title was.
I would like the titles to be showing over the grid images by default in mobile view as they currently do when you hover on desktop.
It’s a brilliant block for desktop as hovering with your mouse and clicking to launch the link are two very different actions but it’s less user-friendly on mobile where scrolling and tapping are less well defined further impacted by the fact that you can scroll over the images without the titles appearing. Therefore,
If you have another method of receiving the screen recording it will make it easier for you to understand what I’m talking about.
Thanks

[Nicolae]

Nicolae

#290467

Hi michaeltarongoy,

I used the above code and I activated it in Code Snippets, as in the video. I tried it on homepage.

Now I used the shortcode [blog_grid items=4 columns=2 post_id=”2930,3109,2936,3090″] on a test page, https://www.crifst.ro/test/. As you can see, there are much more than 4 posts, and nothing to do with the post IDs used in shortcode.

Best regards,

Nicolae

• This reply was modified 1 year, 9 months ago by Nicolae.

[Anonymous]

Anonymous

#290459

Hi Nicolae,

Can you send the complete shortcode you used?

It is odd that it used random posts though. The code Eze gave ran the Query based on the parameter fetched from the post_id.

Did you insert the shortcode on a page with a block that is already running its own Query? Blocks like the Post Grid/Carousel and the Adv Query Loop are examples.

Can you try if the issue happens on a newly created page/post?

Let us know if we can assist you further.

Kind Regards,
Michael Taro

[Eze]

Eze

#290448

Hi Nicolae,

To create a blog grid in WordPress that displays specific posts based on their IDs, you can use a custom shortcode. However, the default WordPress shortcodes do not support specifying posts by their IDs directly.

As a workaround, you can achieve this using this custom function:

function custom_blog_grid_shortcode($atts) {
    // Extract the attributes
    $atts = shortcode_atts(array(
        'items' => 4,
        'columns' => 2,
        'post_id' => ''
    ), $atts, 'blog_grid');

    // Convert the post IDs to an array
    $post_ids = explode(',', $atts['post_id']);

    // Query the posts
    $args = array(
        'post_type' => 'post',
        'post__in' => $post_ids,
        'posts_per_page' => $atts['items'],
        'orderby' => 'post__in'
    );

    $query = new WP_Query($args);

    // Start output buffering
    ob_start();

    if ($query->have_posts()) {
        echo '<div class="custom-blog-grid" style="display: grid; grid-template-columns: repeat(' . esc_attr($atts['columns']) . ', 1fr); gap: 20px;">';

        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="grid-item">';
            if (has_post_thumbnail()) {
                echo '<div class="post-thumbnail">';
                the_post_thumbnail('medium');
                echo '</div>';
            }
            echo '<h2 class="post-title"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div class="post-excerpt">' . get_the_excerpt() . '</div>';
            echo '</div>';
        }

        echo '</div>';
    }

    // Reset post data
    wp_reset_postdata();

    // Return the content
    return ob_get_clean();
}
add_shortcode('blog_grid', 'custom_blog_grid_shortcode');

Here is how to add the custom function to your website using the Code Snippets plugin:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

After adding the above code, you can use the shortcode in your page like this:
[blog_grid items=4 columns=2 post_id=”23,37,101,123″]

This will display a grid of posts with the specified IDs in the layout you defined.

Here is a screencast for your reference:
https://share.zight.com/L1ub2J2l

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

[Karla]

Karla

#290358

Hi, Gabi!

Glad you reached out.

There are style settings for the Post Grid/Carousel block.

In the initial style, choose the third option – https://share.zight.com/QwuookG4

This should achieve a similar layout as your blog category archive pages.

I hope this helps, and let me know if I can assist you further.

Regards,
Karla

[Gabi]

Gabi

#290276

Hello, on my clients website I am using your Ascend Premium theme with Kadnece Blocks and Kadence Blocks Pro. I have made a page with blog post with Post grid – Blog page
But the Archive Blog category page looks like this – link

How do I achive the Archive page – post grid to look like the Blog page? Thanks in advance, best regards Gabi

[Gabi]

Gabi

#290276

Hello, on my clients website I am using your Ascend Premium theme with Kadnece Blocks and Kadence Blocks Pro. I have made a page with blog post with Post grid – Blog page
But the Archive Blog category page looks like this – link

How do I achive the Archive page – post grid to look like the Blog page? Thanks in advance, best regards Gabi

[teejayhidalgo]

teejayhidalgo

#290200

Hi al2,

The Query Loop Adv block is primarily focused on retrieving and displaying textual content from posts or custom post types.

Plugins like WP Grid Builder are specifically designed to extend WordPress’s capabilities by focusing on visual content layout and customization, including media files. These plugins provide a specialized toolset and interface for users who need to create visually rich grids and layouts on their websites.

Currently, there is no workaround to query the Media Library for this block. Even if you manage to change the query, it lacks built-in capabilities to handle and display media files directly within its output. This is because its template structure and design are tailored toward textual content rather than media.

You could also submit a feature request here: Kadence Blocks Feature Requests so the Kadence team can consider the feature you have in mind. Other users will also be able to vote for the feature request, which will help indicate if there is enough interest in this feature.

I hope this helps. If you have further questions, please let us know; we’ll be happy to help.

Best regards,
Teejay.

[Karla]

Karla

#289040

Hi, Michelle.

Try to select a smaller image file for the Post Grid/Carousel block. To give you an idea, the images are rendered with 381 × 254 px size, but the image files are 768 × 576 px in size.

You can add a new image size and regenerate thumbnails using other plugins like:
– https://wordpress.org/plugins/simple-image-sizes/
– https://wordpress.org/plugins/regenerate-thumbnails/

I hope this helps you further with your optimization.

Regards,
Karla

[Karla]

Karla

#289039

Hi, Konrad!

You can use the render_block() function in a code snippet.

The code will depend on where you want to place the data-attribute, but here’s a code sample:

 function add_data_attrib( $block_content, $block ) {

 if ( $block['blockName'] === 'kadence/postgrid' ) {
	 $block_content = str_replace( '<div class="kadence-post-image-inner-intrisic"', '<div class="kadence-post-image-inner-intrisic" data-attribute="here"', $block_content);
 }
 
 return $block_content;
}
add_filter( 'render_block', 'add_data_attrib', 10, 2 );

Here’s a link to our guide – https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

I hope this helps, and let us know if we can assist you further.

Regards,
Karla

[Karla]

Karla

#288965

Hi, Michelle!

Thanks for the file.

After more tests, I think the main reason for the CLS for mobile views is coming from your slider at the top of the home page.

To reduce the CLS impact, add this custom CSS code to the Row Layout block where you added the Post Grid/Carousel block:

@media ( max-width: 767px ) { 
selector .kt-post-grid-layout-carousel-wrap:not(.is-initialized) { 
 height: 409px;
 overflow: hidden;
} 
}

Here’s a screenshot of where you can find the setting – https://share.zight.com/Z4uNKWbY

After saving the changes, make sure to purge the WP Rocket cache.

I hope this helps, and let me know how it goes.

Regards,
Karla

[sarah-5095]

sarah-5095

#288932

I have set up a few Portfolio Grid/Carousel blocks in my blog posts and I am wondering if these will show up as internal links on Google Search Console?

[sarah-5095]

sarah-5095

#288932

I have set up a few Portfolio Grid/Carousel blocks in my blog posts and I am wondering if these will show up as internal links on Google Search Console?

[Karla]

Karla

#288815

Hi, Robert!

I apologize for the delay in getting back to you.

I can confirm that it’s a bug. For a temporary fix, add this to your website’s Customizer > Additional CSS to remove the other borders for all of your Query Loop(Adv) block:

.kb-query-grid-wrap .kb-query-item.kb-query-block-post {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

I hope this helps. Let me know if I can assist you further with this.

Regards,
Karla

[Karla]

Karla

#288813

Hi, Konrad!

I created an element to add the custom content blocks to the Post Grid/Carousel block on a specific page. It worked as expected and the sticky post was still shown first – https://share.zight.com/v1u9xxZR

Could you give us temporary access to your website so we can better check your setup? Please send the details to our premium/pro support here – https://www.kadencewp.com/premium-support-tickets/

Kind regards,
Karla

[architabasandrai]

architabasandrai

#288795

Hi Konrad,

From Pinned posts, do you mean sticky posts? There is an option in the Post grid carousel to allow sticky posts. Check the screen recording for reference: https://share.zight.com/4gu89RjA

Can you share the screen recording or screenshot of the Post grid carousel block settings, so I can try to replicate the issue at my end? You can use apps like Zight or Loom to record your screen or capture screenshots of the issue and easily share the links with us.

For initial troubleshooting, please could you do the steps listed in this article https://www.kadencewp.com/blog/how-to-troubleshoot-your-website? This will help us rule out these usual causes of WordPress issues, so we can move on to investigating other possible causes of this issue on your website.

Please let us know how it goes, we’ll be more than happy to help.

Best regards,
Archita

[Konrad Neuwirth]

Konrad Neuwirth

#288792

We are using a Post Grid/Carousel in conjuection with a Kadence Element to display it properly. We followed the instructions for that at *Login to see link and it all works nicely, but for one thing: the “Pinned Posts” switch seems to not work. There are pinned posts in the category we are selecting, but they are not being displayed as the first elements in the carousel. I don’t see anything to try that I haven’t, but maybe I’m missing something.

Did anyone else get this to work?

[Konrad Neuwirth]

Konrad Neuwirth

#288792

We are using a Post Grid/Carousel in conjuection with a Kadence Element to display it properly. We followed the instructions for that at *Login to see link and it all works nicely, but for one thing: the “Pinned Posts” switch seems to not work. There are pinned posts in the category we are selecting, but they are not being displayed as the first elements in the carousel. I don’t see anything to try that I haven’t, but maybe I’m missing something.

Did anyone else get this to work?

[Christina]

Christina

#288754

I have a shortcode to add to a query card. I’ve hooked it into kadence_blocks_post_loop_header for the regular post grid/carousel, but I can’t figure out how to insert into a query card.

[Christina]

Christina

#288754

I have a shortcode to add to a query card. I’ve hooked it into kadence_blocks_post_loop_header for the regular post grid/carousel, but I can’t figure out how to insert into a query card.