Ditty Ticker Right Causes Image Overlap

  • Resolved elliptica49

    (@elliptica49)


    7 months, 2 weeks ago

    I’m using Ditty with the display set to Ticker and the direction set to Right. The content are images stored as HTML items. After the ticker scrolls for a few seconds (somewhere between 1 and 5 s), as each new image appears on the ticker, it overlaps with an image underneath. I’ve tried setting wrap to false everywhere it appears in settings, etc. but no settings modification seems to change the issue. However, if I use Ticker with direction set to Left, the issue never occurs — the images remain separate no matter how much the ticker moves.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter elliptica49

    (@elliptica49)

    I’ll add that this happens without fail on tickers with a lot of images, but it doesn’t seem to trigger on tickers with only a few images.

    • This reply was modified 7 months, 1 week ago by elliptica49.
    Plugin Author metaphorcreations

    (@metaphorcreations)

    Can I get a link to check this out on your site? You may need to add static dimensions to your images to ensure the ticker knows what width the image is.

    <img style="display:block;width:300px;height:auto;" src="...path/to/image.png" />
    Thread Starter elliptica49

    (@elliptica49)

    Here’s a link: https://ellipticlabs.com/home-3-2/. Password is test. I’ve tried starting both Filled and Empty, having a delay and no delay, and setting a value for max width. I’ll try the code you put above after you have a chance to see the slider as it currently is.

    Plugin Author metaphorcreations

    (@metaphorcreations)

    Thanks for the link. The reason for the overlap is due to the images not fully being loaded when they enter the screen, so the ticker can’t calculate it’s actual width. Once you add the inline styles to the images it should resolve the issue.

    Thread Starter elliptica49

    (@elliptica49)

    Hi, I added in the code you suggested to every item in the smartphone ticker, but if you look at the same link above (https://ellipticlabs.com/home-3-2/. Password is?test) and wait a few seconds as it ticks, you’ll see that the same problem occurs in spite of this.

    (Also, side note, my images have the same height but not the same width. I’ve used your code as provided in case it’s width that needs to get explicitly defined, which is why height looks off on some items, but I’d probably need the final code to be style=”display:block; width: auto; height:200px;” instead. Assuming whatever issue is preventing it from working right is resolved, would defining height explicitly work, or only width?)

    Plugin Author metaphorcreations

    (@metaphorcreations)

    It looks like there are still images that don’t have the inline width added to them (https://imgur.com/a/OvI3kcD), which are the the ones that are overlapping.

    In regards to your other question, the width is what needs to be set as the ticker needs to know how wide the image is. If the width is just set to auto, you end up with the same issue as not having any dimensions, since the image needs to fully load before the ticker knows what the width will be.

    If you’d like an easier option to loading a bunch of images I have an Image extension that lets you upload/select images from your Media Library and the dimension are automatically added: https://www.metaphorcreations.com/wordpress-plugins/ditty-images/

    Thread Starter elliptica49

    (@elliptica49)

    Thank you, after double-checking that ever single image had a hardcoded width, it seems to work properly!

    Plugin Author metaphorcreations

    (@metaphorcreations)

    Great, good to hear!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Ditty Ticker Right Causes Image Overlap’ is closed to new replies.