Modify src in img with select

[denics]

Hi all, I am trying to create a new template in a multilingual environment and I was wondering if it would be possible to modify src using the select widget in order to have different images depending on the language.

so far I have tried something like this:

logoBlock src { 
                label: Logo Block Source; 
                widget: select; 
                options: en=https://www.example.com/logo_en.jpg|fr=https://www.example.com/logo_fr.jpg; 
                variant: logoBlockSource;
            }

...

                                            <a href="https://www.example.com"><img data-ko-display="logoBlock" width="100%" -ko-src="@src" vspace="0" hspace="0" border="0" alt="" /></a>

but I had no luck. Thanks, Denis

[bago]

<img src="https://www.example.com/logo_en.jpg" style="-ko-attr-src: @src" />

https://github.com/voidlabs/mosaico/wiki/Template-language#-ko-properties-as-css-styles

and

options: https://www.example.com/logo_en.jpg=en|https://www.example.com/logo_fr.jpg=fr;

because the VALUE you want to use is the key.. and the language is the label.

Otherwise you define a lang variable with en|fr values in a select and then work on multilanguages in the template:

<img ko-display="lang eq 'en'" src="https://www.example.com/logo_en.jpg" />
<img ko-display="lang eq 'fr'" src="https://www.example.com/logo_fr.jpg" />

or

<img src="https://www.example.com/logo_en.jpg" style="-ko-attr-src: @['https://www.example.com/logo_'+lang+'.jpg']" />

or maybe even this syntax

<img src="https://www.example.com/logo_en.jpg" style="-ko-attr-src: https://www.example.com/logo_@[lang].jpg" />

[denics]

Great, grazie. I did it as you suggested, but now the block does not "stick" in the template anymore. I am trying to modify the versafix-1 template

<style type="text/css">
logoBlock src {
  label: Logo block Source;
  widget: select;
  options: https://example.com/inforadar.jpg=en|https://example.com/inforadar_fr.jpg=fr;
}
logoBlock {
  label: Logo Block;
  properties: image imageWidth=258;
  variant: imageWidth;
  theme: contentTheme
}
</style>
...
...
...
<!-- logoBlock -->
<table class="vb-outer" width="100%" cellpadding="0" border="0" cellspacing="0" bgcolor="#bfbfbf" style="background-color: #bfbfbf;" data-ko-block="logoBlock">
  <tr>
    <td class="vb-outer" align="center" valign="top" bgcolor="#bfbfbf" style="background-color: #bfbfbf;">
    <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
      <div class="oldwebkit">
        <table width="570" style="width: 100%; max-width: 570px" border="0" cellpadding="0" cellspacing="18" class="vb-container fullpad">
          <tr>
            <td valign="top" align="center">
              <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
              <div style="display:inline-block; vertical-align:top; width:100%;" class="mobile-full">
                <a href="https://example.com" style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;"><img width="570" src="https://example.com/inforadar.jpg" vspace="0" hspace="0" border="0" alt="" style="-ko-attr-src: @src; width: 100%; max-width: 570px;"/></a>
              </div>
            <!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
            </td>
          </tr>
        </table>
      </div>
      <!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
    </td>
  </tr>
</table>
<!-- /logoBlock  -->

Thanks a lot for helping me with my first steps.

[bago]

I just tested with the `options: https://example.com/inforadar.jpg=en|https://example.com/inforadar_fr.jpg=fr;options: https://example.com/inforadar.jpg=en|https://example.com/inforadar_fr.jpg=fr; and it works fine. If the block breaks the layout you probably are writing wrong HTML: e.g, the outer table puts a max-width 570px and a cellspacing of 18px, then you put a content image 570px large.. just do the math ;-)