Comments (8)
Returning to this and trying to think what might be the best solution...
The conflicting line: https://github.com/voidlabs/versafix-template/blob/master/template-def/template-versafix-1.htmml#L342C1-L342C41
Maybe turning display: block
only for a mosaicoimg
class?
img.mosaicoimg { display:block;}
And then adding this class to all existing images in the template?
from versafix-template.
Of course this is a bug from Gmail, so I'd treat it as a bug in Gmail, and put a specific workaround instead of altering the way we deal with things.
My first attempt at fixing this would be something similar:
img[data-emoji] { display: inline }
or maybe, even better, something more gmail specific:
u + div img[data-emoji] { display: inline }
(This should be reported to Google that should add to their replaced emoji some inline style or some !important css overriding the email css)
from versafix-template.
Thanks @bago
img[data-emoji] { display: inline }
makes sense for me. I will try it in our versafix based templates.
from versafix-template.
Let me know if it works.
Also, give a try to the "u+div " prefixed version, as it is a gmail specific targeting technique.
from versafix-template.
@bago I deployed img[data-emoji] { display: inline }
solution in a production environment and emojis now are displaying inline. Thanks!
from versafix-template.
@bago, I'm realizing that this patch doesn't fix the problem in the end. The styles are applied before the email is sent and before Google converts the emojis into images. It must have been set incorrectly when I tested, sorry.
I think the solution needs to go in the direction pointed in this other comment #41 (comment) restricting the scope of the display:block for images.
from versafix-template.
I looked at this and I think the best options is to simply change
img { border: 0px; display: block; }
to
img:not([data-emoji]) { border: 0px; display: block; }
Note that the content of ":not(...)
" is just cosmetic as the ":not" is just a way to prevent the rule to be read from Gmail (Gmail does not support :not). "img:not(a)
" would work the same, but I'd use not([data-emoji]) so to make it more explicit why we need that workaround. The rule will anyway do its work on gmail because we do inlining so we add that border and display rules to every img tag before saving.
I also think maybe it is safer to move the img rule at the end of its style block (sometimes css parsers stop parsing the whole thing when they found rules they don't understand).
from versafix-template.
Thangks @bago. It works
from versafix-template.
Related Issues (20)
- Alt text for logoBlock may not be correctly styled
- Use role="presentation" for layout tables
- Remove ALT attribute when it's empty
- Windows 10 Mail - STRONG inside links render in blue HOT 1
- [Help]: Issue with enewsletter template HOT 1
- Unnecessary font face declaration? HOT 5
- How can I toggle footer section of the template? HOT 1
- Build fails while generating thumbnails HOT 2
- Script to clean build is missing dependency
- Issue with Images - Blurry - Poor Resolution HOT 3
- Outlook forwarding problem HOT 2
- Background Images in Blocks/templates HOT 1
- npm run translate returns an error (Missing translation) HOT 3
- Broken layout for sideArticle (and sideImage) block when the paragraph is "short"
- Versafix is not responsive on Samsung Email app when Autofit is enabled (default options)
- How to change background color of a paragraph HOT 1
- versafix-1: proposal to include new Twitter logo HOT 1
- defining default Urls for social links possible? HOT 10
- Missing brand icons with "Custom buttons" in social share block
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from versafix-template.