I have a table whose rows are generated dynamically depending on users' input (it is a summary of charges that may or may not take a promo code--if the user have one--and a gift message--if the user sends one). There is no way to generate the items of the summary of charges on a loop since the items come from different places in my application. I only have conditionals for the items to appear or not on the users' order depending on what the order is like. The table needs to have zebra-stripping. Because the number of items may vary, I cannot hardcode the color inline (it is an e-mail). I tried twig's divisibleby and modulo on the rows, so the colors would alternate for even and odd rows. Although the color changes it does not change to the color I want and it is not doing the zebra stripping (all rows change to blue. I need colors to alternate between light beige (#fcf9f5) and white (#ffffff)). What am I missing?
Here is the code for one tr:
{% set index = 0 %}
<tr bgcolor="{% if index is divisibleby(2) %} #fcf9f5 {% else %} #ffffff {% endif %}">
<td align="left" style="height: 30px; width: 273px; padding-left: 40px;">
<span style="font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,'Lucida Grande', sans-serif;font-weight: 500;">Order Subtotal:</span>
</td>
<td align="left" style="height: 30px; width: 273px; padding-left: 40px;font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,'Lucida Grande', sans-serif; font-weight: 300;">
<span>{{ order.itemsTotal|sylius_price }}</span>
</td>
</tr>
{% index++ %}
Sorry but Twig can't correct the fact that your code is dirty.
Let's say you have 3 diferents sources. If you display them all in an array they have all comon attributes right?
you just have to combine all the source objects in a simple displayable object (a DTO).
Twig can't contain business logic, it just display stuff.
If you want to keep your logic in your view, try to use twig merge fuction to combien your arrays and display them in a loop
Related
Today I tried the new "Virtual Deliverability Manager" feature of AWS SES. Here I immediately noticed a problem with our emails.
For Outlook, there is an extra markup element "v:roundrect" in our email template.
The href in this element is not replaced by the tracking link from AWS.
All other links from our template are successfully replaced.
Snippet of our Email-Template:
<div align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#800500" fillcolor="#da251d">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Jetzt Bestellen!</center>
</v:roundrect>
<![endif]-->
Jetzt Bestellen!
</div>
Link in other EmailClients (Correct - replaced):
Link in Outlook (Incorrect - Not replaced):
Has anyone had similar experience in this regard?
It looks like AWS SES only replaces the classic a-tag hrefs.
Unfortunately I didn't find anything in their documentation about this.
My temporary workaround:
(No fix!)
I changed the Html of my Template. As a result, the button in Outlook no longer has the desired rounded edges. But now the tracking works.
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #da251d;" align="center">
<a rel="noopener" target="_blank" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">Jetzt Bestellen!</a>
</td>
</tr>
</table>
Currently AWS is scanning only the links that are presented in the email and converting them. There is only possibility to remove the specific links from tracking using additional ses:no-track
Here is an example:
<a ses:no-track href="aws.amazon.com">Amazon Web Services</a>
On the other hand they do not allow(YET, maybe in the future) to provide a field to specifically convert some links in the other elements (as in your case
I am trying to form a table in django template. One row will be white, other row will be gray... And it will go on like that. So the table rows will be displayed 1 white row, 1 gray row. So it will be more readable. I tried to set an integer variable to decide in which if condition what color the row will be. The colors are determined in class="tr1" and class="tr2" css classes. But it is always setting class="tr1". So always 1st if condition is working. Couldnt solve it.
{% with 0 as num %}
{% for note in notes %}
{% if num == 0 %}
<tr class="tr1">
<td class="td_size1">{{note.teacher__name}}</td>
<td class="td_size1">{{note.attendance}}</td>
<td class="td_size1">{{note.time}}</td>
<td class="td_size1">{{note.dailynote}}</td>
</tr>
{{ num|add:1 }}
{% endif %}
{% if num == 1 %}
<tr class="tr2">
<td class="td_size1">{{note.teacher__name}}</td>
<td class="td_size1">{{note.attendance}}</td>
<td class="td_size1">{{note.time}}</td>
<td class="td_size1">{{note.dailynote}}</td>
</tr>
{{ num|add:-1 }}
{% endif %}
{% endfor %}
{% endwith %}
I solved this by using css. There is also a javascript solution but it does not work if javascript disabled. In the css it checks , if it is odd or even. If it is odd it gives first color, if it is even it gives second color.
table.custom1 {
font-family: arial, sans-serif !IMPORTANT;
border-collapse: collapse !IMPORTANT;
width: 100% !IMPORTANT;
}
td.custom1, th.custom1 {
border: 1px solid #511327 !IMPORTANT;
text-align: left !IMPORTANT;
padding: 4px !IMPORTANT;
}
tr.custom1:nth-child(even) {
background-color: #701b36 !IMPORTANT;
}
tr.custom1:nth-child(odd) {
background-color: #5e172e !IMPORTANT;
I wanted to post the highlighted annotation of a document [highlighted using GATE developer tool] to new file [either word or Excel]. Can someone help me with any suggestions or this?
Thanks in Advance.
Regards,
Gayatri
Sorry, I can't comment yet...
Similar question here Read annotated data from GATE datastore
The provided answer (By Ian Roberts) has means to store selected annotations in files.
Suggestion: Use GATE embedded (with Java).
Reading annotated documents in html is fairly straight forward. You can follow the instructions for printing which can be executed using a text editor. Remember to select the annotations you wish to display and save the artifact using the ‘Save Preserving Format’. The resulting xml will have the annotation tags you select embedded in the saved document.
You can also visualize in html.
<!DOCTYPE html>
<div id="topContent">
<h1>Report Example</h1>
<p>
This example provide a visualization of a annotated document produced by GATE using ANNIE with defaults. To use with Javascript, the document can be formatted as an xml document using xmlHttpRequest.
</p>
</div>
<div id="pageView">
<div id="legendView">
<h3>Document Legend</h3>
<div>
<table id="annotationTable">
<tr>
<th>Facet</th>
<th>Color</th>
</tr>
<tr>
<td>Date</td>
<td id="dateFill"></td>
</tr>
<tr>
<td>Location</td>
<td id="locationFill"></td>
</tr>
<tr>
<td>Organization</td>
<td id="organizationFill"></td>
</tr>
<tr>
<td>Person</td>
<td id="personFill"></td>
</tr>
</table>
</div>
</div>
<p>..Add GATE XML contents here..</p>
</div>
Once the html is set up, add the css:
body {}
table, th, td {
border: 1px solid black;
text-align: center;
font-family: arial;
}
#annotationTable {
border-collapse: collapse;
width: 10%;
}
#topContent {
font: 18px arial;
}
#pageView {
border: 1px solid black;
font: 14px arial;
}
#legendView {
margin: 10px 10px 10px 10px;
}
#dateFill {background-color: rgb(51, 255, 119)}
#locationFill {background-color: rgb(204, 153, 255)}
#organizationFill {background-color: rgb(102, 255, 255)}
#personFill {background-color: rgb(255, 204, 153)}
Date {background-color: rgb(51, 255, 119)}
Location {background-color: rgb(204, 153, 255)}
Organization {background-color: rgb(102, 255, 255)}
Person {background-color: rgb(255, 204, 153)}
This provides a basic view of the GATE annotations. Of course it can be more complicated depending on what you are trying to express. See the Fiddle
To view in MS Word:
Open the saved annotated xml file in MS Word.
Add the css file to the same directory where the annotated document is stored.
Open the Developer Tab in Word.
Select the Document Template icon.
Select the Linked CSS tab, navigate to the location of the annotated document and css file.
Add the css file to the Linked Style Sheets.
Save the document as a Web Page.
Navigate to where you saved the html page and open in your favorite browser.
Ensure that you have selected Print Background Colors and Images from the Page Setup.
Print for a highlighted document.
Kind of a pain in the butt but it works if you want a printed copy. The document will not present css in Word. I hope this helps.
i would like to change the font colour of my title(i managed to give it a black background) into white. I figured i would make a font tag around it, which didn't seem to work. Any help would be appreciated(don't blame me, i am a newbie. And yes, i googled first)
<tr bgcolor="#000000">
<font face="courier" color="white">
<th>Black Components</th>
</font>
</tr>
It appears as a Black window with a black font in it
as a little bonus, if someone could tell me how to change the font style too, that would be amazing
Inside your table or another part of pdf you can use
<fo:block font-weight="bold" color="#ffffff"> your text or somethig else </fo:block>
In modern HTML, it is preferred to use CSS stylesheets instead of things like a bgcolor attribute or a font tag, as those are considered obsolete. The following should help you:
<tr style="background: black;">
<th style="color: white; font-style: italic; font-family: Courier, monospace;">Black Components</th>
</tr>
Professional websites also usually encapsulate such styles into classes so that you don't need to copy these attributes all the time. This would look like:
/* CSS file, e.g. main.css */
.row {
background: black;
}
.column-header {
color: white;
font-style: italic;
font-family: Courier, monospace;
}
<!-- HTML file, should reference main.css with a <link> tag inside <head> -->
<table>
<tr class="row">
<th class="column-header">Header 1</th>
<th class="column-header">Header 2</th>
</tr>
</table>
See also MDN documentation about CSS.
I wish to make a collapse template to hide a block of text and show it by clicking on expand.
I found such code as follows
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked
</div>
</div>
which I tried to make a template for (Collapse)
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
{{{1}}}
</div>
</div>
My currently failing call would be
{{Collapse|some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked}}
but I do not succeed to pass the input text block using {{{1}}} because my content is full of line feeds and other formatting tags.
Do I need to act in the template or in the call to wrap and with which tag?
any help welcome.
You need create two templates:
{{Collapse Begin}}
With contents:
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
And:
{{Collapse End}}
With contents:
</div>
</div>
And then on pages add:
{{Collapse Begin}}
some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked
{{Collapse End}}
Apparently, naming the parameters allows using multiline input (do not ask me why!).
The following code does the job for me but thank you ankap for the smart idea, I will reuse it somewhere else.
I added an optional margin to indent the coloured box when used in lists and a separate parameters for the message shown in collapsed-mode.
<!-- takes tup to three parameters
* margin: to indent the block in the page, useful if the collapse is within a bullet list
* comment: to show a warning on the expand line
* content: the actual content to hide
# adding additional div improved support for lists etc...
-->
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6;
border-style: thin black; font-style:italic; margin-left: {{{margin|0px}}}; ">
<includeonly><i>{{{comment|<nowiki>
Try it by yourself before expanding on the right!</nowiki>}}}</i><includeonly>
<div class="mw-collapsible-content"><div>{{{content|{{{1}}}}}}</div></div>
</div>
enjoy!