Setting srcset block attribute on a source element fails

I’m trying to create a block for a site logo that lets me specify an SVG with PNG/JPG fallback, and I’m running into some issues. As soon as I tell it that I want to set my srcset attribute, it writes the following PHP code: (PG Desktop 7.1 — issue is not limited to SVG, it happens with other formats as well)

srcset="<?php echo PG_Blocks::getImageUrl( $args, <?php echo get_template_directory_uri(); ?>/'svg_logo_src', <?php echo get_template_directory_uri(); ?>/'full' ) ?>"/>

instead of

srcset="<?php echo PG_Blocks::getImageUrl( $args, 'svg_logo_src', 'full' ) ?>"/>

Which gives me a lovely error message on the page.

Parse error : syntax error, unexpected token “<”, expecting “)”

Is there a different/better way for me to do this? (Note: I did have this working at one point by setting the image with a customizer field action, but I’m doing a block theme and want to try to do as much as I can with blocks.)

Screenshots:

Tree:
image

Block Attribute (Smart)

Block Attribute (Converted to regular with the same results)

1 Like

I also wanted to use the picture element in a block. But to no avail.

Think i emailed the pinegrow team regarding this. But again, to no avail.

Dont think this is possible currently. If this is a wordpress or pinegrow limiting factor. I dont know.

To no avail.

I skipped it and moved on.

It’s :point_right: this :point_left: close. I’m hoping it’s something I’m doing wrong or at least an easy fix that can come in the next version.

1 Like

Hey @matjaz, any thoughts on this one? Using SVG is becoming more standard for logos, so I’d love to have a way to pull them from the customizer and display them as a source in a picture element similar to this:

<figure class="header__logo-wrapper">
    <a href="#" cms-site-link="home"><picture>
            <source wp-cz-theme-mod="logo_svg" wp-cz-theme-mod-set="attr" wp-cz-theme-mod-set-attr="src" wp-cz-theme-mod-set-get-image wp-cz-theme-mod-set-get-image-size="full" wp-if-get-theme-mod="logo_svg"/>
            <img src="assets/images/logoipsum-logo-6.png" alt="Placeholder" cms-site-logo/> 
        </picture><span class="screen-reader-text">Homepage Link</span></a>
</figure>

As I mentioned in an earlier post, I can get pretty close using the Display Theme Mod action, but it chokes when I change the attribute from src to srcset.

Here it is with the src attribute, which doesn’t work in a source element.

And this is what happens when I change the attribute to srcset

We’d be set if it just changed the attribute without the other bits. Or, maybe I’m missing something?

Thanks for asking @adamslowe! There was a bug there. Fixed now, will be out in the next update.

1 Like