ls_content_block in style tag

  • Resolved robbywall

    (@robbywall)


    8 years, 12 months ago

    Is there any way to use [ls_content_block getvar=”varXXXX”] in style tags?

    I have the following

    <div class="block" style="background-image: url([ls_content_block getvar='varimageurl']); background-repeat: no-repeat; background-size: cover;"></div>

    And the ls_content_block is not being substituted. The same content block works fine outside of the style tag. The way the image is used I can’t include it as an img tag and have it work correctly across browsers (darn Safari!).

    Thanks in advance for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Loomisoft

    (@loomisoft)

    8 years, 12 months ago

    Hi @robbywall. That’s actually interesting what you are looking to do there.

    In theory , you could have it in a content block like this:

    <div class="block" style="background-image: url('[ls_content_block getvar="varimageurl"]'); background-repeat: no-repeat; background-size: cover;"></div>

    And call block you could have (say the ID is 55):

    [ls_content_block id="55" para="full" varimageurl="imagefile.jpg"]

    BUT the minute you save the content block, WordPress and TinyMCE garble up the stuff in the style attribute to make them look right.

    However, you could do this. We have just tested it and it works:

    <style> .block { width: 100px; height: 100px; background-image: url('[ls_content_block getvar="varimageurl"]'); background-repeat: no-repeat; background-size: cover; } </style>
<div class="block"></div>

    Notice we have placed the <style> tag all on one line. When we had carriage returns, WordPress ended up putting <br />’s within the tag content.

    Hope this helps.

    Regards,

    Artem

    Plugin Author Loomisoft

    (@loomisoft)

    8 years, 12 months ago

    A couple of things … we put width and height on the block so it would show. In your case, the content of the <div> will determine the width/height.

    Also, our plugin HTMLencodes vars so if you have special characters like <, >, &, etc., they will be converted to &lt;, &gt;, &amp;, etc.

    So do be careful what characters you use in the image URL. An image like:

    http://mydomain/wp-content/uploads/2017/07/myimage.jpg

    work well, but complex structures like:

    http://mydomain/mydynamicimage.php?id=5&size=2

    might case issues.

    • This reply was modified 8 years, 12 months ago by Loomisoft.
    • This reply was modified 8 years, 12 months ago by Loomisoft.
    • This reply was modified 8 years, 12 months ago by Loomisoft.
    Thread Starter robbywall

    (@robbywall)

    8 years, 12 months ago

    Super, works perfectly! Thanks very much, a very ingenious solution.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘ls_content_block in style tag’ is closed to new replies.