BoldMinded

Publisher does not support the Fluid field type. Please do not contact asking when support will be available.

If you purchased an add-on from expressionengine.com, be sure to visit boldminded.com/claim to add the license to your account here on boldminded.com.

Ticket: File Bloqs fields cannot use :webp

Status Resolved
Add-on / Version Bloqs 5.0.9
Severity
EE Version 7.3.0

Kevin Chatel

Jun 08, 2023

Hi ,
We just upgraded the CMS to 7.3.0, all our previous bloqs that were using native file fields, no longer work with :webp.
I’m not sure if it’s a bloq issue or a an EE update issue.

Here is an example of the old code that worked just fine on 7.2.17

{header_picture_in_picture}
<header class="relative lg:py-16 overflow-hidden" data-block-name="header_picture_in_picture">
	<div class="xl:container mx-auto">
		<div class="flex flex-col-reverse lg:grid grid-cols-2 px-5 xl:px-0 lg:gap-16 bg-paleGrey md:bg-transparent">
			<div class="flex flex-col justify-center col-span-1  py-16 lg:py-0 ">
				{if blue_intro_title}<span class="text-brBlue text-xs tracking-widest font-extrabold uppercase">{blue_intro_title}</span>{/if}
				<h1 class="font-normal text-[2.75rem] md:text-[3.125rem] leading-none mt-2 mb-4">{ttl}</h1>
<p>				{if subtitle}</p><div class="text-[1.1875rem] md:text-[1.375rem]">{subtitle}</div><p>{/if}<br /></p>
</div><div class="col-span-1 w-full aspect-4/3 self-center">
<p>				<img src="{img_bg:webp}" class="aspect-4/3 lg:rounded w-full h-full object-cover object-center" alt="{ttl}" /><br /></p>
</div></div></div><div class="hidden lg:block absolute top-0 left-0 w-full h-full -z-10">
<p>		<img src="{if override_background_image}{override_background_image:webp}{if:else}{img_bg:webp}{/if}" class="w-full h-full object-cover object-top grayscale opacity-30 blur-sm" alt="{ttl}" /><br /></p>
</div>
</header>
<p>{/header_picture_in_picture}

Now to get them to work again I removed the :webp and used :src. Not sure why :src works as it’s not in any of the documentation.

Let me know
regards
Kevin

#1

BoldMinded (Brian)

Jun 08, 2023

Bloqs doesn’t really do anything specific with the variable modifiers, it just kind of passes them through. Did you try :webp on File fields no inside of Bloqs?

#2

BoldMinded (Brian)

Jun 08, 2023

You should also create a test using a Grid field. If it doesn’t work there either, then it’s an EE issue, not Bloqs.

#3

Kevin Chatel

Jun 08, 2023

Comment has been marked private.

#4

BoldMinded (Brian)

Jun 08, 2023

It’s going to be a few days until I can look into this. I’m not even sure what they’ve added to 7.3… haven’t been able to do testing with it lately.

#5

BoldMinded (Brian)

Jun 08, 2023

Have you tried adding other multiple modifiers? Instead of :web have you tried :rotate or :crop? Just trying to find out if it’s specific to :webp, which would be odd, or multiple modifiers in general.

#6

Kevin Chatel

Jun 08, 2023

Comment has been marked private.

#7

BoldMinded (Brian)

Jun 08, 2023

I think you can do the full tag pair and it’ll work, instead of doing the {file_field:src}

{file_field}
{url}, or maybe it’s {file_field:url}
{/file_field}

I forget the syntax off the top of my head.

#8

Kevin Chatel

Jun 12, 2023

the Tag pairs works as intended

{img}
{url}
{/img}

but no modifiers work except for :resize which works, however you can’t add width or height, then it doesn’t

Hope that helps

#9

BoldMinded (Brian)

Jun 12, 2023

Can you simplify your original example please? Remove all the HTML and superfluous tags, and only share the relevant Bloqs field tags. Thanks.

#10

Kevin Chatel

Jun 12, 2023

Comment has been marked private.

#11

BoldMinded (Brian)

Jun 12, 2023

I think this might have been a bug introduced in 7.3 https://github.com/ExpressionEngine/ExpressionEngine/issues/3507

#12

BoldMinded (Brian)

Jun 12, 2023

I was able to get it to work with the following template tags:

{file_bloq:file:webp}
                {url}
            {/file_bloq:file:webp}

            {file_bloq:file:resize width='20' height='20'}
                {url}
            {/file_bloq:file:resize}

            {file_bloq:file:resize:webp width='100' height='100'}
                {url}
            {/file_bloq:file:resize:webp}

            {file_bloq:file}
                {url}
            {/file_bloq:file}
#13

Kevin Chatel

Jun 13, 2023

Comment has been marked private.

#14

BoldMinded (Brian)

Jun 13, 2023

Comment has been marked private.

#15

BoldMinded (Brian)

Jun 13, 2023

This was the example entry I was working with:

{exp:channel:entries entry_id="26249"}
    {title}

    {bloqs}
        {file_bloq}

            {file_bloq:file:webp}
                 <img src="{url}" />
            {/file_bloq:file:webp}

<hr>

            {file_bloq:file:resize width='20' height='20'}
                 <img src="{url}" />
            {/file_bloq:file:resize}

<hr>

            {file_bloq:file:resize:webp width='100' height='100'}
                 <img src="{url}" />
            {/file_bloq:file:resize:webp}

<hr>
Single Pair (does not work, should be prefixed):
            {file}
                 <img src="{url}" />
            {/file}

<hr>
Prefix Pair:
            {file_bloq:file}
                 <img src="{url}" />
            {/file_bloq:file}

<hr>
Prefix Single:
            <img src="{file_bloq:file:resize width='90' height='90'}" />

<hr>
No Prefix Single:
             <img src="{file:resize width='100' height='100'}" />
        {/file_bloq}
    {/bloqs}
{/exp:channel:entries}
#16

Kevin Chatel

Jun 13, 2023

Comment has been marked private.

#17

BoldMinded (Brian)

Jun 13, 2023

Good to hear! I’ll release 5.0.10 soon.

Login to reply