Looper Json logo slider

Support
#1

Hi, I’m inserting a part of code into the original looper that should fetch the svg image from URL. So I modified the code like this. I detect two problems, one the image does not resize and two I find the reference to the image tag in the slide under the svg

image
image1564×820 120 KB

JSON looper
[
  {
    "company"     : "Marvel",
    "svg"         : "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0\" y=\"0\" viewBox=\"0 0 2500 1000\" xml:space=\"preserve\"><path style=\"fill: #ef141e;\" d=\"M0 0v1000h2500V0H0zm2115.6 233.1h-136.7v189.7h136.7v153.3h-136.7v192.5h136.7v151h-288.1v-761l-121.4 761-177.7.5s-90.6-539-90.8-540.1c14.7 87.1-40.4 178.1-89.1 214l96.2 325.5h-.4l.1.2H1295L1221.6 642l-35.4 5.1v272.5h-.4v.2h-.2l-288.9-.2L879 790.5H760.6l-17.8 129.1H448.6V514.9l-68.5 404.7H299l-69.4-404.7v404.7H77V80h193.8l68 433.8L408.6 80h193.8l-.1 772.3L718.8 79.9l202.5.1 112.6 745.4.6-745.4s153.8-.1 154.7 0c139.2 0 202.5 101.6 220.3 136.6L1392.3 80h154.5l69.7 511.4L1687.1 80h428.5v153.1zM2423 919.4h-281V79.8h151.4v688.7H2423v150.9z\"\/><path style=\"fill: #ef141e;\" d=\"M1187 230h-.8v270c11.9 0 24.1-2.8 35.9-8.5 35.6-17.2 65.9-60.1 65.9-128.1 0-129.9-89.1-133.5-101-133.4zM778.6 657.3h85.3l-43.4-359-41.9 359z\"\/><\/svg>",
    "height"      : "1em",
    "positionTop" : "0em"
  },
  { 
    "company"     : "DC",
    "url"		  : "https://upload.wikimedia.org/wikipedia/commons/3/3d/DC_Comics_logo.svg",
    "height"      : "1em",
    "positionTop" : "0em"
  }
]

Raw Content
{{dc:looper:field key="svg"}} 
{{<img src="{{dc:looper:field key="url"}}" alt="artein3d">}}
#2

Hey @ICTn,

Thanks for writing in! You are using the RAW Content element in displaying the image.

Screenshot 2024-04-22 at 9.40.22 AM
Screenshot 2024-04-22 at 9.40.22 AM642×930 45.8 KB

It is best that you use the Image element so that you can control the height and width of the SVG image unlike the RAW Content content element.

Kindly let us know how it goes.

#3

yes you are right thanks I solved it. I’ll ask you one more thing, thank you. I use the PostCarouselSlider element and I would like the “Interaction” effect to be activated automatically when switching the central slide (singular post image) to another. The interaction is now activated with mouse hover. I see you included Drag and Click but I think it refers to scrolling. How can I solve it?

#4

Hi @Fabrica,

It is not very clear what you are expecting here. If you want to activate the Interaction effect when any specific slide comes onto the screen. If that is the case, there is no such option available right now. If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

#5

Hi, forgive me if I wasn’t able to be clear in describing the problem. However I was able to advance the slide and highlight it in the center. Unfortunately, after manually scrolling the slide, random slide image selections are created and I have to force a refresh page to return to the previous scroll. You can see in the attached video what happens.
video

#6

Hello @Fabrica,

We do not recommend enabling the “Drag” interaction when the “Autoplay” feature is also enabled. It will just create a conflict.

Best Regards.