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' %}
Related
I tried to use the forloop.last template tag
<div class="panel-body">
{% for card in cardlist.card_set.all %}
{% if forloop.last %}
<div class="well" style="margin-bottom: 0px;">{{ card.title }}</div>
{% else %}
<div class="well" style="margin-bottom: 20px;">{{ card.title }}</div>
{% endif %}
{% endfor %}
</div>
How do I refactor the above source like the source below?
In the refactored source, "margin-bottom: {{margin-bottom}} px;" Error in "{{margin-bottom}}".
<div class="panel-body">
{% for card in cardlist.card_set.all %}
{% if forloop.last %}
margin-bottom = 0
{% else %}
margin-bottom = 20
{% endif %}
<div class="well" style="margin-bottom: {{ }}px;">{{ card.title }}</div>
{% endfor %}
</div>
you can try it:
<div class="panel-body">
{% for card in cardlist.card_set.all %}
<div class="well" style="margin-bottom:{% if forloop.last %}0px{% else %}20px{% endif %};">{{ card.title }}</div>
{% endfor %}
</div>
I want to use a looping functionality in region.html.twig file to I can
wrap elements that outputted from {{ content }} section.
Defult region.html.twig
{% if content %}
<div class="Parent">
{{ content }}
</div>
{% endif %}
The schematic generated Output:
<div class="Parent">
Item_1
Item_2
Item_3
</div>
I try to use below code to create a loop and add a wrapper around of each Item outputted from {{ content }}:
My code:
{% if content %}
<div class="Parent">
{% for item in items %}
<div class="child-wrapper">{{ item.content }}</div>
{% endfor %}
</div>
{% endif %}
The Final outpute that I want to achive:
<div class="Parent">
<div class="child-wrapper">Item_1</div>
<div class="child-wrapper">Item_2</div>
<div class="child-wrapper">Item_3</div>
</div>
If your data is: content = [1, 2, 3, ... , 100]
Then write
{% if content %}
<div class="Parent">
{% for item in content %}
<div class="child-wrapper">{{ item }}</div>
{% endfor %}
</div>
{% endif %}
If your data is array of assotiated arrays like this:
content = [
['content' => 1],
['content' => 2],
]
Then write
{% if content %}
<div class="Parent">
{% for item in content %}
<div class="child-wrapper">{{ item.content }}</div>
{% endfor %}
</div>
{% endif %}
Here, I have attached my code
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in items %}
<a class="gall-img" href="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}">
<img src="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>
How to change {{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }} dynamically change value of 0.
.0 is the same than [0]. You can use:
{{ file_url(element['#object'].field_multiple_image.[yourVar].entity.uri.value) }}
Here, I have fixed this,
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in element['#object'].field_multiple_image %}
<a class="gall-img" href="{{ file_url(item.entity.uri.value) }}">
<img src="{{ file_url(item.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>
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 -->
In Twig I require that each group of four results is wrapped inside a div.
This is the final html I want, each group of 4 items must be wrapped:
{% for item in items %}
<div class="wrapper">
{{ item }}
{{ item }}
{{ item }}
{{ item }}
</div>
<div class="wrapper">
{{ item }}
{{ item }}
{{ item }}
{{ item }}
</div>
{% endfor %}
Twig has a filter called batch that seems to do what each_slice does. In your case, here's what the code would look like:
{% for row in items|batch(4) %}
<div class="wrapper">
{% for item in row %}
{{ item }}
{% endfor %}
</div>
{% endfor %}
if you're using twig => 1.14.2, you can use divisible by
{% for item in items %}
{% if loop.index0 is divisible by(4) %}
<div class="wrapper">
{% endif %}
{{ item }}
{% if loop.index is divisibleby(4) or loop.last %}
</div>
{% endif %}
{% endfor %}
Try
{% for item in items %}
{% if loop.index0 % 4 == 0 %}<div class="wrapper">{% endif %}
{{ item }}
{% if loop.index % 4 == 0 %}</div>{% endif %}
{% endfor %}