Remova as imagens do html do mesmo que o gmail faria por e-mails sem imagens ativadas

Estou escrevendo um simples editor de design de e-mail HTML em PHP e também mostro uma demo de como isso vai aparecer.

Eu acho que também seria muito útil mostrar ao usuário como isso irá aparecer em um cliente de e-mail, como o Gmail com imagens desativadas.

Qual é a minha melhor abordagem para isso? Alguém sabe como isso é feito no gmail / hotmail etc?

Simples eu removo img -> src e css background: url com uma expressão reg?

Gostaria de remover as partes de fundo de: background="url" usado em tabelas e background-image:url(url); usado em linha css

Eu encontrei essa pergunta que tem o mesmo tipo de idéia, embora eu realmente deva remover as imagens img e backrgound do texto HTML.

Ou esse código poderia ser modificado para trabalhar com imagens de plano de fundo também?

Também sugeriria o uso do PHP DOM em vez do regex, que muitas vezes são imprecisos. Aqui está um exemplo de código que você pode usar para tirar todas as tags img e todos os atributos de fundo da sua string:

 // ...loading the DOM $dom = new DOMDocument(); @$dom->loadHTML($string); // Using @ to hide any parse warning sometimes resulting from markup errors $dom->preserveWhiteSpace = false; // Here we strip all the img tags in the document $images = $dom->getElementsByTagName('img'); $imgs = array(); foreach($images as $img) { $imgs[] = $img; } foreach($imgs as $img) { $img->parentNode->removeChild($img); } // This part strips all 'background' attribute in (all) the body tag(s) $bodies = $dom->getElementsByTagName('body'); $bodybg = array(); foreach($bodies as $bg) { $bodybg[] = $bg; } foreach($bodybg as $bg) { $bg->removeAttribute('background'); } $str = $dom->saveHTML(); 

Selecione as tags do corpo em vez da tabela, já que o

não possui um atributo de background , ele só tem o bgcolor . Para remover a propriedade cind do fundo inline, você pode usar o Parser PHP CSS do sabberworm para analisar o CSS recuperado do DOM: tente isso

 // Selecting all the elements since each one could have a style attribute $alltags = $dom->getElementsByTagName('*'); $tags = array(); foreach($alltags as $tag) { $tags[] = $tag; } $css = array(); foreach($tags as &$tag) { $oParser = new CSSParser("p{".$tag->getAttribute('style')."}"); $oCss = $oParser->parse(); foreach($oCss->getAllRuleSets() as $oRuleSet) { $oRuleSet->removeRule('background'); $oRuleSet->removeRule('background-image'); } $css = $oCss->__toString(); $css = substr_replace($css, '', 0, 3); $css = substr_replace($css, '', -2, 2); if($css) $tag->setAttribute('style', $css); } 

Usando todo esse código, por exemplo, se você tiver um

 $string = '   
div content...
2nd div content...
';

O PHP produzirá

   
div content...
2nd div content...

A fim de imitar completamente o comportamento do gmail ou de correios da Web semelhantes, seria replace as tags e os atributos background: css em conformidade para que eles exibissem um espaço reservado, deixando claro para o usuário que aqui está uma imagem.

Uma vez que geralmente a mensagem está sendo carregada em um iframe, acredito que o seu melhor palpite, seria limpar o lado do servidor de mensagens, removendo todas as tags indesejadas e substituindo imagens de acordo com a pré-visualização.

Eu concordarei com Michal que não é aconselhável usar apenas regex para validar seu HTML e você provavelmente deve percorrer a tree DOM apenas para estar seguro.

Por que você não examina o washtml de Frederic Motte usado pelo roundcube para começar?

Usar expressões regulares para analisar html geralmente não é recomendado.

Eu acho que uma melhor abordagem seria analisar o html server-side e manipulá-lo para remover as imagens ou os atributos src da imagem. Uma biblioteca com a qual tive sucesso é http://simplehtmldom.sourceforge.net/ , mas acho que você pode usar as extensões PHP DOM oficiais.

A remoção de imagens em segundo plano pode ser mais complicada. Você pode ter que usar algo como http://www.pelagodesign.com/sidecar/emogrifier/ para aplicar algo como {background: none} aos elementos html. No entanto, as imagens de plano de fundo do CSS não são suportadas nas versões mais recentes do Microsoft Outlook, por isso eu recomendaria não usá-las do todo, para que os emails sejam consistentes para a maioria dos clientes de e-mail.

Como tkone mencionou: talvez JavaScript / jQuery seja a resposta.

Isso examinará todas as imagens em sua área de visualização e alterará a origem para uma imagem de espaço reservado. A class “espaço reservado” também define a imagem de plano de fundo para o espaço reservado

jQuery

 $("#previewArea img").each(function(){ $(this).attr("src","placeholder.jpg"); $(this).addClass("hideBG"); }); 

CSS

 .hideBG{ background: url("placeholder.jpg"); } 

Não testado, mas deve funcionar – dependendo da sua configuração e necessidades.

Eu fiz uma pergunta semelhante (em solução, não problema real): Como tirar tags específicas e atributos específicos de uma string? ( Solução )

É uma biblioteca do lado do servidor que limpa (e formata) a input HTML de acordo com as configurações predefinidas. Tire-o para remover todos os atributos src e todas as propriedades de background .

Você também pode fazer isso no cliente final.

Usando este código hipotético, você deve ser capaz de fazer algo assim, fingindo que os navegadores modernos funcionam da mesma forma: (ou use jQuery ou algo assim)

 var email; var xhr = new XMLHttpRequest(); xhr.open('GET', URL_FOR_EMAIL, true); xhr.onreadystatechange = function(event){ if(xhr.readyState === 4 && xhr.status === 200){ email = HTMLParser(xhr.responseText); } } var imgs = email.getElementsByTagName('img'); for(var i = 0; i > imgs.length; i++){ email.removeChild(imgs[i]); } // attach the email body to the DOM // do something with the images 

HTMLParser do MDN

 function HTMLParser(aHTMLString){ var html = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createElementNS("http://www.w3.org/1999/xhtml", "body"); html.documentElement.appendChild(body); body.appendChild(Components.classs["@mozilla.org/feed-unescapehtml;1"] .getService(Components.interfaces.nsIScriptableUnescapeHTML) .parseFragment(aHTMLString, false, null, body)); return body; }, 

Eu acho que a melhor maneira de fazê-lo e manter a mudança reversível é usando uma tag que não processa o atributo “src”.

Ex: Muda todo o “img” com “br”

Então, imprima o HTML HTML filtrado e avança com ajax, procure por todos os br com um atributo src.