Symfony 2 Gregwar captcha_code doesn't exist exception - symfony

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 %}

Related

Shopify - debut theme - how to change quantity and flavor variations from drop-down menu into buttons

We have a debut theme with a featured product section. The current size and flavor selector is a drop-down menue:
We would like to make the size and flavor variations become buttons, like this:
I am some HTML and CSS experience, but I am unfamiliar with Shopify's syntax.
I am not certain what code to edit. Below is our code directly form the "featured-products.liquid' file.
I have seen this answer but I am not sure exactly what to do here - when I try to replicate it I am unable to get the pull-downs to turn into buttons.
{%- assign product = all_products[section.settings.featured_product] -%}
{% if product == empty %}
{%- assign section_onboarding = true -%}
{% endif %}
<div class="page-width" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-ajax-enabled="{{ settings.enable_ajax }}">
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_thumb_size = '110x110' -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% case section.settings.media_size %}
{% when 'small' %}
{%- assign product_media_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_media_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_media_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_media_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign height = 1090 -%}
{%- assign enable_image_zoom = false -%}
{% endcase %}
<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
<div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
{% unless section_onboarding %}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% else %}
<div id="FeaturedImageZoom-{{ section.id }}" class="product-single__media">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endunless %}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
{% endif %}
</div>
<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta">
{% unless section_onboarding %}
{%- assign price = current_variant.price -%}
{%- assign available = current_variant.available -%}
{% else %}
{%- assign price = 1999 -%}
{%- assign available = true -%}
{% endunless %}
<h2 class="visually-hidden">{{ 'sections.featured_product.title' | t }}</h2>
<h3 class="h1 product-single__title">
{% unless product == empty %}
{{ product.title }}
{% else %}
{{ 'homepage.onboarding.product_title' | t }}
{% endunless %}
</h3>
<div>
<div class="featured-product__price">
{% include 'product-price', variant: current_variant, product: product, show_vendor: section.settings.show_vendor %}
</div>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-product-policies>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{% if section_onboarding %}
<div class="product-form">
<div class="product-form__item product-form__item--submit{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" disabled class="btn product-form__cart-submit" data-add-to-cart>
<span data-add-to-cart-text>
{{ 'products.product.sold_out' | t }}
</span>
</button>
</div>
</div>
{% else %}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless section_onboarding %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
</div>
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>
{% endunless %}
{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity"
data-quantity-input>
</div>
</div>
{% endif %}
<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>
<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
{% endif %}
</div>
{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>
{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}
<p class="visually-hidden" data-loader-status
aria-live="assertive"
role="alert"
aria-hidden="true"
>{{ 'products.product.loader_label' | t }}</p>
<div class="product-single__description rte">
{% unless product == empty %}
{{ product.description }}
{% else %}
{{ 'homepage.onboarding.product_description' | t }}
{% endunless %}
</div>
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"#type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"#type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>

Text columns in front of form using {{form_label()}}

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' %}

twig print field multiple image in field templates

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>

How to set up style for all tables in symfony 3 Bootstrap 3/4 twig

I want to have the same look for all tables and don't set it every time.
My view:
{% extends 'MyBundle::base.html.twig' %}
{% block pageTitle %}
Info Table {{ parent() }}
{% endblock %}
{% block pageContainer %}
<h1>My Info Table</h1>
<table class="table table-bordered table-striped table-hover">
<thead class="thead-inverse">
<tr>
<th>id</th>
<th>Name </th>
<th>parentid</th>
</tr>
</thead>
<tbody>
{% for entry in rows %}
<tr>
<td>{{ entry.id }}</td>
<td>{{ entry.productName }} ❏ {{ entry.sortName }}</td>
<td>{{ entry.parentId }}</td>
</tr>
{% else %}
<tr>
<td colspan="3">You don't have this!</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
The Bootstrap has defined in 'MyBundle::base.html.twig'
<!DOCTYPE html>
<html lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% spaceless %}{% block pageTitle %} - TEST {% endblock %}{% endspaceless %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/main.css') }}"/>
{% endblock %}
<link rel="shortcut icon" href="{{ asset('dtf-3.ico') }}"/>
</head>
<body>
{% block header %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<a class="btn btn-sm btn-primary" href="{{ path('MY_home') }}">TEST_menu</a>
<a class="btn btn-sm btn-info" href="{{ path('TEST_infoTable') }}">Info Table</a>
</div>
</div>
{% endblock %}
{% for flashMessage in app.session.flashBag.get('msg') %}
<div> {{ flashMessage }}</div>
{% endfor %}
{% block pageContainer %}{% endblock %}
{% block javascripts %}
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
{% endblock %}
</body>
I have configured the style for all forms and it works fine using Bootstarp 3/4.
For customization I've created form_theme.html.twig and setup in config.yml
# Twig Configuration
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
form_themes:
- 'MyBundle:Form:form_theme.html.twig'
- 'MyBundle:Form:table_theme.html.twig'
MyBundle:Form:form_theme.html.twig:
{%- block form_start -%}
{% spaceless %}
{% set method = method|upper %}
{%- if method in ["GET", "POST"] -%}
{% set form_method = method %}
{%- else -%}
{% set form_method = "POST" %}
{%- endif -%}
{% set attr = attr|merge({'class': (attr.class|default('form-horizontal'))|trim }) %}
<form
name="{{ name }}" method="{{ form_method|lower }}"{% if action != '' %} action="{{ action }}"{% endif %}{% for attrname, attrvalue in attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %}>
{%- if form_method != method -%}
<input type="hidden" name="_method" value="{{ method }}"/>
{%- endif -%}
{% endspaceless %}
{%- endblock form_start -%}
{% block form_row %}
{% spaceless %}
<div class="form-group row{{ errors|length > 0 ? ' has-error':'' }}">
{{ form_label(form) }}
<div class="col-10">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endspaceless %}
{% endblock form_row %}
{# Labels #}
{%- block form_label -%}
{% spaceless %}
{% if label is not same as(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' col-sm-2 col-form-label')|trim }) %}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}</label>
{%- endif -%}
{% endspaceless %}
{%- endblock form_label -%}
{# Widgets #}
{%- block form_widget_simple -%}
{% spaceless %}
{%- set type = type|default('text') -%}
{% if type != 'file' %}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' form-control')|trim }) %}
{% endif %}
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{%- endblock form_widget_simple -%}
{%- block textarea_widget -%}
{% spaceless %}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' form-control')|trim }) %}
<textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
{% endspaceless %}
{%- endblock textarea_widget -%}
{%- block choice_widget_collapsed -%}
{% spaceless %}
{%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
{% set required = false %}
{%- endif -%}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' form-control')|trim }) %}
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{%- if placeholder is not none -%}
<option value=""{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
{%- endif -%}
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<option disabled="disabled">{{ separator }}</option>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</select>
{% endspaceless %}
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_expanded -%}
{% spaceless %}
{%- for child in form %}
<div class="checkbox">
<label>
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
</label>
</div>
{% endfor -%}
{% endspaceless %}
{%- endblock choice_widget_expanded -%}
{% block form_errors %}
{% spaceless %}
{% for error in errors %}
<span class="help-block">{{ error.message }}</span>
{% endfor %}
{% endspaceless %}
{% endblock form_errors %}
{% block button_row %}
{% spaceless %}
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
{{ form_widget(form) }}
</div>
</div>
{% endspaceless %}
{% endblock button_row %}
{%- block button_widget -%}
{%- if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' btn')|trim }) %}
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}</button>
{%- endblock button_widget -%}
{% block submit_widget %}
{% spaceless %}
{% set type = type|default('submit') %}
{% set attr = attr|merge({'class': (attr.class|default('btn btn-primary'))|trim }) %}
{{ block('button_widget') }}
{% endspaceless %}
{% endblock submit_widget %}
I tray do it the same way for table, but in fields (vendor\symfony\symfony\src\Symfony\Bridge\Twig\Resources\views\Form):
bootstrap_3_horizontal_layout.html.twig
bootstrap_3_layout.html.twig
form_div_layout.html.twig
form_table_layout.html.twig
foundation_5_layout.html.twig
I don't find the tables tags for set up: thead, cellpadding.
How do I have the same layout for all tables in Symfony?
Why don't you create a new block in base.html.twig?
{℅ block pageContainer ℅}
<table class="table table-bordered table-striped table-hover">
{℅ block table ℅}{℅ endblock ℅}
</table>
{℅ endblock ℅}
Then, each time you want the same table style for your tables, but a different content obviously, just override the table block.
{℅ block table ℅}
<thead class="thead-inverse">...</thead>
<tbody>...</tbody>
{℅ endblock ℅}
Take a look at the table bundle at https://tablebundle.org ;)
I've found the the solution.
Crete the main.css file and I copy and change same line from bootstrap.css .
For example to decrease cellpadding form default (padding: 0.35rem;) I've added in main.css
.table th,
.table td {
padding: 0.35rem;
vertical-align: top;
border-top: 1px solid #eceeef;
}
and main.css must be put after bootstrap.css

Two (2) Column Blog Layout in HubSpot

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 -->

Resources