displaying a gif in php code in wordpress

Question

I recently took over a project for a client which is website built in wordpress and java script. The previous developer did not comment on their code so I have taken some time to decipher it.

The site uses woocommerce as the online shop. The client has requested that when a user makes a payment then the subsequent thank you screen displays an animated gif saying thank you.

Inserting the gif on the standard woocommerce checkout page is fine and works. The client however wants it displayed after the purchase on the thank you page which is created in code. The code is displayed below:

<?php if ( $order->has_status( 'failed' ) ) : ?>

    <p><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction.', "wp-experts" ); ?></p>

    <p><?php
        if ( is_user_logged_in() )
            esc_html_e( 'Please attempt your purchase again or go to your account page.', "wp-experts" );
        else
            esc_html_e( 'Please attempt your purchase again.', "wp-experts" );
    ?></p>

    <p>
        <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', "wp-experts" ) ?></a>
        <?php if ( is_user_logged_in() ) : ?>
        <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My Account', "wp-experts" ); ?></a>
        <?php endif; ?>
    </p>

<?php else : ?>

    <p><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', "wp-experts" ), $order ); ?></p>
    <ul class="order_details pull-left">
        <li class="order">
            <?php esc_html_e( 'Order Number:', "wp-experts" ); ?>
            <strong><?php echo ''.$order->get_order_number(); ?></strong>
        </li>
        <li class="date">
            <?php esc_html_e( 'Date:', "wp-experts" ); ?>
            <strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong>
        </li>
        <li class="total">
            <?php esc_html_e( 'Total:', "wp-experts" ); ?>
            <strong><?php echo ''.$order->get_formatted_order_total(); ?></strong>
        </li>
        <?php if ( $order->payment_method_title ) : ?>
        <li class="method">
            <?php esc_html_e( 'Payment Method:', "wp-experts" ); ?>
            <strong><?php echo ''.$order->payment_method_title; ?></strong>
        </li>
        <?php endif; ?>



    </ul>
    <a href="<?php echo  get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="btn btn-success pull-right">CLICK HERE TO GET STARTED!</a>
    <div class="clear"></div>

<?php endif; ?>

<?php do_action( 'woocommerce_thankyou_' . $order->payment_method, $order->id ); ?>
<?php do_action( 'woocommerce_thankyou', $order->id ); ?>

<p><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', "wp-experts" ), null ); ?></p>

I have searched on google for how to display a gif in php.

The gif is uploaded on my serve in the images sub-directory of the theme

I have used ideas from stackoverflow like

$file = 'Camel-continuous-1.gif'

header('Content-type: image/gif');
readfile($file);

but this just crashes the web page. I placed this after the payment method line in the code above.

Any ideas? Thanks in advance

Answer 1

I am not able based on the code sniplet to tell where to insert it, but if you

<?php
//supposing the gif is in the same folder
$file = 'Camel-continuous-1.gif'; 

echo "<img src=\"".$file."\">";
?>

More short you could say it this way:

<?php='<img src="/gifs/Camel-continuous-1.gif" >'?>

Or more simple if you want to use the short open tag

<?='<img src="/gifs/Camel-continuous-1.gif" >'?>

have fun

Answer 2

Like @flomei I'm not sure I understand what you want, but if you just want the gif somewhere near the "Thank You" text you can just echo it in php. This will put it above the text "Thank you. Your order has been received":

<?php if ( $order->has_status( 'failed' ) : ?>
    <?php // deleted your existing code. ?>
<?php else : ?>
    <?php echo '<img src="Camel-continuous-1.gif"> ?>
    <?php // more deleted code. ?>
<?php endif; ?>

Answer 3

this did not work for you because you mixed up Quotes. If you use double quotes to delimit a string you must either backslash it or use simple quotes inside. In a similar way you must use double quotes if you delimit the string with simple quotes.

<?php
// this outputs a error
$file = '/uploads/2018/07/Camel-continuous-2.gif'; 
echo "<img width="251" height="243" src=\"".$file."\">"; 

?>

this will work for you on any php version. It is the clean method using backslashed quotes inside the quotes

<?php

$file = "/uploads/2018/07/Camel-continuous-2.gif"; 
echo "<img width=\"251\" height=\"243\" src=\"".$file."\">"; 

?> 

also this will work for you on some php versions. (using double quotes inside simple quotes

<?php

$file = '/uploads/2018/07/Camel-continuous-2.gif'; 
echo '<img width="251" height="243" src="'.$file.'">'; 

?> 

also this will work for you depending on your php version. using simple quotes inside double quotes

<?php

$file = "/uploads/2018/07/Camel-continuous-2.gif"; 
echo "<img width='251' height='243' src='".$file."'>"; 

?>