Search Results for 'post grid'

[Eze]

Eze

#292207

Hi Andy,

Your Post Grid has an additional column beside each post grid item. Here is a screencast for your reference:
https://share.zight.com/Z4uEJKZ7

The code adding this additional column appears to be from the previous theme version, for which I noticed you are not using the latest version of the Kadence Theme, Kadence Blocks, and Kadence Blocks Pro plugins. Please update them accordingly.

In the meantime, try using this CSS to see if it resolves the issue:

.kt-blocks-post-grid-item.gallery{
display:block;
grid-template-columns:inherit;
}

Cheers,
Eze

[Eze]

Eze

#292150

Hi Andy,

To better help with this, please share a link to the page with the post grid. For privacy, you can check “set as private reply” before submitting your reply.

In the meantime, please check if you added any custom CSS adjusting the post grip gap.

Cheers,
Eze

[Andy Smith-Dane]

Andy Smith-Dane

#292120

I’ve designed the post grid and it displays fine on the front end, but it is not displaying properly on front end. I’ve cleared all caches so it’s not a cache issue. Has anyone come across this before?

In editor:

Frontend:

[Andy Smith-Dane]

Andy Smith-Dane

#292120

I’ve designed the post grid and it displays fine on the front end, but it is not displaying properly on front end. I’ve cleared all caches so it’s not a cache issue. Has anyone come across this before?

In editor:

Frontend:

[deni80326]

deni80326

#292106

Having trouble with the Kadence theme’s ‘Post Grid/Carousel’ block? It can be so frustrating when things don’t display as they should! While troubleshooting, take a breather with Stardew Valley—a delightful best game where you can unwind by farming, fishing, and exploring a peaceful world.

[Eze]

Eze

#292099

Hi Frank,

Thank you for the additional information.

Yes, you can this custom CSS to remove the post grid excerpt from the Food & Drinks page:

.page-id-58 .entry-content p {
    display:none;
}

If you get to add the post grid to other pages, kindly replicate the custom CSS and change the page ID. Here is how to find your page or post ID:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-find-the-page-or-post-id/

I hope this helps.

Cheers,
Eze

[peter.rutkowski]

peter.rutkowski

#292068

The Kadence block Post Grid/Carousel has the option to display carousel controllers with left/right arrows as well as buttons (aka Dots) below the carousel. It seems that the block uses JS to add the controller dots and by default the dots have a property of tabindex=”-1”. Even if I override the tabindex and set it to “0”, as soon as the button is clicked the button elements have their tabindex property reset to -1.

Is there a setting or a hook that can be used to change the tabindex property? For accessibility standards the buttons should be navigable via keyboard and not strictly rely on a mouse to control the carousel.

Interestingly enough, the left/right arrows for the carousel ARE accessible by keyboard.

[peter.rutkowski]

peter.rutkowski

#292068

The Kadence block Post Grid/Carousel has the option to display carousel controllers with left/right arrows as well as buttons (aka Dots) below the carousel. It seems that the block uses JS to add the controller dots and by default the dots have a property of tabindex=”-1”. Even if I override the tabindex and set it to “0”, as soon as the button is clicked the button elements have their tabindex property reset to -1.

Is there a setting or a hook that can be used to change the tabindex property? For accessibility standards the buttons should be navigable via keyboard and not strictly rely on a mouse to control the carousel.

Interestingly enough, the left/right arrows for the carousel ARE accessible by keyboard.

[Karla]

Karla

#292060

Hi there!

Glad you reached out to us and apologies for the delay in getting back to you here.

I can see that you are using a specific ratio for the images now. Here’s a CSS code that you can add to show all of them fully:

#Alabama-Counties .kadence-post-image-intrisic .kadence-post-image-inner-intrisic img {
    object-fit: contain;
}

This is how they should look after – https://share.zight.com/2NuQJZnL

The CSS code will specifically be applied to the images of the Post Grid block inside the Group block with the HTML Anchor “Alabama-Counties”. Should you want to apply it to other Groups, add another line of CSS code with the Group block IDs.

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

[N Web Team]

N Web Team

#291951

Maybe this link will help you:

https://www.kadencewp.com/help-center/docs/kadence-blocks/how-to-design-a-post-grid-carousel-using-a-kadence-element/

I came across this as I was looking for a solution to a different problem myself. It didn’t solve my problem, but it sounds like it might solve yours.

[Kim]

Kim

#291928

I have setup a post/grid carousel to display exactly the content I want based on a category within a custom post type. The one missing element is to be able to add a custom field from ACF underneath each grid item’s title. Is that possible in the Post Grid/Carousel block?

Or is there another approach elements?

[Kim]

Kim

#291928

I have setup a post/grid carousel to display exactly the content I want based on a category within a custom post type. The one missing element is to be able to add a custom field from ACF underneath each grid item’s title. Is that possible in the Post Grid/Carousel block?

Or is there another approach elements?

[Xoonity]

Xoonity

#291913

I can reproduce the issue on a new page:

Add the “Post Grid/Carousel” block
“Number of items” = 6
“Layout Settings”/Layout = Carousel
“Columns” = 3
“Image Settings / Align image = Top

[Frank]

Frank

#291903

OK I think I found my problem ( it’s always operators fault ) I use Pages and the post categories. So the CSS was changing the page viewed on the site.
This is the actual blog category at the css changes that fine.
https://berlingorhamnh.com/category/where-to-eat/

The page I created using the page option set to blog grid are here:
https://berlingorhamnh.com/food-drink/

The code does nothing to remove the excerpts on that page. Rinse lather repeat for all the pages.
Any solutions/css to remove excerpts from a page?
something like:
.postid-700 .entry-content {
display:none;
}

[Eze]

Eze

#291806

Hi there,

Kadence does not have a free design pattern. However, I understand you want to make your News page your default blog page. You can easily do this by setting the News page as your default Posts page in your Dashboard > Settings > Reading. This will automatically display all your new and existing posts on your News page in a grid layout. You can customize this layout from the theme Customizer > Posts/Pages Layout > Archive Layout.

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

Here is a guide on how to customize your page/post layout:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-setup-page-post-settings/

Alternatively, you can use the Kadence Posts block to display your posts as a grid anywhere on your site:
https://www.kadencewp.com/help-center/docs/kadence-blocks/posts-block/

I hope this helps.

Cheers,
Eze

[Karla]

Karla

#291731

Hi there!

Apologies for the delay in getting back to you here.

While there is no built-in option to show posts based on a custom field value, the Post Grid/Carousel block has a filter that you can use in a PHP code snippet to affect the query. The code snippet goes like this:

add_filter( 'kadence_blocks_pro_posts_grid_query_args', function( $args, $attributes ) { 
    if ( ! is_singular( 'CUSTOM_POST_TYPE_SLUG_HERE' ) ) { 
        return $args; 
    } 

    $post_id = get_the_ID(); 
    $args['post__not_in'] = array( $post_id ); // Exclude the current post

    // Get the custom field value of the current post
    $custom_field_value = get_post_meta( $post_id, 'your_custom_field_key', true );

    if ( ! empty( $custom_field_value ) ) { 
        $args['meta_query'] = array( 
            array( 
                'key'   => 'your_custom_field_key', 
                'value' => $custom_field_value, 
                'compare' => '=', 
            ), 
        ); 
    } 

    return $args; 
}, 20, 2 );

This code will detect if the view is your CPT single page. Then, apply the query to the Post Grid/Carousel block found there. The posts should exclude the current post viewed but show other posts with the same custom field value.

There is another block that could give you flexibility with the post grid template. Refer to our docs links here:
– Query Loop (Adv) Block
– Custom Queries for Advanced Query Loop Block

I hope this helps. Let us know if we can help you further.

[Shayne Sanderson]

Shayne Sanderson

#291580

Hi,

I’m glad you reached out.

In the “Advanced” settings tab for the Post/Grid Carousel block, you can enable Taxonomies in the “Above Title Taxonomy” section and in the “Footer Meta” section you can enable Tags and Categories.

Thanks and let me know if this is what you were looking for.

[scott-3192]

scott-3192

#291561

I have CPTs set up to work with Kadence Post Grid Block.
I can use categories and tags to filter the block
However, the block will not display category or tag metadata on the webpage. Only Date and author.

Is this a problem with the Kadence post block?

Many thanks for any advice

[scott-3192]

scott-3192

#291561

I have CPTs set up to work with Kadence Post Grid Block.
I can use categories and tags to filter the block
However, the block will not display category or tag metadata on the webpage. Only Date and author.

Is this a problem with the Kadence post block?

Many thanks for any advice

[jan-3702]

jan-3702

#291458

Hello,

I created a posts carousel and instead of the standard way to display posts I used a Kadence Content Section Element.
I used this tutorial: *Login to see link

In the Element I use kadence blocks that are not yet used in the page where the carousel is shown. (an icon for instance)
When I look at the source code, the icon block css (/wp-content/plugins/kadence-blocks/dist/style-blocks-icon.css?ver=3.2.54) is loaded at the bottom of the file just before the </body> tag and not in the <head> section where normally block css is loaded.

This creates problems as the css to customize the block (ex: the background color of a stacked icon block) is overwritten with the default css as it is loaded last.

When I add an icon the the page before the carousel then the icon block css is loaded in the <head> and the customizations in the Element are displayed correctly.

This has to be a bug or am I doing something wrong?

[jan-3702]

jan-3702

#291458

Hello,

I created a posts carousel and instead of the standard way to display posts I used a Kadence Content Section Element.
I used this tutorial: *Login to see link

In the Element I use kadence blocks that are not yet used in the page where the carousel is shown. (an icon for instance)
When I look at the source code, the icon block css (/wp-content/plugins/kadence-blocks/dist/style-blocks-icon.css?ver=3.2.54) is loaded at the bottom of the file just before the </body> tag and not in the <head> section where normally block css is loaded.

This creates problems as the css to customize the block (ex: the background color of a stacked icon block) is overwritten with the default css as it is loaded last.

When I add an icon the the page before the carousel then the icon block css is loaded in the <head> and the customizations in the Element are displayed correctly.

This has to be a bug or am I doing something wrong?

[Eze]

Eze

#291063

Hi Enderson,

Glad you reached out, happy to help.

Are you referring to the Post Grid/Carousel block pagination?

If yes, the pagination inherits the Global Palette, colors 4 and 5. Here is a screencast for your reference:
https://share.zight.com/BluPN0xp

To specifically change the Post Grid/Carousel block pagination color, you can use this custom CSS:

.kt-blocks-page-nav span.page-numbers.current{
    background: blue;
    border-color: red;
    color: white;
}

.kt-blocks-page-nav a.page-numbers {
	border: 2px solid orange !important;
}

Here is how to add the custom CSS to your website:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

You can modify the color as preferred.

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

Cheers,
Eze

[dtwebdesigns.co.za]

dtwebdesigns.co.za

#290992

Good day, I have tried the below solution as you recommended:
Karla
September 22, 2022 at 11:47 pm #280292
Hi there!

I apologize for the delay in getting back to you.

Please note that this block’s default style is to only show the posts’ titles on hover. If you want to override that style, you can add this custom CSS code in Customizer > Additional CSS:

.kb-blocks-portfolio-content-hover-zoomin .kb-blocks-portfolio-grid-item .kb-portfolio-content-item-inner {
opacity: 1;
}
This will be applied to all Portfolio Grid/Carousel blocks on your website. If you have any website cache, clear it after saving your changes.

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

Regards,
Karla

However it doesn’t display the portfolio and only displays when I hover over it. So it is invisible. Here is the page link: https://staging.aninaharmse.co.za/gallery/

Kindly assist in resolving soonest.
Many thanks

[architabasandrai]

architabasandrai

#290950

Hi Christina,

The Endlessly Loop Related Carousel setting just changes the behavior of the carousel when it reaches the end and goes back to the first item. Endlessly loop just makes it appear that the carousel slides continuously instead of going back to the first slide.

Currently, there is no built-in option to change the type of element that displays the related post from a carousel to a grid. However, you can add a custom snippet that will limit the number of items to show in the carousel to match the number of columns you set in the customizer so that it will not add the scroll function.

Try this code snippet using the code snippets plugin: https://www.kadencewp.com/kadence-theme/knowledge-base/advanced/how-to-add-a-custom-filter-or-function-with-code-snippets/

add_filter( 'kadence_related_posts_args', 'customize_related_posts_args' );
function customize_related_posts_args( $args ) {
$args['posts_per_page'] = 3;

return $args;
}

Please see this screen recording for reference: https://share.zight.com/OAuvzJZ2

I hope that helps answer your inquiry. If you have further questions, please let us know, and we’ll be happy to help out.

Best regards,
Archita

[architabasandrai]

architabasandrai

#290768

Hi There,

I’m glad you reached out. I’d be happy to help.

I have tested the Post Grid carousel, but couldn’t replicate it. You can refer to the screencast for reference: https://share.zight.com/kpuv9YGw

Please check your block settings. Could you please provide me with the exact URL of the page, so I can take a closer look?

You can post using “set as private reply”.

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.

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

Best Regards,
Archita