Autoplay progress slider content

[VRANKOVINA]

{
    "title"       : "Slide Title",
    "description" : "This a short blurb of text about whatever the image is showing. It is effective to keep it simple.",
    **"image"       : "https://picsum.photos/2400/1600?random=progress-01",**
    "ctaText"     : "Learn More",
    "ctaLink"     : "#thing-1"
  },

Hello there

Is it possible to insert a shortcode instead of the image URL and if yes, how?

Or other way - does it have to be an image? My intention is to place there an interactive image with hotspots, which is provided by a 3rd party plugin (pro theme does not have such a feature, which would be very nice…).

[marc_a]

Hey Ondrej,

Thanks for reaching out!

Yes, it is possible to add a shortcode inside the JSON. You can add a new data something like this one:

[
  {
    "title"       : "Slide Title",
    "description" : "This a short blurb of text about whatever the image is showing. It is effective to keep it simple.",
    "image"       : "https://picsum.photos/2400/1600?random=progress-01",
    "ctaText"     : "Learn More",
    "ctaLink"     : "#thing-1",
    "shortcode"   : "[test_data]"
  }
]

As you can see, I added a new data called shortcode with the shortcode name [test_data]. To call the shortcode in your slider, your dynamic code must be like this one {{dc:looper:field key="shortcode"}}. The challenging part here is to match the current design because the interactive image with hotspots has its own set of HTML codes.

On the other hand, if the idea above doesn’t work for you, I suggest that you create a .gif image format that has the same design as the interactive image with hotspots. In that way, you can just change the image URL.

Hope that helps.

[VRANKOVINA]

well my shortcode is something like this: [imh_6310_image_map id=“1”]

Adding an image object and setting it’s content to your suggestion - all renders black (background color of the Figure DIV) but the progress bar is still visible and running.

I did not remove the original image object from the Figure Div but added another one on top and set the size to 40x40px and content fill to none so if there would be no conflict at least the original image should be rendered with a 40px black margin at the top.

I tested it with the text object as well… and raw data object… my shortcode screws it up.

This is in the JASON code:

[
{
“title” : “And Another One”,
“description” : “We can keep this content moving as long as you want it to. Fill up your slider with whatever content you have.”,
“image” : “https://picsum.photos/2400/1600?random=progress-03”,
“ctaText” : “Learn More”,
“ctaLink” : “#thing-3”,
“shortcode” : “[imh_6310_image_map id=“1”]”
}
]

removing the shortcode from the JSON all’s roger.

[marc_a]

Hey Ondrej,

The image element will get the image src and your shortcode it contains the image URL and HTML codes that’s why it is showing as black which means undefined. To show your shortcode, I suggest that you add a text element under the figure div then add this code {{dc:looper:field key="shortcode"}}. Please also update your JSON shortcode format to something like this one:

{
    "title"       : "And Another One",
    "description" : "We can keep this content moving as long as you want it to. Fill up your slider with whatever content you have.",
    "image"       : "https://picsum.photos/2400/1600?random=progress-03",
    "ctaText"     : "Learn More",
    "ctaLink"     : "#thing-3",
    "shortcode"   : "[imh_6310_image_map id='1']"
  }

Hope that helps and let us know how it goes.

[VRANKOVINA]

Well using simple ’ quotes was the first trick I tried. Unfortunately the plugin generates the shortcode with double quotes and there’s no way to change that.

The JSON with simple quotes does not break the code and the random images are showing up but the shortcode’s “content” does not.

I tried a little different thing: I placed the text element into a div - the same way the image element is integrated. Set the Z index of the image div to -2 and the div of the text element to -1 so this one is on top for sure… I did not expect an effect on the rendered content, I just made sure the shortcode container is not covered by the image.

[ruenel]

Hello Ondrej,

Please make sure to use the correct double quotes in your dynamic content shortcode:

You should use this: {{dc:looper:field key="shortcode"}}

Kindly let us know how it goes.

[VRANKOVINA]

@ruenel

{{dc:looper:field key=“shortcode”}}

Dang… maybe I should just stop copy & paste once and forever… Thx for the heads-up.
Now after changing the quotes the “background” image and the hotspots show up, but the on mouse over effect does not work. I’ll try to change the z index.

EDIT: Even with the Z index of 9999 no mouse over functionality.
The console in chrome does not spit out any useful information either.

[ruenel]

Hello Ondrej,

The mouse over were disabled because you have set it in your “No Pointer Events” option in the DIV element settings.

Even if you can hover over it, be advised that the Image Map Hotspot plugin is not fully supported in the theme. It may not work properly if you insert it inside the slider. You see, the slider might be able to render the shortcode but the shortcode itself cannot fully load its needed JS scripts to display the hotspot info. We do not recommend adding this shortcode inside slide. It might also create a conflict with the slider sooner or later.

Hope this helps.

[VRANKOVINA]

yeah… right… too much trouble for a fancy… I just need to sold the bad news

thx for the support very much. Btw. do you know any option of a similar plugin that could work? I need these hotspots in an image, because including a legend to the image is pretty “boring”. Like numbering the POIs and write the text into the description…

[christian]

Hey Ondrej,

Regretfully, we haven’t tested a plugin with the functionality you need.