No post anterior mostrei como criei, em Python, um gerador de RSS para o Framer, já que a plataforma não oferece essa funcionalidade nativamente.
Essa solução funcionou bem para indexação e distribuição do conteúdo. Porém, logo surgiu uma nova demanda: automatizar a newsletter da Ad Rock a partir do feed do blog.
Neste artigo, compartilho como adaptei o RSS para integrar ao Mailchimp e como resolvi o problema clássico das imagens desproporcionais.
1. O novo desafio
O Mailchimp permite automatizar campanhas com o recurso RSS-to-Email, mas há limitações:
Ele usa somente a tag <enclosure> para exibir imagens (*|RSSITEM:IMAGE|*).
O feed original só tinha <media:content>.
As imagens chegavam enormes e quebradas, com atributos fixos de width e height.
Ou seja, era necessário evoluir o gerador de RSS para atender esse cenário.
2. Ajustando o gerador de RSS
A base continuou a mesma do projeto anterior, mas agora o rss_generator.py passou a:
Baixar a imagem original do post.
Redimensionar para 600px de largura.
Salvar localmente no servidor.
Gerar <enclosure> apontando para essa imagem redimensionada.
Manter <media:content> apontando para a imagem original.
Código principal
from PIL import Image
from io import BytesIO
import requests, os
resp = requests.get(clean_image)
if resp.status_code == 200:
img = Image.open(BytesIO(resp.content))
max_width = 600
w_percent = max_width / float(img.size[0])
h_size = int(float(img.size[1]) * w_percent)
img = img.resize((max_width, h_size))
local_filename = os.path.basename(clean_image)
local_path = os.path.join("images", local_filename)
img.save(local_path, format="PNG", optimize=True)
enclosure_url = f"https://mobiledelivery.com.br/rss_images/{local_filename}"
SubElement(item, "enclosure", url=enclosure_url, type="image/png")
# Mantém media:content original
SubElement(item, "media:content", url=clean_image, medium="image")from PIL import Image
from io import BytesIO
import requests, os
resp = requests.get(clean_image)
if resp.status_code == 200:
img = Image.open(BytesIO(resp.content))
max_width = 600
w_percent = max_width / float(img.size[0])
h_size = int(float(img.size[1]) * w_percent)
img = img.resize((max_width, h_size))
local_filename = os.path.basename(clean_image)
local_path = os.path.join("images", local_filename)
img.save(local_path, format="PNG", optimize=True)
enclosure_url = f"https://mobiledelivery.com.br/rss_images/{local_filename}"
SubElement(item, "enclosure", url=enclosure_url, type="image/png")
# Mantém media:content original
SubElement(item, "media:content", url=clean_image, medium="image")from PIL import Image
from io import BytesIO
import requests, os
resp = requests.get(clean_image)
if resp.status_code == 200:
img = Image.open(BytesIO(resp.content))
max_width = 600
w_percent = max_width / float(img.size[0])
h_size = int(float(img.size[1]) * w_percent)
img = img.resize((max_width, h_size))
local_filename = os.path.basename(clean_image)
local_path = os.path.join("images", local_filename)
img.save(local_path, format="PNG", optimize=True)
enclosure_url = f"https://mobiledelivery.com.br/rss_images/{local_filename}"
SubElement(item, "enclosure", url=enclosure_url, type="image/png")
# Mantém media:content original
SubElement(item, "media:content", url=clean_image, medium="image")3. Servindo imagens com Nginx
As imagens redimensionadas ficam no servidor em /home/adrock/rss_adrock_generator/images/.
Para expô-las publicamente, adicionei ao server block:
location ^~ /rss_images/ {
alias /home/adrock/rss_adrock_generator/images/;
autoindex off;
add_header Cache-Control "public, max-age=86400";
}location ^~ /rss_images/ {
alias /home/adrock/rss_adrock_generator/images/;
autoindex off;
add_header Cache-Control "public, max-age=86400";
}location ^~ /rss_images/ {
alias /home/adrock/rss_adrock_generator/images/;
autoindex off;
add_header Cache-Control "public, max-age=86400";
}Assim, cada imagem fica disponível em:
4. Ajustando o template no Mailchimp
O merge tag *|RSSITEM:IMAGE|* insere um <img> inteiro, com width e height fixos. Isso estourava o layout.
A solução foi sobrescrever via CSS inline:
<div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div><div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div><div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div>Como ficou:
5. Layout final no Mailchimp
Cada item da newsletter agora segue este formato:
*|RSSITEMS:|*
<h2>
<a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">
*|RSSITEM:TITLE|*
</a>
</h2>
<div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div>
<p>*|RSSITEM:CONTENT_FULL|*</p>
<p>
👉 <a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">Ler o conteúdo</a>
</p>
<div style="height:2px; background-color:#e0e0e0; margin:30px 0;"></div>
*|RSSITEMS:|*
<h2>
<a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">
*|RSSITEM:TITLE|*
</a>
</h2>
<div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div>
<p>*|RSSITEM:CONTENT_FULL|*</p>
<p>
👉 <a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">Ler o conteúdo</a>
</p>
<div style="height:2px; background-color:#e0e0e0; margin:30px 0;"></div>
*|RSSITEMS:|*
<h2>
<a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">
*|RSSITEM:TITLE|*
</a>
</h2>
<div style="max-width:600px; margin:0 auto; border-radius:10px; overflow:hidden;">
<style type="text/css">
img[width][height] {
width: 100% !important;
height: auto !important;
}
</style>
*|RSSITEM:IMAGE|*
</div>
<p>*|RSSITEM:CONTENT_FULL|*</p>
<p>
👉 <a href="*|RSSITEM:URL|*" target="_blank" style="color:#ef0000;">Ler o conteúdo</a>
</p>
<div style="height:2px; background-color:#e0e0e0; margin:30px 0;"></div>
6. Resultado
O feed é atualizado automaticamente no servidor.
O Mailchimp puxa esse feed e gera a newsletter.
As imagens aparecem sempre proporcionais, com largura máxima de 600px.
Todo o processo é automatizado: basta publicar no blog.
Desktop:
Mobile:
Conclusão
A solução que começou como um simples gerador de RSS para o Framer evoluiu para atender à automação completa da newsletter.
Esse fluxo mostra bem como um problema técnico inicial pode abrir caminho para melhorias contínuas no ecossistema digital da empresa.
Agora, além de SEO e distribuição, o feed RSS da Ad Rock também garante que nossa base receba automaticamente as novidades do blog em um formato limpo e responsivo.
