Intro
Originally this article recommended using the htmlentities function. However, after a lot of helpful feedback, I've learned it's best practice to use esc_attr
If you're rendering images with ACF, make sure you run the alt
text against the htmlentities esc_attr function. Why? Because there's a chance that the alt
text could contain quotation marks ""
.
If it does, it will break the formatting of the alt
tag as seen below.
Before
<?php
$image = get_field('banner_image');
$url = esc_url($image['url']);
$alt = $image['alt'];
?>
...
<img src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" />
<img src="..." alt="Zapp Brannigan drinking " champaggan""="">
After
<?php
$image = get_field('banner_image');
$url = esc_url($image['url']);
$alt = esc_attr($image['alt']);?>
...
<img src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" />
<img src="..." alt="Zapp Brannigan drinking "Champaggan"">