Переключить изображение на рабочий стол и мобильный телефон для электронной почты | мейлджет

Мы переходим на использование Mailjet API для отправки электронных писем. Одна проблема, с которой мы сталкиваемся прямо сейчас: мы используем шаблон скорости apache для тела html, где мы указываем URL-адрес изображения в теге src в html. Но по понятным причинам (размер изображения и т. д.) у нас разные изображения для десктопа, мобильного телефона/ipad.

Как мы можем определить, когда электронная почта отображается на клиентском устройстве, какой баннер должен отображаться. Есть ли у mailjet функция переключения изображений?

Заранее спасибо.


email velocity html-email velocity-template-language mailjet
person SANKALP sharma    schedule 15.05.2020    source источник
comment
Не уверен, почему за это проголосовали. Имеет смысл для меня. Скоро будет ответ..   -  person Nathan    schedule 18.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Если вам нужно заменить изображение, а не просто уменьшить его масштаб (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, а ваш код)

person Nathan    schedule 18.05.2020
comment
Спасибо Натан за ваш ответ. Я проверю это и скоро вернусь. - person SANKALP sharma; 19.05.2020