Markup to use plugin with html

  • Resolved kayamurer

    (@kayamurer)


    1 year, 9 months ago

    Hallo Martin,

    First of all, I love the idea of your plugin! Most other lightbox plugins are totally overloaded – i like the simplicity of yours.

    I would like to use the lightbox for images in other plugins or HTML blocks. (I work a lot with Loops & Logic or Beaver Builder). I tested different markups but the lightbox never opened.

    <div>
  <a href="link/to/image.jpg">
    <img class="test" src="link/to/image.jpg">
  </a>
</div>

    I added a custom class “test” to the json configuration file and tried with adding this class to the wrapper div, the a link element or the img tag itself. But i guess i missed something. I tried it on a normal page post type.

    Do you know what else i could try or what i did wrong?

    Kind regards and have a nice day

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Martin von Berg

    (@martinvonberg)

    Hello,

    I just came across you interesting question. Sorry, for the delay. I’m not sure whether I understood completely:

    • The plugin should include “Standard” HTML images, coded in an img-Tag? Or an img-Tag with a dedicated class? I’d prefer the latter to provide a kind of selection. -> I will try this out.
    • I don’t use Beaver Builder and its Loops. So, I probably won’t code the right selection.

    Best Regards

    Martin

    Plugin Author Martin von Berg

    (@martinvonberg)

    Adding HTML is done this way:

    1. Add individual HTML on your page / post and use <figure> instead of <div> and add a class name, e.g. “htmlimg4fslight” or whatever you want:
    <figure class="htmlimg4fslight">
<img src="img-source-here" alt="Test-HTML-img-Tag" />
</figure>

    2. add the class “htmlimg4fslight” as entry in “cssClassesToSearch” to plugin-settings.json:

    {
    "$schema": "./settings/settings-schema.json",
    "hrefTypes": [
        "Empty",
        "Media"
    ],
    "postTypes": [
        "page",
        "post",
        "home",
        "front"
    ],
    "cssClassesToSearch": [
        "wp-block-image",
        "wp-block-media-text",
        "wp-block-video",
        "postie-image",
        "htmlimg4fslight"
    ],
    "excludeIDs": [
        0
    ]
}

    3. Done!

    Plugin Author Martin von Berg

    (@martinvonberg)

    The give response will hopefully solve the request for Loops&Logic. So, if you still need support for Beaver-Builder contact me directly.

    Thread Starter kayamurer

    (@kayamurer)

    Hello,

    thank you for your helpful answer.

    I was able to get your plugin working with loops and logic and beaver builder when using the markup you provided.

    Kind regards
    Kaya

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Markup to use plugin with html’ is closed to new replies.