Hi i am working on Symfony 2.4.2.I searched a multifile uploader for my application.
but in my Twig file where i am using this code its not working showing Error.
because of {% %} in twig we are using same syntax. can any one help me to figure out this.
If i am using this in HTML so its working.But i want it into TWIG file in Symfony.
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0,file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div>
<span class="label label-danger">Error</span> {%=file.error%} </div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;"> </div>
</div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload) { %}
<button class="btn blue start btn-sm">
<i class="fa fa-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn red cancel btn-sm">
<i class="fa fa-ban"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
Thanks in advance
Try putting your code between the autoescape tag in twig.
{% autoescape false %}
Everything will be outputted as is in this block
{% endautoescape %}
See this for reference and for more options:
http://twig.sensiolabs.org/doc/tags/autoescape.html
Edit:
If autoescaping (false) not working for you, then you may use the source function. Just output your file to a separate .html file and embed it via the source tag:
http://twig.sensiolabs.org/doc/functions/source.html
Thanks for this post:
How do I include raw HTML files in Symfony2/Twig templates?
Maybe you can try the "raw" tag. Not sure.
{% raw %}
your code here
{% endraw %}
Related
I want to make a subnav for my Grav Theme. I already saw a question on this topic:
GRAV subnavigation
{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
The problem I ran into is that with my code the pages get listed two times in the navigation and that's because of the a-tag in the dropdown div.
Is there a way that I can have the a-tag in the dropdown with all the information I wrote in my code? And that it only appears once in the navigation.
Thanks for your answers!
{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% else %}
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
This is the code I used instead of what I wrote in my question
I am not a programming expert so bear with me.
I have put up a shopify site with the template Icon-Christian. It comes with newsletter popup. The thing is that after signing up, the popup window doesn't close automatically. How can I edit the code?
{% if settings.popup %}
<script type="text/javascript">
if($(window).width() > 500){
// Fancybox Join our mailing list popup
$(document).ready(function(){
var check_cookie = $.cookie('mailing_list_delay_popup');
if(check_cookie == null){
$.cookie('mailing_list_delay_popup', 'expires_seven_days', { expires: 7 });
//fire your fancybox here
setTimeout(function(){
$.fancybox({
href: "#subscribe_popup"
});
}, 3000);
}
});
};
</script>
{% endif %}
<div style="display:none">
<div id="subscribe_popup" class="row">
{% if settings.email_popup_image %}
<div class="left fifty">
<img src="{{ 'popup-image.jpg' | asset_url }}">
</div>
{% endif %}
<div class="right fifty">
<h3>{{ 'layout.homepage.mailing_list_join' | t }}</h3>
<p>{{ 'layout.homepage.mailing_list_text' | t }}</p>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
<div id="mc_embed_signup">
<form action="{{ settings.mailchimp }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" required="" type="email">
<input value="{{ 'general.newsletter_form.submit' | t }}" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit">
</form>
</div>
</div>
<div class="clear"></div>
<ul id="footer-icons">
{% if settings.show_facebook %}<li><i class="icon-facebook icon-2x"></i></li>{% endif %}
{% if settings.show_twitter %}<li><i class="icon-twitter icon-2x"></i></li>{% endif %}
{% if settings.show_pinterest %}<li><i class="icon-pinterest icon-2x"></i></li>{% endif %}
{% if settings.show_tumblr %}<li><i class="icon-tumblr icon-2x"></i></li>{% endif %}
{% if settings.show_youtube %}<li><i class="icon-youtube icon-2x"></i></li>{% endif %}
{% if settings.show_googleplus %}<li><i class="icon-google-plus icon-2x"></i></li>{% endif %}
{% if settings.show_instagram %}<li><i class="icon-instagram icon-2x"></i></li>{% endif %}
</ul>
</div>
</div>
</div>
I added form to button (in left top in header) https://en.partizanstore.eu/
I checked form in page and it works, but when I added form to snippet and to button, it dont work, dont send letter.
Can anybody help?
And by the way, can I create form anywhere, except on pages?
{% capture contact_form %}
<div class="contact">
{% form 'contact', class: 'contact__form' %}
{% if form.posted_successfully? %}
<div class="alert alert--success">
<span class="alert-title">{{ 'contact.form.successfully_sent' | t }}</span>
</div>
{% endif %}
{% if form.errors %}
<div class="alert alert--error">
<span class="alert__title">{{ 'general.forms.errors' | t }}</span>
{% include 'form_errors' %}
</div>
{% endif %}
<div class="form__control">
<label class="form__label" for="contact__name">{{ [ 'contact.form.name' | t }}</label>
<input type="text" id="contact__name" name="contact[name]">
</div>
<div class="form__control">
<label class="form__label" for="contact__phone">{{ 'contact.form.phone' | t }}</label>
<input type="text" id="contact__phone" name="contact[phone]">
</div>
<input type="submit" class="button button--primary" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
{% endcapture %}
I have a form collection to add multiple "routes" on an editing page. For visual purposes I want this to be a horizontal list of inputs. So I've customized the collection_widget and it works great, it's integrated with jquery to add and delete records, etc. And very importantly I have headers above each column, with help text popups.
Problem
However, if the record does not have any routes yet, nothing shows up except the add button (i.e. the necessary headers are gone). And if I "add" a new route, it adds the prototype row, but it does NOT add the header titles. You'll see how I'm creating the <thead> below, and I simply do not understand enough about the variables available to know how to iterate through the available fields to get the names, even if there are no records yet.
Question
So how can I cycle through all the rows, and get the label for each input, so that I can create headers? Even if there is no data recorded yet.
Code
fields.html.twig
{% block collection_widget %}
{% spaceless %}
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
{% endif %}
{# We add the collection class to encapsulate the whole container #}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' collection')|trim}) %}
<div {{ block('widget_container_attributes') }}>
{{ form_errors(form) }}
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
{% set fieldNum = 1 %}
{% for rows in form %}
{# Only Loop through the headers once, regardless of how many rows there are. #}
{% if fieldNum == 1 %}
{% for row in rows %}
{# row.vars.label #}
<td class="heading{{ fieldNum }} heading_{{ row.vars.name }}">
<h4 class="collectionHeading">
{{ form_label(row) }}
</h4>
</td>
{% endfor %}
{% endif %}
{% set fieldNum = fieldNum + 1 %}
{% endfor %}
{# for delete row #}
<td class="heading{{ fieldNum }} heading_action"> </td>
</tr>
</thead>
<tbody>
{% for prototype in form %}
{{ block('collection_item_widget') }}
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="{{ fieldNum }}">
<div class="actionContainer">
<span class="action addCollection btn btn-primary btn-xs" title="Add"><span class="glyphicon glyphicon-plus"></span> Add</span>
</div>
</td>
</tr>
</tfoot>
</table>
{{ form_rest(form) }}
</div>
<div class="clear"></div>
{% endspaceless %}
{% endblock collection_widget %}
{% block collection_item_widget %}
{% spaceless %}
<tr class="collectionEntity">
{% set fieldNum = 1 %}
{% for row in prototype %}
<td class="field{{ fieldNum }} field_{{ row.vars.name }}">
{{ form_widget(row) }}
</td>
{% set fieldNum = fieldNum + 1 %}
{% endfor %}
<td class="field{{ fieldNum }} field_action">
<span class="action removeCollection btn btn-default glyphicon glyphicon-trash" title="Remove"></span>
</td>
</tr>
{% endspaceless %}
{% endblock collection_item_widget %}
Outputted HTML
<div id="contentSeoEditType_routing" data-prototype=" <tr class="collectionEntity"><td class="field1 field_furl"><div class="input-group"><span class="input-group-addon">/</span><input type="text"
id="contentSeoEditType_routing___name___furl" name="contentSeoEditType[routing][__name__][furl]" required="required" style="min-width: 200px" class="form-control inputType-text"
/></div></td><td class="field2 field_flagPrimary"><input type="radio"
id="contentSeoEditType_routing___name___flagPrimary" name="contentSeoEditType[routing][__name__][flagPrimary]" class="radioExclusive form-control inputType-checkbox" data-radioexclusive="routingFlagPrimary"
value="1" /></td><td class="field3 field_action"><span class="action removeCollection btn btn-default glyphicon glyphicon-trash" title="Remove"></span></td></tr>" class="collection">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<td class="heading1 heading_furl">
<h4 class="collectionHeading">
<label for="contentSeoEditType_routing_0_furl" class="required">Friendy URL</label><span class="required" title="This field is Required">*</span><span rel="popover" data-target=".popoverContent.help-contentSeoEditType_routing_0_furl" data-placement="right" class="popoverButton help-contentSeoEditType_routing_0_furl glyphicon glyphicon-question-sign" data-original-title="" title=""></span>
<div class="popoverContent help-contentSeoEditType_routing_0_furl"><em>Versioning:</em> Friendly URLs are <strong>not</strong> managed by the versioning system. Changes to the route will effect both the live and staging website. However, you can create extra aliases for testing and then change which is the primary route when you are ready to make them live.</div>
</h4>
</td>
<td class="heading1 heading_flagPrimary">
<h4 class="collectionHeading">
<span rel="popover" data-target=".popoverContent.help-contentSeoEditType_routing_0_flagPrimary" data-placement="right" class="popoverButton help-contentSeoEditType_routing_0_flagPrimary glyphicon glyphicon-question-sign" data-original-title="" title=""></span>
<div class="popoverContent help-contentSeoEditType_routing_0_flagPrimary"><em>Primary Route:</em> A page will have one primary Friendly URL. Additional aliases will redirect back to the primary URL.</div>
</h4>
</td>
<td class="heading3 heading_action"> </td>
</tr>
</thead>
<tbody>
<tr class="collectionEntity">
<td class="field1 field_furl">
<div class="input-group"><span class="input-group-addon">/</span><input type="text" id="contentSeoEditType_routing_0_furl" name="contentSeoEditType[routing][0][furl]" required="required" style="min-width: 200px" class="form-control inputType-text" value="Turkish-We-Love-You"></div>
</td>
<td class="field2 field_flagPrimary"><input type="radio" id="contentSeoEditType_routing_0_flagPrimary" name="contentSeoEditType[routing][0][flagPrimary]" class="radioExclusive form-control inputType-checkbox" data-radioexclusive="routingFlagPrimary" value="1" checked="checked"></td>
<td class="field3 field_action"><span class="action removeCollection btn btn-default glyphicon glyphicon-trash" title="Remove"></span></td>
</tr>
<tr class="collectionEntity">
<td class="field1 field_furl">
<div class="input-group"><span class="input-group-addon">/</span><input type="text" id="contentSeoEditType_routing_1_furl" name="contentSeoEditType[routing][1][furl]" required="required" style="min-width: 200px" class="form-control inputType-text" value="A-Dog-Named-Turkish"></div>
</td>
<td class="field2 field_flagPrimary"><input type="radio" id="contentSeoEditType_routing_1_flagPrimary" name="contentSeoEditType[routing][1][flagPrimary]" class="radioExclusive form-control inputType-checkbox" data-radioexclusive="routingFlagPrimary" value="1"></td>
<td class="field3 field_action"><span class="action removeCollection btn btn-default glyphicon glyphicon-trash" title="Remove"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="actionContainer"><span class="action addCollection btn btn-primary btn-xs" title="Add"><span class="glyphicon glyphicon-plus"></span> Add</span></div>
</td>
</tr>
</tfoot>
</table>
</div>
Ongoing Dilemma
This gets back to an overall frustration about the ongoing inability to do anything beyond the basics in the form template customizations. I can see what fields are available in any given context through documentation and iterating through the _context:
<ol>
{% for key, value in _context %}
<li>{{ key }} :
{% if value is not iterable%}
{{ value }}
{% else %}
{# WARNING! This causes the page to go blank white with no error. #}
{{ dump(value) }}
{% endif %}
</li>
{% endfor %}
</ol>
But this is a manual hack and does very little good because if the element is an object (which is when you really want to know), you can't dump it's value (it breaks the page, blank white with no error, which is another rabbit hole I got lost in for a day). And if I create nested for loops, they still don't print out much useful value information.
And just because the variable exists, it is sometimes empty in some block contexts and not others. And I have no idea how these blocks relate to one another or how the variables pass around between themselves, e.g.
{% block form_label %}
{{ parent() }}
{% if required is not empty %}
<span class="required" title="This field is Required">*</span>
{% endif %}
{{ block('form_help') }}
{% endblock %}
{# Custom Block for Help #}
{% block form_help %}
{% if help is not null %}
<span rel="popover" data-target=".popoverContent.help-{{ id }}" data-placement="right" class="popoverButton help-{{ id }} glyphicon glyphicon-question-sign"></span>
<div class="popoverContent help-{{ id }}">{{ help | raw }}</div>
{% endif %}
{% endblock %}
In some contexts I can call {{ block('form_help) }} and it works, but in others (e.g. from the {% block collection_widget %} it doesn't. I can print out _context in the {% block form_help %} and it will show a help variable, but it's empty. Why?
Variables Reference
There is documentation that explains how to access any public variable for a field called myFieldName by referencing the vars field, i.e. form.myFieldName.vars.publicVariable
<label for="{{ form.name.vars.id }}"
class="{{ form.name.vars.required ? 'required' : '' }}">
{{ form.name.vars.label }}
</label>
Additional variables are available for different field types, e.g. the collection Type has a prototype variable which contains a template of what the collection will look like.
{# this probably only works in your own template #}
{{ form_row(form.emails.vars.prototype) }}
{# this appears to work in the fields.html.twig master block template #}
{{ form_row(prototype) }}
But that doesn't help me figure out how to access the field labels to add a header. I also don't understand how these blocks pass variables back and forth to each other, e.g.
Reference
Documentation on Form Variables
Full List of Form Variables
Environment Details:
Using Symfony 2.5
I want to make the download file list of the ui version sortable. The recommended method of creating a sortable list breaks when the template is rendered.
I have tried implementing the suggestion found here:
sortable images after upload - jQuery File Upload
but this only makes the whole group of files sortable (as a group).
Here is my template code:
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="label label-important">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload) { %}
<button class="button small radius success start">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="button small radius secondary cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
{% } %}
<p><label>Article ID: <input name="articleId[]" value="<?php echo $results['article']->id; ?>" required></label></p>
<p><label>File Name: <input name="fileName[]" value="{%=file.name%}" required></label></p>
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
<div class="template-download fade" ><ul id="sortable">
{% $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); %}
{% for (var i=0, file; file=o.files[i]; i++) { %}
{%
for (var j = 0; j < imageNames.length; j++) {
if ( imageNames[j] == file.name ) {
/*alert(imageNames[j]+'\n'+file.name);*/ %}
<li class="ui-state-default">
<p>i = {% print(i); %} </p>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
<p class="name">
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
</p>
{% if (file.error) { %}
<div><span class="label label-important">Error</span> {%=file.error%}</div>
{% } %}
<span class="size">{%=o.formatFileSize(file.size)%}</span>
<button class="button small radius alert delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
<input type="hidden" name="sortOrder" value="{% print(i); %}">
</li>
{%
}
}
%}
{% } %}</ul></div>
</script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( ".files" ).sortable({
revert: true
});
});