Modern Slider with Dynamic Images Custom Fields

Hello,

I have a situation where each post has more than one image and they were stored in each custom field. For example: IMAGES_IMAGE_ID_1, IMAGES_IMAGE_ID_2, IMAGES_IMAGE_ID_3 and so on.

For the slider, is there a way for me to dynamically increase the last number of the key? {{dc:post:meta key=“IMAGES_IMAGE_ID_1”}} become {{dc:post:meta key=“IMAGES_IMAGE_ID_{dynamically increase}”}}

https://gyazo.com/895297a140c8cb55d0eb7398c960c321

Hi @sbxstrategies,

Thanks for reaching out.
I would suggest you use the Looper Provider with JSON data where the custom field ID should be mentioned like the following one.

[
        {
            "custom_field":"test_1"
        },
        {
            "custom_field":"test_2"
        },
]

And use the {{dc:looper:field key="custom_field"}} where you want the value to be fetched for those custom fields. In the above example, test_1 and the test_2 are the custom fields that I have tested in my local environment and they worked successfully.

Hope it helps.
Thanks

Hi, thank you for the suggestions.

There is one problem though. Let say each post has 5 custom fields for the image. Some posts will have all 5 images, but some will only have 1 or 2. There may be a possibility that some slide will be blank.

Any suggestion to this?

Hello @sbxstrategies,

You can set up a default image for the slides that do not have an image. You can always use element conditions to display or hide the default image. If this is the first you’ve heard of the element conditions, kindly check out this documentation:

Best Regards.

Hi again,

On the Column element, I set Looper Provider to this following JSON

[
    {
        "custom_field":"IMAGES_IMAGE_ID_1"
    },
    {
        "custom_field":"IMAGES_IMAGE_ID_2"
    },
       {
        "custom_field":"IMAGES_IMAGE_ID_3"
    },
       {
        "custom_field":"IMAGES_IMAGE_ID_4"
    },
       {
        "custom_field":"IMAGES_IMAGE_ID_5"
    },

]

On the Slide element, I enabled Looper Consumer and I added the Featured Image with this {{dc:looper:field key=“custom_field”}}

Unfortunately, the images are not showing up. I tried output {{dc:looper:field key=“custom_field”}} on the text editor, but it shows empty

Hi @sbxstrategies,

It will be very difficult to recognize the issue without investigating through the admin dashboard. I would request you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Exact Layout or Page URL where you have added this looper.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Here is my secure note

Hello @sbxstrategies,

There is something wrong with your JSON. Please use this instead:

[
  {
    "image" : "https://your-image-file-URL.jpg"
  },
  {
    "image"       : "https://your-image-file-URL.jpg",
    "description" : "This is an optional description that can be placed on any image."
  },
  {
    "image" : "https://your-image-file-URL.jpg"
  },
  {
    "image" : "https://your-image-file-URL.jpg"
  },
  {
    "image"       : "https://your-image-file-URL.jpg",
    "description" : "Here is another optional description that can be placed on any image."
  },
  {
    "image" : "https://your-image-file-URL.jpg"
  },
  {
    "image" : "https://your-image-file-URL.jpg"
  }
]

Kindly let us know how it goes.

Hi,

Have you read the above reply from @tristup? He was the one told me to use custom_field in JSON :slight_smile: https://gyazo.com/0761e1d3cb05c2eda8a4fbed6a1a280e

@tristup, can you please help me this? I have attached a secure note above

Hello @sbxstrategies,

Either you use custom_field or just simply image in the JSON code, it should work. It did not work in your JSON code because there were some invalid characters like empty space added to the code which made it invalid. I have suggested that you use image in the JSON code because it is more appropriate and easy to understand compared to the custom_field.

Have you check the test page with the updated JSON code already? Please check it now.

Hi,

Sorry but I want the dynamic way to do this not just manually copy the images url and put it on the JSON. Also, not every inventory has the same images.

Here is what I want:
[
{
“image” : “IMAGES_IMAGE_ID_1”
},
{
“image” : “IMAGES_IMAGE_ID_2”
},
{
“image” : “IMAGES_IMAGE_ID_3”
},
]

the “IMAGES_IMAGE_ID_1” is the custom field key

Hi @sbxstrategies, if I may make a suggestion here, maybe the JSON provider is not the right one for you.

The JSON provider is only for static values. For more complicated situations I would recommend the Custom Provider. See …

With this provider you can use the full potential of PHP to fill your looper.

The code below ist just a starting point.

add_filter( 'cs_looper_custom_my_data', function( $result ) {
  
  $looper_output = array();

/* Your Code here */
 $looper_output [0]['image'] = "url1";
 $looper_output [1]['image'] = "url2";
 $looper_output [2]['image'] = "url3";
 
  return $looper_output;
});

and with {{dc:looper:field key="image"}} you can use this dynamic data like in all other looper providers.

Hope this helps.

Hi @sbxstrategies,

I have suggested you use the JSON to get the IDs, but please remember that can’t be used in another Dynamic Content tag as you are expecting here. In this case, I would suggest you follow the way my colleague suggested or Regnalf.

Hope it helps.
Thanks

@Regnalf thank you for your suggestion
@tristup & @ruenel also thank you for your help.

The Custom Provider works on my cases!