Comments (5)
Please read https://github.com/voidlabs/mosaico/blob/master/CONTRIBUTING.md and provide more details as I don't understand what's the issue and how to reproduce it.
from mosaico.
I will attach some Pictures later to give an example. I just need to edit a template without our client's information.
But Basically i have a template that has multiple headers in a block that looks like this:
<table data-ko-block="logoBlock" align="center" border="0" cellpadding="0" cellspacing="0" class="vb-outer" style="padding-top: 30px; padding-bottom: 20px; width: 460px;">
<tr>
<td valign="middle">
<table style="border-collapse: collapse;" align="right">
<tr>
<!--[if (gte mso 9)]>
<table style="">
<tr>
<td style=" max-height:82px; max-width:460px;" valign="top">
<![endif]-->
<td valign="top" style="width: 460px;" data-ko-display="logo eq 'head1'">
<img style="max-width: 460px; display: block; -ko-attr-alt: @image.alt;" src="header_1.png" align="center" alt="" border="0" hspace="0"
width="460" height="82" data-ko-placeholder-height="82" />
</td>
<td valign="top" style="width: 460px;" data-ko-display="logo eq 'head2'">
<img style="max-width: 460px; display: block; -ko-attr-alt: @image.alt;" src="header_2.png" align="center" alt="" border="0" hspace="0"
width="460" height="82" data-ko-placeholder-height="82" />
</td>
<td valign="top" style="width: 460px;" data-ko-display="logo eq 'head3'">
<img style="max-width: 460px; display: block; -ko-attr-alt: @image.alt;" src="header_3.png" align="center" alt="" border="0" hspace="0"
width="460" height="82" data-ko-placeholder-height="82" />
</td>
<td valign="top" style="width: 460px;" data-ko-display="logo eq 'flex'">
<img data-ko-editable="image.src" style="max-width: 966px; display: block; -ko-attr-alt: @image.alt;" src="flex_header.jpg" align="center" alt="" border="0" hspace="0"
width="460" height="82" data-ko-placeholder-height="82" />
</td>
<!--
-->
<!--[if (gte mso 9)]>
</td>
</tr>
</table>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
<!-- /logoBlock -->
the problem that i encounter is that the generator for the preview immages seems to be ignoring the "data-ko-display" statements to hide the headers and shows them all at once.
This in turn pushes all the content of all the other blocks to the right and off screen making them appear empty in the preview.
from mosaico.
I'm sorry I can't answer if you don't give me step by step details to see the issue.
Are you talking about the "makeThumbs" task Mosaico included years ago?
What code are you using? What command are you running?
I'm not yet sure what's your issue, maybe you simply forgot to put some "display:none" around:
https://github.com/voidlabs/mosaico/wiki/Template-language#data-ko-attributes
data-ko-display="condition" => the element and children are displayed only when condition is true. When you use this attribute for a "hidden by default" element, then add a style="display: none" to your element, so that the preview of the html will match your default version. Mosaico will remove the display none when interpreting this attribute.
from mosaico.
ah sorry, yes i am talking about he "makeThumbs" task.
we have not yet tried the "display: none".
from mosaico.
Well, I removed makeThumbs from this project 5 years ago.
I consider makeThumbs a custom script used in the versafix-template project:
https://github.com/voidlabs/versafix-template/tree/master/src
It is not a "supported" way to automatically generate thumbnails for any templates: we saw template author most times generate their block thumbnails manually and often they prefer to use custom abstract images instead of real "thumbnails".
I'll close this bug as it doesn't apply to mosaico library.
Please use https://github.com/voidlabs/mosaico/discussions if you want to discuss the use of that task with mosaico.
Maybe in future we'll factor out template tooling from https://github.com/voidlabs/versafix-template to a "mosaico-template-tooling" project so to make it reusable by other custom templates.
from mosaico.
Related Issues (20)
- Deal with imagesSources declaration with missing keys HOT 1
- Docker HOT 3
- Shift-enter in single line editables introduces <p> tags! (regression)
- Unexpected empty line at the end of editable contents in Chrome 95+
- Possibility to delete images HOT 2
- Placeholder generator HOT 3
- tinymce 4.x has a vulnerability, could mosaico be distributed with 5.x by default?
- The querystring API is considered Legacy. new code should use the URLSearchParams API instead HOT 2
- [help] Error code: STATUS_BREAKPOINT
- activate extended colorwheel
- boolean variable sets default to true instead of false HOT 2
- How to control which tiny editor is used in editable block
- tiny editor not full HOT 4
- [Feature] Fediverse social media buttons HOT 1
- Feature request: gif support HOT 2
- default value for select widget HOT 1
- [Feature] Sort social icons HOT 1
- Add new font
- versafix-1 outlook 2016 display issue
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 mosaico.