Hi,
I have a question.
I don't succeed to display image in inline-block with mj-image tag.
Can I have some help please ?
mdrick
All 23 comments
Hello @mdrick
What do you want to achieve ? Looks like you want to do a 2 column layout. Such as :
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-image ... />
</mj-column>
<mj-column>
<mj-text ... />
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
iRyusa
on 4 May 2016
I think that @mdrick means something like that:
I'm also interested in knowing how please
younes0
on 4 May 2016
You can try this
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" /> Hello
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
It's not perfect, but it's a start solution
loeck
on 4 May 2016
@lohek Thanks, got it. I thought that HTML elements were forbidden in the MJML markup :)
Next I have to play with vertical-align, not sure that it's well supported in email clients.
younes0
on 4 May 2016
And this ?
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-table>
<tr>
<td style="width: 38px;">
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" />
</td>
<td>
Hello
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
loeck
on 4 May 2016
Mobile
Desktop
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<h1>
Best email ever
</h1>
</mj-text>
<mj-image src="http://191n.mj.am/img/191n/3s/xxr.png" />
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-table>
<tr>
<td width="15%">
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" />
</td>
<td width="35%">
Hello 1
</td>
<td width="15%">
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" />
</td>
<td width="35%">
Hello 2
</td>
</tr>
</mj-table>
<mj-text>
You've got a mail
</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-divider />
<mj-text>
Such w0w
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Maybe you can use pixel width for mj-table > td (but beware for responsive)
loeck
on 4 May 2016
@lohek Yes it's vertical-aligned now!, my only concern is that I didn't manage to align right the second TD. I'd like to achieve this:
younes0
on 4 May 2016
OKay I succeded by doing this:
<!-- header -->
<mj-section padding-bottom="0">
<mj-column>
<mj-image padding-left="0" width="120" align="left" src="http://www.mylogo.com/" />
</mj-column>
<mj-column>
<mj-table padding-top="25px">
<tr align="right">
<td>
<img src="http://www.mylogo.com/" width="14px" />
</td>
<td width="150px">
Allo: 04 67 XX XX XX
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
A little more tricky... but :
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<h1>
Best email ever
</h1>
</mj-text>
<mj-image src="http://191n.mj.am/img/191n/3s/xxr.png" />
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-table>
<tr>
<td width="50%" align="left">
<table>
<tr>
<td width="15%">
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" />
</td>
<td width="35%">
Hello 1
</td>
</tr>
</table>
</td>
<td width="50%" align="right">
<table>
<tr>
<td width="15%">
<img src="http://puu.sh/oFRKF/fe5c62d40a.png" />
</td>
<td width="35%">
Hello 2
</td>
</tr>
</table>
</td>
</tr>
</mj-table>
<mj-text>
You've got a mail
</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-divider />
<mj-text>
Such w0w
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Edit: Oh, i didn't see your message, nice !
loeck
on 4 May 2016
this seems like a a good candidate for a new component, will try to PR
younes0
on 4 May 2016
Thanks @younes0 for your contribution! Until you open a PR, I'm closing this issue which looks solved to me. Feel free to reopen if something is still missing to you.
arnaudbreton
on 6 May 2016
I ended up using mj-social since the above solutions were not like we expected on some devices/clients. A mj-social icon-url instead of base-url parameter would be a nice addition
younes0
on 9 May 2016
i need to do the same thing, basically show a text and an icon right next to it.
what's the current recommended way of achieving this?
using mj-social feels really hacky, also i need the icon to be on the right of the text not the left.
thanks!
talarari
on 18 May 2017
Hey @talarari, can you explain more in details your need? A mockup/design would help.
Also, feel free to create your own issue for assistance as this one is >1 year old.
ngarnier
on 18 May 2017
If you want to take advantage of the functionality of mjml and save code, try this.
(01)500 0000
<mj-social-element color="#fff" src="assets/whatsapp.png">
<span>977 822 185</span>
</mj-social-element>
</mj-social>
SPChristopher
on 16 Sep 2019
Hye there,
I red in the documentation that it's possible to make the mj-social not clickable by not adding an href attribute, but the html generated still contain element that display pointer on hover and have redirection. Any idea how to make mj-social element not clickable ?
tpoussard
on 1 Jul 2020
I can't really reproduce https://mjml.io/try-it-live/rkoVuzqRL ?
iRyusa
on 1 Jul 2020
Indeed, when I paste your code inside my local code, it becomes clickable and in reverse, when I paste my code inside this codepen, it becomes not clickable ...
tpoussard
on 1 Jul 2020
Maybe you have an old mjml version ?
iRyusa
on 1 Jul 2020
I'm using the vscode extension from Attila Buti and you're right, it uses mjml 4.2.0 and in the releases, I've seen that the feature i'm seeking was released with the version 4.5.0. I've changed vscode extension to the fork from mjml and it is up to date.
Thanks a lot for your help !
tpoussard
on 1 Jul 2020
You might want to switch to our fork then
iRyusa
on 1 Jul 2020
Guys, I would want to use an image in the MJML email template that I am creating. I am using the image as a Link that is hosted on AWS. But the image does not seem to be working and it does not show the image. Could anyone help me with this?
shanjai7
on 30 Mar 2021
No so much we can do without code here. MJML rely on standard html img tag
so most likely an issue not related with mjml
On Tue, Mar 30, 2021 at 12:47 PM Shanjai Raj @.*>
wrote:
Guys, I would want to use an image in the MJML email template that I am
creating. I am using the image as a Link that is hosted on AWS. But the
image does not seem to be working and it does not show the image. Could
anyone help me with this?—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/223#issuecomment-810119904, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAELHTNOOLBEF53W2XZEAYTTGGT3VANCNFSM4CC35CKA
.
iRyusa
on 30 Mar 2021
Related issues
theVannu
·
3Comments
ghost
·
4Comments
fmauNeko
·
3Comments
kytosai
·
4Comments
plaisted
·
4Comments
Most helpful comment
If you want to take advantage of the functionality of mjml and save code, try this.
(01)500 0000