Profile: tinaH

Problem:

The problem here is that when you embed a shortcode into a HTML tag sometimes it does not render correctly.

Example:

If you have a shortcode being embedded like the one below.

<div class="sd-page-top-bg" style="background: url([types field="project-cover-image" size="sd-blog-thumbs" url="true"][/types]) no-repeat center center / cover;">

You will get the following code on the frontend:

<div class="sd-page-top-bg" style="background: url([types field=" project-cover-image"="" size="sd-blog-thumbs" url="true" ][="" types])="" no-repeat="" center="" cover;"="">

Solution:

The reason why this is happening is because of a quotes mismatch where you are using double quotes within double quotes. Essentially what this is doing is closing the previously opened quote and opening a new one.

So to prevent this you will use Single quotes when you are typing inside double quotes.

So the correct format of the shortcode should be:

<div class="sd-page-top-bg" style="background: url([types field='project-cover-image' size='sd-blog-thumbs' url='true'][/types]) no-repeat center center / cover;"></div>

Notice clearly that my shortcode uses single quotes for its parameters instead of double quotes.

" [types field='project-cover-image' size='sd-blog-thumbs' url='true'][/types]"