Twig `Variable does not exist` error despite it not being printed - symfony

I'm trying to handle non existing variables in my controller which if the database is empty will return a view without any variables:
if(!$votes->findOneById(1) || !$images->findOneById(1)){
return $this->render('admin/stats_and_images.html.twig');
}
return $this->render('admin/stats_and_images.html.twig', [
'images' => $images->countVotesForAllImages(),
'image_podium' => $images->getTopNImages(3),
'form' => $form->createView(),
'votesToday' => $votes->votesToday(),
'votesMonth' => $votes->votesMonth(),
'votesTotal' => $votes->votesTotal()
]);
And in my view I'm trying to handle the lack of variables like so:
{% if (votesTotal[0][1] is defined) and (votesToday[0][1] is defined) and (votesMonth[0][1] is defined) %}
<div class="col-md-6">
<h4 class="sub-section--header">Liczba Oddanych Głosów:</h4>
<hr>
<p>
<div class="col-sm-6">
Dzisiaj:
<span class="text-info large-num">{{ votesToday[0][1] }}</span>
</div>
<div class="col-sm-6">
Ten miesiąc:
<span class="text-info large-num">{{ votesMonth[0][1] }}</span>
</div>
</p>
<p>
<strong>Głosów ogółem: </strong><span class="text-info large-num">{{ votesTotal[0][1] }}</span>
</p>
</div>
<div class="col-md-6">
<h4 class="sub-section--header">Wygrywające zdjęcia:</h4>
<p class="text-muted">Ten miesiąc</p>
<hr>
<div class="row text-center">
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[0][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[0][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[0][0].title}}"
class="site-thumbnail"
title="{{image_podium[0][0].title}} - {{image_podium[0][0].author}}">
</a>
<p><strong>Głosów: {{image_podium[0]['votes']}}</strong></p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[1][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[1][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[1][0].title}}"
class="site-thumbnail"
title="{{image_podium[1][0].title}} - {{image_podium[1][0].author}}">
</a>
<p>Głosów: {{image_podium[1]['votes']}}</p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[2][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[2][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[2][0].title}}"
class="site-thumbnail"
title="{{image_podium[2][0].title}} - {{image_podium[2][0].author}}">
</a>
<p>Głosów: {{image_podium[2]['votes']}}</p>
</div>
</div>
</div>
{% else %}
<h2 class="text-danger text-center">
No votes at the moment :)
</h2>
{% endif %}
But still despite the strict requirement of all three fields to be defined I'm getting this:
Variable "votesToday" does not exist.
And pointing to the <span class="text-info large-num">{{ votesToday[0][1] }}</span> portion of the view.
Why would this be happening? How can it be avoided?

send $votes to twig and check it with {{ dump(votes) }}
If it is a doctrine entity, check your getter. Perhaps is $votes->getVotesToday()

Related

Styling Images from a chunk using css

I would like to displays images s in the image bellow
I do know that I can use laravel chunk() helper function to achieve this which is what I have done but as bellow
#foreach ($images->chunk(4) as $key=>$image)
<div class="row">
#foreach ($image as $item)
#if ($key===0)
<div class="col-md-3">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#else
<div class="col-md-4">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#endif
#endforeach
</div>
#endforeach
this gives me the following result
From what you can see the rows not stopping at two and staking the remaining images as in the expected image. What could I be doing wrong or how could I do. The images could be as many as 200 and here I am just working with 12

Can't space correctly using bootstrap

I'm trying to make responsive blog post. Everything works fine, but I don't like the way it looks. I would like to have a solution when my blog post with image itself would be centered. On desktop version it is less visible, but on mobile device it looks ugly... I'm currently using bootstrap 4, but if you got solutions with css, I also would be really happy!
I need something like on the image:
Desktop version
Mobile version
Here is my html + bootstrap model:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
And some code from base.html block:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Sidebar</h3>
<p class='text-muted'>Explore smth new today!
<ul class="list-group article-metadata">
<li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
<li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
Finally, I solved this solution like this:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.slug %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.slug %}">Delete</a>
</div>
{% endif %}
</div>
</article>
<article class="media content-section">
<div class="media-body">
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}

Grid and cards issues with Bootstrap

I almost finish a very important part in my Django project by creating panels which contains some cards. I'm using Bootstrap 3 (BS3) and I integrated cards from BS4 to BS3.
I'm getting an issue and I would like to get your mind because the behaviour is a little bit weird.
My issue :
As you can see in the animated picture below, there is an offset when I open dropdown from Publication n°1 and Publication n°2. It creates an offset with cards from the second row.
[![enter image description here][1]][1]
My question is : How I can rewrite bootstrap part in my code in order to make a normal behaviour ?
What I would like to get for each card:
This is what I would like for each card : open the card > make an offset to the entire row below
[![enter image description here][2]][2]
What I have and I don't want as behaviour :
And don't have a behaviour like that :
[![enter image description here][3]][3]
My code :
This is my entire code :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
{% for item in category.publication.all %}
{% if item.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
{% endfor %}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }} - {{ element.pub_id }}
{% if element.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-1">
<input type="checkbox" class="fakeRadio" name="DocumentChoice"
value="{{ item.code }}">
</td>
<td class="col-md-5 document-title">{{ item.title }}</td>
<td class="col-md-1 document-language"> {{ item.language }}</td>
<td class="col-md-1">
{% if item.format == 'pdf' %}
<img src="{% static 'app/img/pdf-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
{% if item.format == 'epub' %}
<img src="{% static 'app/img/epub-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
</td>
<td class="col-md-1 document-flag">
{% if item.publication.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% else %}
<span></span>
{% endif %}
</td>
<td class="col-md-1 document-cover">
{% if item.publication.cover %}
<a href="{{ item.publication.cover.url }}">
<img class="popup_image"
style="width:20px; height:20px; border-radius:2px;"
id="myImg_{{ item.id }}" src="{{ item.publication.cover.url }}">
</a>
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
And this is a simplified version from my previous code in order to try some things :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }}</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-5 document-title">{{ item.title }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I don't know if you need my css part, but I think the issue is maybe due to my bootstrap grid ?
Thank you !
That looks like a clearfix issue. Can you try adding this to your css:
.panel.panel-default.subpanel > .row > .col-md-4:nth-child(3n+1) {
clear: both;
}
Depending on your other code it might need some more variations for different screen sizes.

Unable to render the form because the block names array contains duplicates

i'm using Symfony 3.3.9 and when I'm trying to render a form I have the following error:
An exception has been thrown during the rendering of a template
("Unable to render the form because the block names array contains
duplicates: "_fos_user_registration_form_errors", "user_errors",
"user_errors", "fos_user_registration_errors", "form_errors".").
Thank you in advance for your help !
EDIT 17/09/2017
Here you go:
public function indexAction()
{
/** #var $formFactory FactoryInterface */
$formFactory = $this->get('fos_user.registration.form.factory');
$form = $formFactory->createForm();
return $this->render('AppTMMainBundle:Default:index.html.twig', array(
'form' => $form->createView(),
));
}
My Twig:
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register')}) }}
<div class="card-content">
<h3 class="text-center title" style="color: #3C4858;margin:10px 0;">Inscription</h3>
<div class="social text-center">
<a class="btn btn-just-icon btn-round btn-facebook" href="{{ path('hwi_oauth_service_redirect',{'service': 'facebook'}) }}">
<i class="fa fa-facebook"> </i>
</a>
<a class="btn btn-just-icon btn-round btn-twitter" href="{{ path('hwi_oauth_service_redirect',{'service': 'twitter'}) }}">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-just-icon btn-round btn-google" href="{{ path('hwi_oauth_service_redirect',{'service': 'google'}) }}">
<i class="fa fa-google-plus"></i>
</a>
</div>
<p class="description text-center">Ou de façon plus classique</p>
<div class="row">
<div class="col-xs-6">
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
<div class="col-xs-6">
{{ form_label(form.lastname) }}
{{ form_widget(form.lastname) }}
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
</div>
</div>
<div class="row">
<div class="col-xs-6">
{{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control', 'placeholder': 'form.password'}}) }}
</div>
<div class="col-xs-6">
{{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control', 'placeholder': 'form.password_confirmation'}}) }}
</div>
</div>
<!-- If you want to add a checkbox to this form, uncomment this code -->
<div class="input-group">
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" checked="">
{{ 'index.proceed.agree'|trans }} {{ 'index.proceed.cgu'|trans }}.
</label>
</div>
</div>
<div class="footer text-center">
<input type="submit" class="btn btn-primary btn-round" value="{{ 'index.action.subscribe'|trans }}">
</div>
</div>
{{ form_end(form) }}
for anyone having such an exception:
You probably shouldn't extend a form type, but instead create your own and use getParent to inherit the behaviour.
And if your class name is the same as an other type (excluding namespaces)
you must override the getBlockPrefix from AbstractType.
The getBlockPrefix method from AbstractType uses the last part of fqcn (the class name) and you could have a duplicate block name.
I found the answer to my question.
That was from my RegistrationType class where I was trying to extends with another Type Class. getParent not working as well expected...
RegistrationType > UserType > FOS\UserBundle\Form\Type\RegistrationFormType
I move all fields from UserType in RegistrationType and it's working :)

twig nested loop getting more elements

I have a nested loop in twig and i get the elements doubled in the form of 1,1,1,1 / 2,2,2,2 / 3,3,3,3. How can i use the first loop to access the data from the second loop without duplicating the elements ?
{% for form in forms %}
{% for question in surveyQuestions %}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(form) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ question.id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ question.id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}
{% endfor %}
Assuming my assessment above is correct: Why not do it like this?
Instead of using a foreach loop, we use a classical for loop and use the index as identifier for both, forms and surveyQuestions:
{% for i in 0..(forms|length - 1)%}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(forms[i]) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}

Resources