Using assemble-swig, here is my template:
<!doctype html><html lang="it">
<head>
{% include "src/templates/partials/html_header.swig" %}
</head>
<body>
{% include "src/templates/partials/body_header.swig" %}
<header class="articleHeader intro"><div class="inner">
{% block articleheader %}{% endblock %}
</div></header>
<div class="body"><div class="inner">
<article class="main{% if nosidebar %} noSideBarArticle{% endif %}">
{% block content %}{% endblock %}
</article>
{% block sidebar %}{% endblock %}
</div></div>
{% include "src/templates/partials/body_footer.swig" %}
{% block javascript %}{% endblock %}
</body>
</html>
Here is my page:
---
title: "test"
---
{% block articleheader %}
<h1>Article Header!</h1>
{% endblock %}
{% block content %}
<p>this is the content!</p>
{% endblock %}
The result: No data from the page is show
(content of html_header and body_header goes here...)
<header class="articleHeader intro"><div class="inner">
</div></header>
<div class="body"><div class="inner">
<article class="main">
</article>
(content of html_header and body_footer goes here...)
Only if I use the tag {{body}} in the template all the content of the page is inserted but with no respect for the block tag.
Yes, it seems to be possible if you don't use the layout of Assemble.
I get it to work setting the layout property to false in the config:
assemble: {
options: {
engine: 'swig',
...
layout: false,
...
and then in each file adding:
{% extends 'src/layouts/default.swig' %}
at the top of the content.
Related
Using Symfony3 && PhpStorm.2016.3.2 on Ubuntu 16.04
I have a form made in Twig, here is the section that interest me:
<div class="row">
<div class="input-field col s12 validate" id="icon_telephone" type="tel">
{{ form_errors(form) }}
{% if form.vars.errors|length %}
{ form_row(
form.authorPhone,
form.authorPhone.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.authorPhone) }}
{% endif %}
</div>
</div>
I would like to "colorize" the error in Red as an example, without actually using customize form rendering of Symfony which force me to create a view etc..
So I wanted to know if there is a way to actually just turn the error red without industrializing the process.
Making something red is styling so you should be doing that via CSS.
Add a css file to your form template and you can customize the rendering of your form errors like so:
{% block form_errors %}
{% spaceless %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
<li class="error-message">{{ error.message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
And css
.error-message{
color: red;
}
Symfony doc article: https://symfony.com/doc/current/form/form_customization.html#customizing-error-output
Your final twig template would look like this:
<div class="row">
<div class="input-field col s12 validate" id="icon_telephone" type="tel">
{{ form_errors(form) }}
{% if form.vars.errors|length %}
{ form_row(
form.authorPhone,
form.authorPhone.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.authorPhone) }}
{% endif %}
</div>
</div>
<link rel="stylesheet" href="{{ asset('bundles/mybundle/css/style.css') }}" />
{% block form_errors %}
{% spaceless %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
<li class="error-message">{{ error.message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
You override the form_errors block wich is what symfony will use when you call {{ form_errors(form) }}.
If you wan't the simplest solution just inspect you errors in the browser find the right selector and apply css without customizing the form rendering in twig.
For the stylesheet, create the file under Resources/public/css then execute app/console assets:install
Here is an example of HTML code with some Django template tags:
{% extends "blog/base.html" %}
{% block title %}
Title
{% endblock %}
{% block content %}
<h1>Header</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body }}
{% endfor %}
{% include "pagination.html" with page=posts %}
{% endblock %}
I want it to look like this. But VS Code reformats it to this view:
{% extends "blog/base.html" %} {% block title %} Title {% endblock %} {% block content %}
<h1>Header</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body }} {% endfor %} {% include "pagination.html" with page=posts %} {% endblock %}
What should I do to prevent this ugly reformatting?
i'm a beginner into Symfony2 and i hope that the community could help me and another peoples with this problem.
I have 2 forms sent to the views, that i render these 2 into 2 differents blocks (main-col and left-col), in fact main-col contains user profile form and left-col contains form to upload the profile picture .. This way the profile picture won't appear
But when the profile picture is into the main-col (body block), it works ...
There is some examples for better understand :
This example will NOT work :
{% extends 'FOOBAR\QuoteMachineBundle::base.html.twig' %}
{% block menu -%}
{% include 'FOOBAR\QuoteMachineBundle::CompanyProfile/menu.html.twig' %}
{% endblock %}
{% block title -%}Edit company{% endblock %}
{% block leftcol -%}
<h3>Company Logo</h3>
{{ form(picture_form) }}
Current Picture :<br/>
<img class="opttool" src="{{ entity.pictureWebPath }}" alt="" />
{% endblock %}
{% block body -%}
{{ form(form) }}
{% endblock %}
But this one WILL
{% extends 'FOOBAR\QuoteMachineBundle::base.html.twig' %}
{% block menu -%}
{% include 'FOOBAR\QuoteMachineBundle::CompanyProfile/menu.html.twig' %}
{% endblock %}
{% block title -%}Edit company{% endblock %}
{% block leftcol -%}
{% endblock %}
{% block body -%}
{{ form(form) }}
<h3>Company Logo</h3>
{{ form(picture_form) }}
Current Picture :<br/>
<img class="opttool" src="{{ entity.pictureWebPath }}" alt="" />
{% endblock %}
I switched the "current picture form" from leftcol to body ... In fact forms only works in body block.
I should precise that I can use normal variables into leftcol block and that will work.
The form in leftcol will be an "empty" form element with that only children element :
<input type="hidden" name="_method" value="PUT">
How I can render picture_form correctly into leftcol block ??
EDIT : Like you asked, i published sample of my base.html.twig
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="container">
{% if block('leftcol') is not empty %}
<div class="left-col">{% block leftcol %}{% endblock %}</div>
{% endif %}
<div class="col-main">
<h1>{{ block('title') }}</h1>
<article>
{% block body %}{% block fos_user_content %}{% endblock fos_user_content %}{% endblock %}
</article>
</div>
{% if block('rightcol') is not empty %}
<div class="right-col">{% block rightcol %}{% endblock %}</div>
{% endif %}
</div>
</body>
</html>
Thanks !
I am not 100% sure it will solve your problem but using the block method in a IF statement leads to a new request (meaning everything gets called twice). You should try this:
{% set _block = block('leftcol') %}
{% if _block is not empty %}
<div class='left-col'> {{ _block|raw }} </div>
{% endif %}
Instead of
{% if block('leftcol') is not empty %}
<div class="left-col">{% block leftcol %}{% endblock %}</div>
{% endif %}
And do keep in mind that you should put that kind of logic in your controllers whenever possible.
If I had to make an educated guess, I would say SF/twig are somehow confused by the rendering of two forms inside the same template/block simultaneously. I can't test these two leads right now, but here's what I would try if I were you :
Be more precise when calling your two forms in the twig view :
<form action="foo" method="post" etc...>
{{ form(form_picture) }}
{{ form_rest(form_picture) }}
{{ form_end(form_picture) }}
Symfony's form rendering is highly customizable, find all the details here if you haven't discovered them yet : How to Customize Form Rendering
Use a specific controller, or at least a separate template for at least one of your forms, ideally for each of your forms (but that's a personnal preference) :
{% block leftcol %}
{% render(controller('upload_picture') %}
// or
{% include('upload_picture_form.html.twig', with('form':'form_picture') %}
// Pardon my pseudo-code :P
{% endblock %}
{% block body %}
{{ form(form) }}
{% endblock %}
i'd like to add a bar called "related posts" at the bottom of each post and the criteria for posts to be related and to appear there should be that there is an amount of minimum 2 equal tags in both posts.
My approach so far:
{% for tag in page.tags %}
{% assign currentTag = tag | first %}
{% for post in site.posts | limit:3 %}
{% if post.tags contains currentTag | plus:1 %}
<div>
<a href="{{ post.url }}">
<img src="{{site.baseurl}}/asset/img/{{ post.img-thumb }}">
</a>
<h5> {{ post.title }}</h5>
</div>
{% endif %}
{% endfor %}
{% endfor %}
Thanks for your help!
This code does the trick :
<div class="relatedPosts">
<h3>Related post</h3>
{% comment %}---> the maximum number of related to posts
to be printed {% endcomment %}
{% assign maxRelated = 5 %}
{% comment %}---> the minimum number of common tags
to have for a post to be considered
as a related post {% endcomment %}
{% assign minCommonTags = 3 %}
{% assign maxRelatedCounter = 0 %}
{% for post in site.posts %}
{% assign sameTagCount = 0 %}
{% assign commonTags = '' %}
{% for tag in post.tags %}
{% comment %}---> Only compare if post is
not same as current page {% endcomment %}
{% if post.url != page.url %}
{% if page.tags contains tag %}
{% assign sameTagCount = sameTagCount | plus: 1 %}
{% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
{% assign commonTags = commonTags | append: tagmarkup %}
{% endif %}
{% endif %}
{% endfor %}
{% if sameTagCount >= minCommonTags %}
<div>
<h5>{{ post.title }}{{ commonTags }}</h5>
</div>
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
{% if maxRelatedCounter >= maxRelated %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
</div>
Edit : Added 'configuration' for maxRelated and minCommonTags, plus a test to avoid putting a post in is own related post list.
Using Symfony2.3.4 and Twig
I bet it's an easy peasy for anybody but I just can't get it done.
I'm trying to show only one error alert with always the same message, always at the beginnig of the form, everytime there are errors regardless which field contains the invalid input.
I thought I could do it like this:
//../Professor/Resources/new.html.twig
{% extends 'AdminBundle:Default:admin.html.twig' %}
{% block content -%}
<h1>New professor</h1>
{% if form_errors(form) is not null %} {#<------------------------------------#}
<div class="alert alert-error">
<i class="glyphicon-ban-circle"></i> Message.
</div>
{% endif %}
<div class="row-fluid">
<form id="prof_create" class="form-horizontal sf_admin_form_area" action="{{ path('professor_create') }}"
method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<div class="row-fluid">
<div class="span8"></div>
</div>
<div class="form-actions">
<button class="btn btn-primary">
<i class="icon-ok"></i> {{'Create' | trans}}</button>
<a class="btn" href="{{ path('professor') }}">
<i class="icon-ban-circle"></i> {{'Cancel' | trans }}</a>
</div>
</form>
</div>
{% endblock %}
{% if form_errors(form) is not null %} is not working, meaning:
when I show the create form for the first time before entering any data in the fields,the error alert shows although there is no data in the fields.
I also tried {% if form_errors(form) %} which is also useless but the other way around, it doesn't matter if there are or not errors, the alert just won't show.
There's obviously a lot about form_errors(form) that I don't know.
Appreciate any tips or even completely different solutions.
Thanks
Have you try this ?
{% if form_errors(form.content) is not empty %}
try:
{% if form_errors(form) != '' %}
...
{% endif %}
You will also need to make sure that the error_bubbling option on all of your fields is set to true. If you dont the error only exists on the child. So the main form wouldnt have any errors even though some of the children do.
To set the error bubbling you need to do it to each field:
//Some FormType that you have created
class CustomFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('test', 'text', array('error_bubbling'=>true);
}
}
Your other option is to override the form_errors block like suggested in the accepted answer here:
{% block form_errors %}
{% spaceless %}
{% set a = false %}
{% for child in form.children %}
{% if child.get("errors") %}
{% set a = 'true' %}
{% endif %}
{% endfor %}
{% if a == true %}
<div class="alert">
{% for children in form.children %}
{{ form_errors(children) }}
{% endfor %}
</div>
{% endif %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
{{
error.messagePluralization is null
? error.messageTemplate|trans(error.messageParameters, 'validators')
: error.messageTemplate|transchoice(error.messagePluralization, error.messageParameters, 'validators')
}}
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
try
{% if form.vars.errors|length %}
{% if not form.vars.valid %}
<div class="alert alert-error">
{{ form_errors(form) }}
</div>
{% endif %}
from https://stackoverflow.com/a/17826389/511514