PHP - Adicionado Class em todas as imagens presentes em um Texto
Neste artigo, vamos aprender como remover e adicionar atributos nos elementos de imagem presentes em um texto. Ao permitir que os clientes cadastrem textos com imagens, é comum encontrar diversas variações nos elementos de imagem.
Olá meus Unicórnios! 🦄✨
Quando temos um sistema onde os clientes podem cadastrar textos, a quantidade de variações que podem ser geradas, nos elementos, são enormes.
No caso de imagens, normalmente faço uma limpeza nos elementos de imagens, removendo o "style" e adicionado uma class "img-responsive".
Para teste, iremos utilizar o texto abaixo:
A natureza oferece uma beleza indescritível, refletida em cada detalhe das paisagens que nos cercam. <img src="https://example.com/imagem_paisagem_montanhas.jpg" alt="Paisagem com montanhas ao amanhecer" style="width:100%; max-width:600px;"> É fascinante como a luz do sol toca as árvores, criando uma paleta de cores vibrantes que dançam com o vento. <img src="https://example.com/imagem_floresta.jpg" alt="Floresta exuberante" style="width:100%; max-width:600px;"> Em meio a essa tranquilidade, é possível encontrar um momento de paz e conexão com o mundo ao nosso redor. A cada estação, a natureza se transforma, mostrando novas facetas de sua beleza eterna.Agora iremos criar uma função, utilizando o DomDocument:
<?
function TratarImagens($Texto)
{
$ObjDom = new DOMDocument();
$ObjDom->loadHTML($Texto, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$TagsImg = $ObjDom->getElementsByTagName('img');
foreach( $TagsImg as $TagImg )
{
$TagImg->removeAttribute('style');
$TagImg->setAttribute('class', 'img-responsive');
}
$Texto = $ObjDom->saveHTML();
return $Texto;
}
?>Quando passamos o texto pela função, teremos um retorno similar ao retorno abaixo:
A natureza oferece uma beleza indescritível, refletida em cada detalhe das paisagens que nos cercam. <img src="https://example.com/imagem_paisagem_montanhas.jpg" alt="Paisagem com montanhas ao amanhecer" class="img-responsive"> É fascinante como a luz do sol toca as árvores, criando uma paleta de cores vibrantes que dançam com o vento. <img src="https://example.com/imagem_floresta.jpg" alt="Floresta exuberante" class="img-responsive"> Em meio a essa tranquilidade, é possível encontrar um momento de paz e conexão com o mundo ao nosso redor. A cada estação, a natureza se transforma, mostrando novas facetas de sua beleza eterna.Observe que nas imagens:
- Foi removido os "styles"
- Adicionado a class "img-responsive"
Por hoje é só, meus unicórnios! 🦄✨
Que a magia do arco-íris continue brilhando em suas vidas! Até mais! 🌈🌟