I am trying to add a base64/SVG image over a DIV depending the kind of post I have on WordPress. If it’s a video it shows a play icon, if it’s an audio, it shows a headphone icon.
Here’s the code:
if ( in_category ( 'video' )) {
$mediaPlay = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDkuMTI2IDEwOS4xMjYiPjxwYXRoIGQ9Ik05OC45IDQ3LjY2M0wxOC4xOTggMS4wNjhjLTIuNDY3LTEuNDI0LTUuNTAyLTEuNDI0LTcuOTcyIDBDNy43NjIgMi40OSA2LjI0MyA1LjEyNCA2LjI0MyA3Ljk3djkzLjE5YzAgMi44NDcgMS41MjIgNS40NzggMy45ODIgNi45IDEuMjM2LjcxMiAyLjYxIDEuMDY2IDMuOTg2IDEuMDY2IDEuMzc3IDAgMi43NTQtLjM1NCAzLjk4Ni0xLjA2N0w5OC45IDYxLjQ2MmMyLjQ2NS0xLjQyMiAzLjk4My00LjA1NCAzLjk4My02LjkuMDA1LTIuODQ2LTEuNTE2LTUuNDc3LTMuOTgtNi45MDJ6IiBmaWxsPSIjRkZGIi8+PC9zdmc+";
} elseif ( in_category ( 'audio' )) {
$mediaPlay = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMzAgMzMwIj48cGF0aCBkPSJNMzAwIDE3NS44di0yMS41NmMwLTc0LjQ0LTYwLjU2LTEzNS0xMzUtMTM1UzMwIDc5LjggMzAgMTU0LjI0djIxLjU2Yy0xOC4yMDQgMTMuNjk2LTMwIDM1LjQ3NS0zMCA1OS45NTggMCA0MS4zNTUgMzMuNjQ0IDc1IDc1IDc1IDguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEyMGMwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTUuMTM2IDAtMTAuMTUyLjUyLTE1IDEuNTF2LTguMDI1YzAtNTcuODk3IDQ3LjEwMy0xMDUgMTA1LTEwNXMxMDUgNDcuMTAzIDEwNSAxMDV2OC4wMjVjLTQuODQ4LS45OS05Ljg2NC0xLjUxLTE1LTEuNTEtOC4yODQgMC0xNSA2LjcxNi0xNSAxNXYxMjBjMCA4LjI4NCA2LjcxNiAxNSAxNSAxNSA0MS4zNTUgMCA3NS0zMy42NDUgNzUtNzUgMC0yNC40ODQtMTEuNzk2LTQ2LjI2Mi0zMC01OS45NnoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=";
} else {
$mediaPlay = "";
}
The HTML that should make the image appear is this:
<img src="data:image/svg+xml;base64,<?php echo $mediaPlay; ?>">
The problem is that this conditioning thing just doesn’t work. The way it is, it shows a broken image, just because it doesn’t add the base64 code where it should.
If I just try this, without conditions, like:
$mediaPlay = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMzAgMzMwIj48cGF0aCBkPSJNMzAwIDE3NS44di0yMS41NmMwLTc0LjQ0LTYwLjU2LTEzNS0xMzUtMTM1UzMwIDc5LjggMzAgMTU0LjI0djIxLjU2Yy0xOC4yMDQgMTMuNjk2LTMwIDM1LjQ3NS0zMCA1OS45NTggMCA0MS4zNTUgMzMuNjQ0IDc1IDc1IDc1IDguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEyMGMwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTUuMTM2IDAtMTAuMTUyLjUyLTE1IDEuNTF2LTguMDI1YzAtNTcuODk3IDQ3LjEwMy0xMDUgMTA1LTEwNXMxMDUgNDcuMTAzIDEwNSAxMDV2OC4wMjVjLTQuODQ4LS45OS05Ljg2NC0xLjUxLTE1LTEuNTEtOC4yODQgMC0xNSA2LjcxNi0xNSAxNXYxMjBjMCA4LjI4NCA2LjcxNiAxNSAxNSAxNSA0MS4zNTUgMCA3NS0zMy42NDUgNzUtNzUgMC0yNC40ODQtMTEuNzk2LTQ2LjI2Mi0zMC01OS45NnoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=";
<img src="data:image/svg+xml;base64,<?php echo $mediaPlay; ?>">
It works, and I have no idea why.
How can I work this out?
Thank you. 🙂
