voidlabs / versafix-template Goto Github PK

Hey! I am trying to edit the vesafix template to fit our needs. which includes defining default href URLs for the social Icons.

I wanted to ask if this is even possible because I have tried it in a few different ways including:

Defining the URL in the block definition:

socialBlock {
        label: Social Block;
        properties: -//- fbUrl=someUrl -//-
        variant: socialIconType;
        theme: frameTheme
      }

which yields me this error:
Exception while parsing the template Exception parsing expression @[fbUrl] [] Trying to set a new default value for socialBlock fbUrl while it already exists (current: test, new: )

or defining it through the actual Url attribute:

fbUrl {
        label: Facebook Link;
        extend: url;
        default: someURL
      }

which does not throw an error but does not seem to set a default value.

Seems like Yandex is removing the whole style attribute when it find something "unexpected".

From some tests the issue is within the "calc(NUMBERpx - NUMBER%" we use to enable responsivity when media queries are not available. Whenever Yandex parser find a "-" a "_" a "+" an "*", an "&" in brackets it will remove the full style object. If it finds a "- " sequence or a "-NUMBER" or a "NUMBER-" in a property value (even not in brackets) it will also remove the full style object.

Otherwise Yandex removes only the unknown styles.

That calc is our current main responsive solution for multicolumns:
https://github.com/voidlabs/versafix-template/blob/master/template-def/template-versafix-1.mml#L467

I currently don't see how we could workaround Yandex, unless we find some way to target Yandex. We could try replacing the div with a span, but we have to check all of the other clients to see if this would work for them.

If no textual elements "pushes" the width of the content to "100%" then the sideArticle/sideImage blocks fallback to a mobile layout.

This is a regression introduced in 1.2 and 1.3 code (mainly because of new "ltr" "rtl" code)

We currently use "-ko-attr-alt: @image.alt" and this creates an empty ALT="" attribute when the alt variable is empty.
Images with empty alt are "special" for Firefox and Chrome and, for example, they are hidden when the source url is invalid. This make less usable the tool in some case.

From a fresh repo clone, I run npm install then npm run translate and I get the following error:

> [email protected] translate
> node src/translate.js

Missing translation:  options bw=Gray Circle
                |colors=Coloured Circle
                |bwb=Black Circle
                |sqbw=Gray Square
                |sqcolors=Coloured Square
                |sqbwb=Black Square
                |rdcol=Rounded Colors
                |rdbl=Rounded Black
                |rdw=Rounded White
                |sqrdcol=Squared Colors
                |sqrdbl=Squared Black
                |sqrdw=Squared White
                |white=White
                |coloured=Coloured
                |black=Black
Missing translation:  options colors=Coloured Circle
                |bw=Gray Circle
                |bwb=Black Circle
                |sqbw=Gray Square
                |sqcolors=Coloured Square
                |sqbwb=Black Square
                |rdcol=Rounded Colors
                |rdbl=Rounded Black
                |rdw=Rounded White
                |sqrdcol=Squared Colors
                |sqrdbl=Squared Black
                |sqrdw=Squared White
                |white=White
                |coloured=Coloured
                |black=Black

My env versions:

npm version
{
  'versafix-template': '1.3.2',
  npm: '8.19.2',
  node: '16.18.0',
  v8: '9.4.146.26-node.22',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.47.0',
  napi: '8',
  llhttp: '6.0.10',
  openssl: '1.1.1q+quic',
  cldr: '41.0',
  icu: '71.1',
  tz: '2022b',
  unicode: '14.0',
  ngtcp2: '0.8.1',
  nghttp3: '0.7.0'
}

Just as a note, the npm install returns the following warnings:

npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this package is now deprecated

When using "separator block", you will encounter a little misbehavior in IOS Mail, when using it in device with larger fonts (accessibility settings).
The "hr" (in fact a colored td cell) height will be enlarged too, maybe due to the use of "font-size: xpx; line-height: xpx;" css attributes, that is multiplied by the IOS font size selector.

For sure the editor is not able to use the color for the "frame" but maybe the issue affects also the output email (being limited to ALT it is minor).

That's what happens when you try to forward an email.

We have reports of very large social icons on outlook. Unfortunately we don't know which version of outlook and if it is related to high dpi or not.

We should test this and maybe add some "width/height" in the CSS styles (now they are only defined as html attributes).

I created a template using mosaico.io. Once I downloaded and tested the newsletter through both Microsoft Word and our client relations management software, Sumac, there is a line that appears in my downloaded version of Outlook and not in my online outlook. I've read through the contributing file from mosaico.io, but I'm not a coder and don't understand most of the recommended solutions like "take note of the full log of your npm install, and grunt commands output" or "you have to build it and to run a backend server (either the node.js version bundled with this project or the php backend referenced above or write your own)".

I'm hoping someone can email me to help [email protected]

I am using the versafix-1: The versatile template
Microsoft Office 1808
I don't know what a backend is...

empty url() is like referencing to the same url of the page being viewed: this is not an issue with real email clients, but webmails or "web versions" of the email will make sub-requests to the same url.

I have read the readme several times and believe I am including all the appropriate information. Please let me know if that is not the case, and I will include what is missing. I am viewing the versafix-1 template in Outlook 2016 on Windows 10. When I view the emails with Outlook 2016, I am seeing lines in the shown email. I am using the online Mosaico editor (the demo editor) to send myself a test email. I am also experiencing this issue with the code I have cloned from github and that is why I tried a test email in the online editor. I am not seeing this issue with other clients I have (Outlook 2010, Gmail and Android Email, MailCatcher in my dev environment also does not display them).

I generated the email below by going to the online demo editor, inserting the blocks I have seen the issue with thus far and used the Test button to send myself a test email.

Currently, if you try to insert an emoji in a versafix-template, clients like Gmail convert the emoji into img element. In versafix, all img elements are styled with display:block. It's not possible to get an inline emoji for example in a section title.

Mosaico visualization

Gmail inbox visualization

Screenreaders would thanks

Hello, Twitter recently changed the logo, would it be a good idea to include it in a new version?

Thanks

defined colors
#517bbe,#64ccf1,#dc4e41,#5e5656,#0079ba,#bd091d,#ff0082,#05b5ec,#4a79a3,#ef2922
social icons colors
#3b5998,#4099FF,#d34836,#606060,#007bb6,#C92228,#ff0084,#45bbff,#bc2a8d,#cd201f

Samsung Email app seems to supports styles and media queries but does something weird and adapts the viewport to the largest "width" attribute or style width property found on any html element in the email.

So versafix is rendered full width, like it does on desktop.

Samsung Email market share is around 5% in some countries, so we'd like to support it.

The issue is documented here, but there is no known workaround yet:
hteumeuleu/email-bugs#73

There's some hints also in this Litmus community discussion:
https://litmus.com/community/discussions/7133-samsung-mail-100-width-fix-for-left-aligned-mails

When trying to run the provided script to clean the project, it complains about a missing package:

$ npm run-script clean

> [email protected] clean /home/frederic/XR/versafix-template
> node ./node_modules/rimraf/bin.js -- 'dist/template/*' 'dist/template.it/*'

internal/modules/cjs/loader.js:796
    throw err;
    ^

Error: Cannot find module '/home/frederic/XR/versafix-template/node_modules/rimraf/bin.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] clean: `node ./node_modules/rimraf/bin.js -- 'dist/template/*' 'dist/template.it/*'`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The package rimraf is indeed not mentioned in package.json. Once it is installed by running npm install --save-dev rimraf the script works as expected.

Good afternoon,
I am looking for a way to change the background color of a paragraph in a block.
I figured out how to change the color for the complete bloc and how to highlight only the text but how about the background color of the text zone (delimited by a square visible when writing the paragraph) ? I put an example attached
Thanks for your help.

Sounds like Windows 10 Mail have a default stile for "a strong" to render them in dark blue/black.
Unfortunately Windows 10 Mail does not support "color: inherit" so we need a different workaround.

I want to add new button (Show Prefooter) like Show Preheader.

Can you reply me as soon as possible

is it possible to add background images to a template? I found this issue, that seems to imply it should be possible, but I am not sure where to add code to be able to reproduce this.

Is it possible to add an image picker to the template, and define a background image for either blocks or the whole template?

@bago Adding this here as the issue may effect just the versafix template.

It also seems that images used in templates are treated differently than in production emails. Attached you will see two of the same images, both on the triple block with text. The top image is what we had in the template, the bottom image, we added in the production email. the source is the same file.

Hi,
when trying to build the template using the provided script by running npm run-script build, it fails with the following error:

ReferenceError: cmd is not defined at makeThumbs (/home/frederic/XR/versafix-template/src/makeThumbs.js:23:64)

The reason is that in line 5 of src/makeThumbs.js the variable phantombin is assigned the property path of require(phantomjs-prebuilt), which exists, but is null. This of course does not work when trying to run that variable as part of a shell command var result = cp.execSync(phantombin + ' ' + args.join(' '), { stdio: [0, 1, 2] }); in line 19.

My environment is as follows:

• OS: Ubuntu 19.10
• nodejs v12.14.1
• npm 6.13.4

Any idea what I am doing wrong? Is my node version to new? Is phantombin not installed in the correct version?

Thanks,
Frederic

https://github.com/voidlabs/mosaico/blob/6225f4d1a2056fced024d185c493c9aafc18d589/templates/versafix-1/template-versafix-1.html#L606

Hi, I'm trying to create a new template and I'm using the versafix as a base/learning template. I noticed that some of the links of the images have font preferences even though they don't have any text content in the output. Maybe clearing these unused parts would be useful... Or am I missing something? :)

The output and the preview is correct, but during editing on Firefox you can spot a couple of px coloured with the external background color under the block.

Could be an issue with the "display: inline-block" in the "editing div" here:
https://github.com/voidlabs/versafix-template/blob/master/template-def/template-versafix-1.mml#L401

Need to remember why it was inline-block before we try to remove it.