เรากำลังเปลี่ยนไปใช้ Mailjet API เพื่อส่งอีเมล ปัญหาหนึ่งที่เรากำลังเผชิญอยู่ในขณะนี้: เรากำลังใช้เทมเพลต apache velocity สำหรับเนื้อหา html โดยที่เราให้ URL รูปภาพในแท็ก src ใน html แต่เรามีรูปภาพที่แตกต่างกันสำหรับเดสก์ท็อป มือถือ/iPad ด้วยเหตุผลที่ชัดเจน (ขนาดรูปภาพ ฯลฯ)
เราจะทราบได้อย่างไรว่าเมื่อใดที่อีเมลถูกแสดงผลบนอุปกรณ์ของลูกค้าว่าจะแสดงผลแบนเนอร์ใด Mailjet มีฟังก์ชันสลับรูปภาพหรือไม่
ขอบคุณล่วงหน้า.
หากคุณต้องการสลับรูปภาพ ไม่ใช่แค่ลดขนาดลง (style="width:100%;height:auto;") วิธีการตอบสนองมีดังนี้:
เพิ่มสิ่งนี้ในส่วน <head> ของคุณ:
<style>
@media screen and (max-width:620px) {
.image_mobile {
display:block!important; max-height: none !important; max-width:none !important; line-height: 1.5 !important;width:100%!important; height:auto!important;
}
.hide {
display:none!important; width:0px!important; height: 0px!important; overflow:hidden!important; line-height: 0px!important; font-size:0px!important;
}
}
</style>
และใส่สิ่งนี้ลงในเนื้อหาของคุณ:
<img border="0" width="xxx" src="xxx" alt="xxx" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;width:100%;height:auto;" class="hide">
<!--[if mso]><!-->
<div style="display:none; font-size:0; line-height:0; max-height: 0; max-width: 0; width:0;" class="image_mobile">
<img border="0" width="xxx" src="xxx" alt="xxx" style="display:none; font-size:0; line-height:0;max-height: 0; max-width: 0; width:0; -ms-interpolation-mode: bicubic;" class="image_mobile">
</div>
<!--<![endif]-->
รูปภาพแรกจะแสดงตามค่าเริ่มต้น (เดสก์ท็อป; เว็บเมล; รูปภาพที่ไม่รองรับ @media) แต่แอปมือถือส่วนใหญ่จะรองรับ @media และจะซ่อนรูปภาพแรกและแสดงรูปภาพที่สอง
(ดังนั้นจึงไม่ใช่ฟังก์ชั่นของ Mailjet แต่เป็นรหัสของคุณ)
