Issue using template shortcode for image URL

Loops & Logic
#1

Hi,
I am still new here :slight_smile:

I have created a simple template with L&L which gives me a random URL of a feature image.

<Loop type=post taxonomy=category taxonomy_compare=in terms="hero" orderby=random count=1 >
    <Field image_url />
</Loop>

With version 3.1.5 I get the expected result:
e.g.
“…uploads/2023/02/hero-06.jpg”

After updating to v. 3.1.7 the result looks like this:
“…uploads/2023/02/hero-06.jpg%5B/twrap%5D”

%5B/twrap%5D" is appended to the URL.

This happens under both PHP 8.0 and PHP 8.2.
Wordpress version 6.1.1

Many greetings
Stefano

1 Like
#2

Hi there!
I’ve tried to replicate your exact code, with PHP 8.2 and L&L version 3.1.7. For me, it worked just fine. Can you provide more details about how are you displaying your template?
Do you use a saved template?
Do you use a theme and display it within it?
Do you display it in Gutenberg with a Tangible Template and you write your code directly on the page?

#3

Hi,
thanks for your quick reply.

yes, a saved template.
I use Twenty Twenty-Three with a Childtheme.
The template is used inside a Gutenberg cover block.
Use the Template by Shortcode
[template id=322]

Here the relevant Block part:

<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"[template id=322]","id":19,"dimRatio":30,"overlayColor":"secondary","focalPoint":{"x":0.29,"y":0.06},"minHeight":400,"contentPosition":"bottom right","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-right" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:400px"><span aria-hidden="true" class="wp-block-cover__background has-secondary-background-color has-background-dim-30 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-19" alt="" src="[template id=322]" style="object-position:29% 6%" data-object-fit="cover" data-object-position="29% 6%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"constrained"}} -->

Stefano

#4

Oh, now I see the problem too. I’ve let the developers be aware of this and I will keep you updated once this is fixed!

#5

Hi Emma,
cool!
Thanks for your effort

Update:
Using the paragraph or shortcode block give the expected result. ???

<!-- wp:paragraph -->
<p>[template id=322]</br></p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
[template id=322]
<!-- /wp:shortcode -->

Stefano

#6

Hi Stefano,

Thank you for reporting the issue. This should be fixed in the next version, 3.1.8.

It was a bug that appeared in a very specific situation, when the template shortcode was used inside an HTML attribute (in this case <img src="..">) and its content was a URL.

By the way, I couldn’t figure out how to use a shortcode for an image URL in the Cover block. I see options to: Upload an image, choose one from the Media Library, or use a Featured Image. And I looked around in each option, but couldn’t see any setting field for image URL.

Could you tell me how you did that? :slight_smile:

1 Like
#7

Hi,
Thank you for your quick support.
Version 3.1.8 now does what it should again :slight_smile:

Gutenberg unfortunately has no UI for this case.
Place a cover block and include any image.
Switch from Visual Editor to Code Editor and replace the Image Path with the Shortcode.

<!-- wp:cover {"url":"[template id=322]",...
...
<img ... src="[template id=322]" ...

You can then switch back to the visual editor.

Many greetings
Stefano

1 Like
#8

If you find yourself doing tricky work arounds like this I would consider replacing the entire block with a L&L Template. It’s probably not that hard and you copy the CSS out of the Chrome inspector or whatever browser you use. :slightly_smiling_face:

2 Likes
#9

Hi Phil,
Yes, also possible.
The way I solved it, I can still edit all other properties of the block in the visual editor.

Many greetings
Stefano

1 Like
#10

Switch from Visual Editor to Code Editor and replace the Image Path with the Shortcode.

I see, that’s a neat trick in Gutenberg - thanks for the tip!

1 Like