[Resolved] Image gallery repeating image if there aren't enough to fill spaces

[Author]

Posts

[richardG-4]

Tell us what you are trying to do? Display a view and also a template with an image slider, some posts will have 1-2 images, while others will have 16+. This leaves the slider displaying the same 1 or 2 images over and over again.

The current solution I have is to do conditional displays based on how many images are in the repeating image gallery field, however, that's not working.

[wpv-conditional if="( '[wpv-image-gallery-count]' gt '1' )"]
The Slider
[/wpv-conditional]

Once I get that working I would have another conditional image that is just the featured image, and is only displayed if there is only 1 image in the slider, or if there are no images in the slider.

Is there any documentation that you are following?
https://toolset.com/forums/topic/conditional-output-according-to-the-number-of-items/

What is the link to your site? hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

1. To conditionally show the "Image Slider" block based on the count of images coming from a repeating image field, you'll first need a custom shortcode, which can give you the count:

add_shortcode('get-image-field-count', 'get_image_field_count_fn');
function get_image_field_count_fn() {

	$custom_fields_array = get_post_meta( get_the_ID(), 'wpcf-listing-images', false );

	return count($custom_fields_array);
}

Note: Please replace "listing-images" slug with the actual slug of your image field. This code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through active theme's "functions.php" file.

Next, please add "get-image-field-count" in the "Third-party shortcode arguments" section, at WP Admin -> Toolset -> Settings -> Front-end Content.

2. After that, you can include a "Conditional" block in your template and add a condition based on this custom shortcode's returned number.
( ref: https://toolset.com/documentation/user-guides/gutenberg/using-toolset-conditional-block/ )

Example screenshot: hidden link

3. Using the same conditional block method, you can show the featured image or the image from this field in a gallery or image block, when the slider images are in less than the desired number.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[richardG-4]

Hi, thanks for the reply.
I believe I did this exactly as you said
1. Added the shortcode to my Toolset custom code snippets, I almost forgot to activate it, but went back and did that.
2. Replace the slug with mine (which was image-gallery)
3. Added the shortcode to my third party shortcodes in Toolset Front End settings
4. Added conditional block with the shortcode as your screenshot outlined.

I'm not seeing it for some reason, even if I change the operator from less than to greater than, or vice versa, just to test if I had the operator wrong.

My shortcode:

<?php
/**
 * Count image gallery items for conditional output
 */

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

add_shortcode('get-image-field-count', 'get_image_field_count_fn');
function get_image_field_count_fn() {
 
    $custom_fields_array = get_post_meta( get_the_ID(), 'wpcf-image-gallery', false );
 
    return count($custom_fields_array);
}

My conditional block:
hidden link

[richardG-4]

This is a side note, but is there a way I can crop the image slider more so they are taller? I did mark "crop images" on the settings, but it only cut off a few pixels, and the client wants the images to be more square than rectangular, yet I don't see a way to do that with Blocks. I'm fairly certain I could have done it with old Views, but I'm still getting the hang of Blocks.

Thanks.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update.

The steps that you've shared seem to be correct.

Do you get the correct count of images from the image field, if you just use the shortcode in your content template [get-image-field-count]?
( you can use a "Shortcode" or a "Fields and Text" block for this test )

You're welcome to share temporary admin login details, along with a link to a page where this conditional block can be seen, so that I can troubleshoot this in more detail.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

I'll also look into the image sizing and will guide accordingly.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

First, please accept my apologies for the delay in getting back on this, as we had an unusually busy queue at the start of the week.

I noticed that on the website, a layout "Homes" and a content template "Template for Homes", both are assigned to the post type "Homes" single pages.

And since a layout overrides the content template, that blocks based content template is not coming into play. Was this layout introduced recently?

As for the custom shortcode [get-image-field-count], it is returning the count of the number of images from the custom field correctly. To test it, I added it to the bottom of the layout.

Backend:
hidden link

Frontend ( post: Home 389 ):
hidden link

You can remove the layout assigned to this post type and test the conditional block again from the content template. In case the issue still persists, please keep the conditional block intact and let me know, so I can look into it further.

[richardG-4]

Hi, I actually gave up on Blocks, it just wasn't working for me. I was hoping to get the hang of Blocks, but after the code broke over night, with no one touching it, which caused the View to go full width instead of being inside a container, and also giving me a "Resolve this as HTML" (or something), I gave up and went back to Views.

Views works perfectly on it's own, the only missing functionality I have for this project is the image slider. I may be able to accomplish this with a Bootstrap slider, but I'm not sure how. I have someone from the Facebook group that is going to try to help me tomorrow morning in about 12 hours from now. Hopefully he can get this conditional functionality working as well, I'll keep you informed.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update.

We're constantly improving the Blocks editor, based on the feedback and suggestions that we receive from the users and it has in fact come along way from where it initially started.

But for specific requirements where complex custom HTML or nested views are involved, you can always switch to the classic Views.

If you're planning to incorporate Bootstrap slider into Views, you'll find instructions from this reply useful:
https://toolset.com/forums/topic/gallery-options/#post-1503019

Note: those instructions are for Bootstrap 3, but the base concept and the steps will remain the same for Bootstrap 4 as well.

[richardG-4]

I ended up hiring someone who built a solution using Repeatable Field Groups in a View, so it was a nested View. Hope that helps someone else find a solution when trying to build a View slider from repeatable field items!