Image template mail

serviceinfo · jeu. 30 mai 2024 12:25

Bonjour,
malgré des modifications dans le dev d'un template mail, lorsque je modifie le logo par défaut pour mettre le mien, malgré un redimensionnement celui-ci apparait en très gros, hors proportion du mail de résolution de ticket. Avez-vous une idée d'où pourrait provenir ce souci ? Sachant que le redimensionnement fonctionne lorsque j'ouvre mon fichier HTML sur un navigateur.
merci par avance de votre réponse

jeu. 30 mai 2024 12:27

Bonjour, pouvez vous transmettre votre fichier modèle ?

serviceinfo · lun. 10 juin 2024 15:37

Bonjour, désolé pour le temps de réponse, voici le type d'image utilisé pour mon template mail
https://image.noelshack.com/fichiers/20 ... parent.png

lun. 10 juin 2024 15:38

Pouvez-vous transmettre le modèle au format .HTM

serviceinfo · lun. 10 juin 2024 15:50

Actuellement j'utilise une balise simple <img> <img class="center" alt="logo" src="https://image.noelshack.com/fichiers/20 ... parent.png" />
avec le PNG de mon logo, pour un template mail, je ne dois procéder ainsi ?

lun. 10 juin 2024 15:54

Vous pouvez essayer d'ajouter l'attribut width a votre balise :

Code : Tout sélectionner

<img class="center" alt="logo" width="200px" src="https://image.noelshack.com/fichiers/2024/21/2/1716288774-logogroupebaudairenoiretrougetransparent.png" />

serviceinfo · lun. 10 juin 2024 16:09

ma classe center possède déjà un attribue width à 200px mais cela n'y change rien, même en l'ajoutant manuellement dans la balise, l'image reste surdimensionnée..

lun. 10 juin 2024 16:10

essayer de supprimer la classe sinon transférer moi l'ensemble du code

serviceinfo · lun. 10 juin 2024 16:26

Je viens de tester sans les classes, le souci est le même, dans l'aperçu de gestsup avant envoi du mail cela semble être OK mais dans LE MAIL reçu l'image reste disproportionnée ...
Ci-dessous le code du template(pour info je suis sur visual studio code pour développer ce template) :

DOCTYPE ICI MAIS BLOQUE AU NIVEAU DU NOMBRE DE LIEN DANS LE MESSAGE
<head>
<title>GestSup mail notification</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* Fonts and Content */
body, td { font-family: Arial; font-size:14px; }
body { background-color: #C51A1C; margin: 0; padding: 0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
h2{padding-top:0px; color:#0E7693; font-size:18px; text-align: center;}
span.title{color:#0E7693; font-size:14px; padding-bottom:2px;}
td.header{background-color: #FFFFFF}
td.footer{background-color: #FFFFFF;}
p.min{font-size:12px; text-align:center;}
/* .center {
display: block;
margin: auto;
width: 200px;
} */
/* .imgresize {
display: block;
margin: auto;
width : 170px;
height : 70px;
} */
</style>
</head>
<body style="margin:0px; padding:0px; -webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:rgb(42, 55, 78)" >
<tbody>
<tr>
<td align="center" bgcolor="#C51A1C">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>


<tr>
<td width="100%" class="header">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>

<td width="100%" valign="middle" align="left">
<img width="200px" style="margin:auto; display: block;" alt="logo" src="https://image.noelshack.com/fichiers/20 ... parent.png" />
<p style="color: black; font-size:15px; text-align: center; font-weight: bold;">Votre ticket a été mis à jour, pour le consulter rendez-vous dans votre espace personnel.</p>
<h2>
#mail_object#
</h2>
</br>
</td>
<td width="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="1" bgcolor="#d7d6d6"></td>
</tr>

<tr class="content">
<td width="640" bgcolor="#FFFFFF">
<table width="640" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="30"></td>
<td class="w580" width="580">
<br />
<p style="padding-top:12px; text-align: center;">#mail_txt#</p>
<table class="w580" width="580" cellspacing="0" cellpadding="0" border="0" style="text-align: center;">
<tbody>
<tr>
<td width="275" valign="top">
<span class="title">#title# :</span> #ticket_title#
</td>
<td width="30" ></td>
<td width="275" valign="top">
<span class="title">#category# :</span> #ticket_category# - #ticket_subcat#
</td>
</tr>
<tr>
<td width="275" valign="top">
<span class="title">#user# :</span> #ticket_user#
</td>
<td width="30" ></td>
<td width="275" valign="top">
<span class="title">#technician# :</span> #ticket_technician#
</td>
</tr>
<tr>
<td width="275" valign="top">
<span class="title">#state# :</span> #ticket_state#
</td>
<td width="30" ></td>
<td width="275" valign="top">
<span class="title">#date_create# :</span> #ticket_date_create#
</td>
</tr>
<tr>
<td colspan="3" class="w580" height="5" ></td>
</tr>
<tr>
<td colspan="3" class="w580" height="1" bgcolor="#c7c5c5"></td>
</tr>
<tr>
<td colspan="3" class="w580" height="5" ></td>
</tr>
<tr>
<td colspan="3" class="w580">
<span class="title">#description# :</span> <p>#ticket_description#</p>
</td>
</tr>
<tr>
<td colspan="3" class="w580" height="1" bgcolor="#c7c5c5"></td>
</tr>
<tr>
<td colspan="3" class="w580" height="5" ></td>
</tr>
<tr>
<td colspan="3" class="w580">
<span class="title">#resolution# :</span> <p>#ticket_resolution#</p>
</td>
</tr>
<tr>
<td colspan="3" class="w580" height="1" bgcolor="#c7c5c5"></td>
</tr>


</tbody>
</table>
</td>
<td width="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>


<tr >
<td width="640" class="footer">
<table width="640" cellpadding="0" cellspacing="0" border="0" >
<tbody>
<tr>
<td colspan="5" height="10"></td>
</tr>
<tr>
<td width="30"></td>
<td class="w580" width="580" valign="top">
<p class="min" >#mail_txt_end#</p>

</td>
<td width="30"></td>
</tr>
<tr>
<td colspan="5" height="10"></td>
</tr>
</tbody>

</table>
</td>
</tr>
<tr>
<td width="640" height="60"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>

lun. 10 juin 2024 16:33

pourquoi ne pas redimensionner directement le fichier image ?