How can i translate the entire block in the parent template page.html.twig:
{# app/Resources/views/page.html.twig #}
{% extends '::bootstrap.html.twig' %}
{% block page %}
<div class="page-header">
<h1>{% block header %}{% endblock %}
<small>{% block small %}{% endblock %}</small></h1>
</div>
<div id="content" class="container-fluid">
{% block content %}{% endblock %}
</div>
{% endblock %}
... instead of calling trans in each child template?
{# src/AcmeHelloBundle/Resources/views/User/show.html.twig #}
{% extends '::page.html.twig' %}
{% block header %}{% trans %}Utente{% endtrans %}{% endblock %}
{% block small %}{% trans %}dettaglio{% endtrans %}{% endblock %}
{% block content %}{% endblock %}
I've tried surround {% block header %} with {% trans %} but it complains about trans that should be a simple string and not an expression.
Nevermind. Found it by myself using block directly:
{% block page %}
<div class="page-header">
<h1>{{ block('header')|trans }}
<small>{{ block('small')|trans }}</small></h1>
</div>
<div id="content" class="container-fluid">
{% block content %}{% endblock %}
</div>
{% endblock %}
I'm not going to delete the question since i can't find any similar...
Related
I am trying to reuse this old code to make some forms:
In a form.html.twig
<div class="row" style='margin-bottom: 5px'>
<div style='white-space:nowrap'>
<div class='col-xs-2'></div>
<div class='col-xs-3' style='border-bottom:1px solid black;padding-bottom: 14px'><div style='float:right'>{{ form_label(form.class.variable, 'Text on one column and text on another column', {'label_attr':{'style':'margin-top:5px'}})}}</div>
<div class='col-xs-3' style='border-bottom:1px solid black;padding-bottom: 5px'>{{ form_widget(form.class.variable, {'attr':{'style':'width:95px','placeholder':'RAW value'}})}}</div>
<div class='col-xs-3'></div>
</div>
I would like to have two columns before the form like on this picture:
Thank you for the hints!
You will need to customise your form_label block.
Have a look at the example here
EDIT:
Roughly, you're after something like this:
Your form theme (say, two_column_labels.html.twig):
{% extends 'form_div_layout.html.twig' %}
{% block form_row %}
<div class="row">
<div class="col-sm-6">
{{ form_label(form) }}
</div>
<div class="col-sm-3">
{{ form_errors(form) }}
</div>
<div class="col-sm-3">
{{ form_widget(form) }}
</div>
</div>
{% endblock form_row %}
{% block form_label %}
{% if label_attr.extra_label is defined %}
<div class="row">
<div class="col-sm-6">
{% set orig_label = label %}
{% set new_label_attr = [] %}
{% for key,value in label_attr %}
{% if key != 'extra_label' %}
{% set new_label_attr = new_label_attr|merge({(key): value}) %}
{% else %}
{% set label = value %}
{% endif %}
{% endfor %}
{% set label_attr = new_label_attr %}
{{ parent() }}
{% set label = orig_label %}
</div>
<div class="col-sm-6">
{{ parent() }}
</div>
</div>
{% else %}
{{ parent() }}
{% endif %}
{% endblock form_label %}
In your form field definition in your form class:
'label' => 'Second Label',
'label_attr' => array('extra_label' => 'First Label'),
In your form template:
{% form_theme form 'two_column_labels.html.twig' %}
I'd like to understand how I may use block tags inside a child template that is being included to another html file that is extending the base template.
In index.html, nav.html is being included, and in the nav.html I've included a block tag with a javascript for the menu, but it doesn't get passed to the base.html
base.html
<!DOCTYPE html>
<html>
<head>
{% block head%}{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block header %}{% endblock %}
{% block body %}{% endblock %}
{% block footer %}{% endblock %}
{% block javascript %}{% endblock %}
</body>
</html>
indexhtml
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="/css/home.css" />
{% endblock %}
{% block title %}Homepage{% endblock %}
{% block body %}
{% include "nav.html" %} //here I am including the nav.html
Nav is above here
{% endblock %}
{% block footer %}
This is the footer block
{% endblock %}
nav.html
<header>
<nav>
<ul>
<li>Homepage</li>
<li>User account</li>
</ul>
</nav>
</header>
{% block footer %}
<script src="/js/dropdownmenu.js"></script>
{% endblock %}
You could potentially include another twig-template that extends your template with the blocks:
https://twig.sensiolabs.org/doc/2.x/tags/include.html
In child templates you cannot have HTML outside block, you need to move HTML code in nav.html inside some block
I render same page in modal and self.
I wonder if there is some way to check for some condition and if condition is true not to include header and footer with use tag.
{% extends 'ProfileBundle::base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="..."/>
{% endblock %}
{% if modal is not defined %}
{% use 'ProfileBundle::navigation.html.twig' %}
{% use 'ProfileBundle::footer.html.twig' %}
{% endif %}
{% block main %}
{% endblock %}
To use the use tag in twig, you still need to call them if you want to render the blocks. So before rendering the blocks you can add your condition (twigfiddle)
page.twig
{% extends "base.twig" %}
{% block stylesheets %}
{{ parent() }}
<link rel="text/css" href="page.css" />
{% endblock %}
{% block content %}
{% if not modal is defined %}{{ block('navigation') }}{% endif %}
<h1>Content</h1>
{% if not modal is defined %}{{ block('footer') }}{% endif %}
{% endblock %}
base.twig
{% use "navigation.twig" %}
{% use "footer.twig" %}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="default.css" />
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
navigation.twig
{% block navigation %}
<nav id="main">
1
2
3
</nav>
{% endblock %}
footer.twig
{% block footer %}
<footer>
© {{ "now" | date('Y') }}
</footer>
{% endblock %}
I'm doing my best to learn Hubspot's HubL language and CSS but am stuck on creating a 2 column format for my blog (they only provide a 1 column format). I inserted their Blog Content module, then edited the "Listing Template" code to be more to my liking, as follows. In the blog settings page I set the number of posts per "listing page" to 10 but would like to make it wrap at 5.
I also applied this inline styling so that the first column takes up half the space, which is good, but can't figure out how to tell it to wrap posts 6-10 to another column. I am reading everything I can about how I can get this to work but nothing applies directly to my problem.
max-width: 50%; height: auto;
Caveat - I can edit the below and I can apply CSS styling but that's the extent of my knowledge. If I have to do something in Javascript, I can copy-paste into a file that applies to the site but that's about it.
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="{{ blog_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
{% endif %}
{% if blog_author.linkedin %}
{% endif %}
{% if blog_author.twitter %}
{% endif %}
{% if blog_author.google_plus %}
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}
{% for content in contents %}
<div class="post-item">
{% if not simple_list_page %}
{% if topic %}<h3>Posts about {{ page_meta.html_title|replace(' | ', '') }}</h3>{% endif %}
{% if content.topic_list %}
<p id="hubspot-topic_data"> >
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
{{ content.publish_date_localized }}
<div class="post-header">
<h2>{{ content.name }}</h2>
</div>
<div class="post-body clearfix">
<!--post summary-->
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
</a>
</div>
{% endif %}
{{ content.post_list_content|safe }}
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
</div>
{% else %}
<h2 class="post-listing-simple">{{ content.name }}</h2>
{% endif %}
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<div class="blog-pagination">
{% if last_page_num %}
<a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
{% endif %}
<a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
{% if next_page_num %}
<a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
You could reverse the loop and use modulus to split the posts into 2 columns
change your opening loop to:
<div class="span5">{% for content in contents|reverse %}
and then change the closing of the loop to:
{% if loop.index % 5 == 0 %}
</div><div class="span5">
{% endif %}
{% endfor %}
</div> <!-- close the span5 we opened -->
</div> <!-- close the parent loop container -->
I want to add Gregwar Bundle (captcha) to my project. I did all the steps shown here https://github.com/Gregwar/CaptchaBundle/blob/master/README.md
But, it is throwing "Variable "captcha_code" does not exist" exception. Is it smth wrong with the form theming part?
use tag form_theme
example:
index.html.twig - template with your form,
captcha.html.twig - template with your captcha
index.html.twig content:
{% form_theme form 'YourBundle::captcha.html.twig' %}
<form action="" method="post">
...
{{ form_widget(form.captcha) }}
...
</form>
captcha.html.twig content:
{% block captcha_widget %}
{% spaceless %}
<img src="{{ captcha_code }}" alt="" title="captcha" width="{{ captcha_width }}" height="{{ captcha_height }}" />
...
{{ form_widget(form, {'attr': { 'autocapitalize': 'off','autocorrect': 'off' }}) }}
...
{% endspaceless %}
{% endblock %}
Block captcha_widget has to be outside any other block, example:
{% block captcha_widget %}
{% set label = label|default('')|trim %}
{% if is_human %}
-
{% else %}
{% spaceless %}
<div class="image">
<img id="{{ image_id }}" src="{{ captcha_code }}" alt="" title="captcha" width="{{ captcha_width }}" height="{{ captcha_height }}" />
{% if reload %}
<script type="text/javascript">
function reload_{{ image_id }}() {
var img = document.getElementById('{{ image_id }}');
img.src = '{{ captcha_code }}?n=' + (new Date()).getTime();
}
</script>
<a class="captcha_reload" onclick="reload_{{ image_id }}(); return false;" href="#">{{ 'Renew'|trans({}, 'gregwar_captcha') }}</a>
{% endif %}
</div>
<div class="">{{ label }}{{ label ? '* :': ''}}{{ form_widget(form) }}</div>
{% endspaceless %}
{% endif %}
{% endblock captcha_widget %}
{% form_theme form2 _self %}
{% block content %}
...
{% endblock %}