0

I have added a function into my child theme to override the original function. This functions purpose is to display the products meta data in a list below the product.

The only part i can get past is the base64 image.

My current code is :

function wc_display_item_meta( $item, $args = array() ) {
    $strings = array();
    $html    = '';
    $args    = wp_parse_args(
        $args,
        array(
            'before'       => '<ul class="wc-item-meta"><li>',
            'after'        => '</li></ul>',
            'separator'    => '</li><li>',
            'echo'         => true,
            'autop'        => false,
            'label_before' => '<strong class="wc-item-meta-label">',
            'label_after'  => ':</strong> ',
        )
    );

    foreach ( $item->get_all_formatted_meta_data() as $meta_id => $meta ) {
        $value     = $args['autop'] ? wp_kses_post( $meta->display_value ) : wp_kses_post( make_clickable( trim( $meta->display_value ) ) );
        $key = wp_kses_post( $meta->display_key );
        if($key === "Tie Preview"){
            
            $b64 = explode(',', $value);
            $image = base64_decode($b64[1]);
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . '<img src="data:image/png;base64,' . $image . '" />';
        }else{
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . $value;    
        }

    }

    if ( $strings ) {
        $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
    }

    $html = apply_filters( 'woocommerce_display_item_meta', $html, $item, $args );

    if ( $args['echo'] ) {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $html;
    } else {
        return $html;
    }
}

As you can see in the image below the image tag appears but the base64 image doesn't display.

enter image description here

Here is a screenshot of the data url loaded in a browser:

enter image description here

Has anyone else come up with this issue.

I have figured out the issue!!!!

instead of the <img> i replaced it with and <a>. I decided to do this as i could view the tool tip to see the out of the href attribute was.

enter image description here

as you can see somehow there is a <p> being added. iv now taken the value and used substr() to remove the <p> at the front and end of the string.

My new code now looks like so:

function wc_display_item_meta( $item, $args = array() ) {
    $strings = array();
    $html    = '';
    $args    = wp_parse_args(
        $args,
        array(
            'before'       => '<ul class="wc-item-meta"><li>',
            'after'        => '</li></ul>',
            'separator'    => '</li><li>',
            'echo'         => true,
            'autop'        => false,
            'label_before' => '<strong class="wc-item-meta-label">',
            'label_after'  => ':</strong> ',
        )
    );

    foreach ( $item->get_all_formatted_meta_data() as $meta_id => $meta ) {
        $value     = $args['autop'] ? wp_kses_post( $meta->display_value ) : wp_kses_post( make_clickable( trim( $meta->display_value ) ) );
        $key = wp_kses_post( $meta->display_key );
        if($key === "Tie Preview"){
            $sub1 = substr($value, 3);
            $sub2 = substr($sub1, 0, -4);
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . '<img src="' . $sub2 . '" />' . "<a href='" . $sub2 . "' >click here</a>";
        }else{
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . $value;    
        }

    }

    if ( $strings ) {
        $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
    }

    $html = apply_filters( 'woocommerce_display_item_meta', $html, $item, $args );

    if ( $args['echo'] ) {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $html;
    } else {
        return $html;
    }
}
Andrew Mason
  • 11
  • 2
  • So how base64 encoded is your data actually, after you do `$image = base64_decode($b64[1]);` ...? Unless you had your image data base64-encoded _twice_ before you inserted it into the database, what `$image` now contains _won't_ be base64-encoded data any more ... – CBroe Feb 03 '23 at 14:27
  • The base64 code was created to convert a canvas to the base64 png image. When retrieving the value it string looks like so: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl4AAAJeCAYAAABlIQuGAAAAAXNSR0IArs4c6QAAIABJREFUeF7svQd4XOW1/b3O I have tried just adding this value into the src but i get the same result. This is why i split the value to decode the second part. – Andrew Mason Feb 03 '23 at 14:51
  • And that is the exact same format you need to use for your Data URI in the image source. So why are you base64-_decoding_ anything now? – CBroe Feb 03 '23 at 14:53
  • It was outputting the same result so i tried decoding it to see if that made a difference. – Andrew Mason Feb 03 '23 at 14:54
  • _"This is why i split the value to decode the second part"_ -but the second part is supposed to be in base64 encoding, that is what the `;base64,` in there indicates to begin with. So if you take the already base64-encoded portion of your data and explicitly _decode_ it, that can of course not lead to the expected result. – CBroe Feb 03 '23 at 14:57
  • so your saying it should look like this ``` $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . ''; – Andrew Mason Feb 03 '23 at 15:02
  • What you have shown in your comment, `data:image/png;base64,iVBORw0...`, does not appear to contain a valid PNG format image. The base64 part decoded starts with `�PNG` as it should, but the overall data length appears to be too short. If that was supposed to be the full value you get from your database - then it was perhaps truncated during insert already. – CBroe Feb 03 '23 at 15:03
  • I didn't past the whole value in as its ridiculously long and the comments don't allow for it. Iv just updated the question to show what the image is meant to look like. – Andrew Mason Feb 03 '23 at 15:04
  • That preview tooltip of the link where you output the value into the href - does that actually contain a `

    ` at the start? Sounds like the value you are reading from your database might have been treated as text content, and gotten the usual treatment of adding paragraphs? Maybe the method name in `$item->get_all_formatted_meta_data()` is already a clue here.

     – CBroe Feb 06 '23 at 07:17

0 Answers0