What i Need :
* All div should be of Equal Height and width.
problem im facing
* is some data some div are bigger then another div.
Here is Snapshot Url:
http://postimg.org/image/bxelzcb09/.
Api:
{
data: [
{
id: 42166,
Company_Website: "http://www.amphenol-highspeed.com/",
company_name: "Amphenol High Speed Interconnect",
city_name: "New York",
country_name: "USA",
comp_img: null,
Product_Name: null
},
{
id: 42167,
Company_Website: "http://www.clearfieldconnection.com/",
company_name: "Clearfield, Inc.",
city_name: "Plymouth",
country_name: "USA",
comp_img: null,
Product_Name: null
},
}
code of twig :
{% for item in data.about.data%}
{%if ((loop.index-1)%2)=='0' %}
<div class="row half">
{% endif %}
<div class="6u">
<div class="box panel exhibitor">
<div class="row flush nbdr no-collapse">
<div class="10u name">
<h3>{{item.company_name }}</h3>
<p class="cnt">{{item.city_name }}
{% if item.Company_Website is defined and item.Company_Website is not empty%}
<i class="icon icon-external-link blue bld"></i></p>
{% endif %}
</div>
<div class="2u tar">
{% if item.comp_img is not empty %}
<img width="50" alt="" class="image round lazy" src="{{item.comp_img}}" }}>
{% endif %}
<br class="clear">
</div>
<p class="prod">
{% set foo = item.Product_Name|split(',') %}
{% for i in foo|slice(0, 5) %}
{{ i }} {% if loop.index > 1 %}
,{{ i }}
{% endif %}
{% endfor %}
</p>
</div>
<div class="row flush nbdr pdt">
<div class="12u connect">
<!--<p class="mr"><i class="icon icon-envelope"></i> Connect <span>Booth # 50</span></p>-->
</div>
</div>
</div>
</div>
{%if ((loop.index)%2) == '0' %}
</div>
{% elseif (loop.last) %2 !='0'%}
</div>
{% endif %}
{% endfor %}
{% if data.about.data|length < '30' and request.ajax =='0' %}
{% elseif data.about.data|length < '30' %}
<div class="12u" id="12">
</div>
{% endif %}
i just want size of each div should be equivalent of each .
cases a.) consider 4 div as shown in image
if first div is enrich with data and second infront of enrich div is null with no data.
if first div is enrich with null data and other with big amount of data .
please tell how to resolve this issue , problem is in css or i could solve this issue through coding.
i need all div with or without enrichment of data should be of same size.
i tried to remove spaces i follow link:http://twig.sensiolabs.org/doc/tags/spaceless.html.
any valuable idea are most welcome ?
Maybe you should use CSS as said by DarkBee, or you could use the JS equalizer system of Foundation working fine.
http://foundation.zurb.com/docs/components/equalizer.html
Related
im trying to get bullet points on all listed items on that tab (collapsible content) on dawn theme with shopify. But i managed to get that just on first item, you can check here with preview url: https://1524t2hmp2urghsm-53196980409.shopifypreview.com
and here is part of code reference this issue:
{%- when 'collapsible_tab' -%}
<div class="product__acordion_container">
<div class="product__accordion accordion" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">
{{ block.settings.heading | default: block.settings.page.title }}
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<ul>
<li id="ProductAccordion-{{ block.id }}-{{ section.id }}">{{ block.settings.content }}</li>
{{ block.settings.page.content }}
</ul>
</details>
</div>
</div>
https://ed.codes/blogs/tutorials/add-a-youtube-video-inside-collapsible-row-block-accordion-on-shopify-product-page use this vid to add the element to the block
then add a container in the liquid
<p>
{% if product.metafields.custom.METAFIELDNAME %}
<div class="product-features__features Container">
{{product.metafields.custom.METAFIELDNAME}}
</div>
{% endif %}
</p>
and then link to the HTML formatted list as a multi-line text meta field.
I am new to Drupal, and I'm creating a custom theme based on a Bootstrap Bario subtheme on Drupal 8.
I can update the CSS with no problem, but I first need to clear the cache before reloading the page (which gets annoying, is there a way to avoid that?).
This is how the theme's regions are arranged:
I added the help: 'Help' region in the .info.yml file, under the line footer_fifth: 'Footer Fifth', and the added Help region appears in the Block Layout page.
I then modified the relevant parts of templates/_page.html.twig like so:
From this
{% block footer %}
<div class="{{ container }}">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
</div>
{% endif %}
{% if page.footer_fifth %}
<div class="site-footer__bottom">
{{ page.footer_fifth }}
</div>
{% endif %}
</div>
{% endblock %}
to this
{% block footer %}
<div class="{{ container }}">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth or page.footer_fifth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
{{ page.footer_fifth }}
</div>
{% endif %}
{% if page.help %}
<div class="site-footer__bottom">
{{ page.help }}
</div>
{% endif %}
</div>
{% endblock %}
As you can see, I added or page.footer_fifth to the first if statement, moved {{ page.footer_fifth }} to the site-footer__top div, and added {{ page.help }} in its place.
After that, I go and clear the cache, but the block regions are still the same. If I inspect my block in the Footer Fifth region, it is still in the <div class="site-footer__bottom">.
Did I miss something?
Thank you in advance.
I think the template file name is wrong. See:
templates/_page.html.twig usually should be:
templates/page.html.twig
the complete path of your template should be "/themes/custom/yourthemename/".
PS: theme debug will help you in case of any doubt.
https://www.drupal.org/docs/theming-drupal/twig-in-drupal/debugging-twig-templates
I'm not familiar with timber at all, but am helping a friend finish up a project that was built with it. So any help would go a long way please!
I have only the first two tiers showing up. Is there a way to call on the child of a child?
I'm using the code here, and added to it another tier under child https://timber.github.io/docs/guides/menus/
{% if menu %}
<div class="header-menu-items">
<div class="header-menu-item mod-title">
<a href="{{ site.url }}" class="" rel="home">
<div class="header-item-logo">
<div class="sitelogo">{{ site.name }}</div>
</div>
</a>
</div>
{% for item in menu.get_items() %}
<div class="header-menu-item {{ item.current ? 'is-active' : '' }}">
<div class="header-menu-item-link">
<a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
</div>
<div class="header-menu-item-triangle"></div>
<div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">
{% if item.master_object.thumbnail %}
<div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
{% else %}
<div class="mega-image">
{% endif %}
{{ item.title }}
</div>
<div class="mega-items">
{% for child in item.children %}
<div class="mega-item">
<a target="{{ child.target }}" href="{{ child.link }}">
<span class="mega-item-title">{{ child.title }}<br /></span>
<span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
</a>
</div>
{% for child in child.children %}
Just testing to see if it'll even show up first before applying style<br />
{{ child.title }}<br />
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
You can access menus several layers deep by nesting for loops inside of one another. Here is a code snippet that I have tested and works.
{% for item in menu__main.items %} {# This is the top level #}
<p>{{ item }}</p>
{% if item.children %}
{% for child in item.children %} {# 2nd Level #}
<p><em>{{ child }}</em></p>
{% if child.children %}
{% for third in child.children %} {# 3rd Level #}
<p><strong>{{ third }}</strong></p>
{% endfor %} {# for third in child.children #}
{% endif %} {# if child.children #}
{% endfor %} {# for child in item.children #}
{% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}
I have added comments to the end of the lines to hopefully make this more clear. So at the top, you are looping through item in menu__main.items
Then to get the children inside of these, you loop through item.children since item is the variable that represents each nav item at the top/main level. You loop through item.children to get to the next level or the children inside of the main/top level.
Then to get inside of the third level, you loop through child.children since child is the variable that represents the 2nd level. We want to loop through the children of this 2nd level. so we do third in child.children. third is the variable that represents the items 3 levels down.
I hope you can see the pattern here and you can continue this even further if you have items at even deeper levels, although at some point it will probably get ridiculous. Like if you have items nested 5 or 6 levels deep.
Let me know if that makes sense and if not I will be more than happy to try and explain it another way if you still have questions.
Cheers
I want to use an if statement in my twig for cycle - if object(variable) contains one element(row) - then add this html code snippet,
And here's what I'm trying,
{% for course in courses %}
<a href="{{ course.courseLink }}"class="courses">
<div class="picture"><img src="{{ asset('/bundles/dproc/assets/images/courses- example.jpg') }}" alt="news-1" title="news-1" /></div>
<div class="title"><h2>{{ course.courseTitle }}</h2></div>
<div class="info">
{{ course.courseContent }}
</div>
</a>
{% endfor %}
at the moment courses contains only one element. My task is to add a div element if it contains only one element.
How can I do that in twig?
You can use this function to check the length of an array
{% if courses|length == 1 %}
{# print div#}
{% endif %}
I have such hierarchy of twig files
my main (for controller) twig
{% extends "MainSiteBundle::layout.html.twig" %}
{% block footer_moderator_buttons %}
some buttons
{% endblock %}
{% block content_body %}
<p>hello moderator</p>
{{ include ('MainBlogBundle:_parts:postList.html.twig', {'postList': aPostDraft}) }}
{% endblock %}
postList.html.twig
<div class="post-list">
{% for postSingle in postList %}
{{ include ('MainBlogBundle:_parts:postSingle.html.twig', {'postSingle': postSingle}) }}
{% endfor %}
</div>
postSingle.html.twig
<div class="post">
<div class="post-header">
<a class="title" href="3">{{ postSingle.title }}</a>
</div>
<div class="post-meta">
<div>Date: {{ postSingle.date|date('D M Y') }}</div>
<div>Category: {{ postSingle.getCategory.getTitle }}</div>
<div>Author: {{ postSingle.getUser.username }}
</div>
</div>
<div class="post-body">
<div class="content">
<img width="450" height="200" src="#">
<div class="text">{{ postSingle.content }}</div>
</div>
</div>
<div class="post-footer">
{% block footer_moderator_buttons %}f{% endblock %}
<div>Views: 152</div>
<div>Comments: 1231</div>
<div>
<a class="link" href="#">More... </a>
</div>
</div>
</div>
As you can see last (postSingle.html.twig) has block "footer_moderator_buttons", so how can i change it from main twig (first one) ? Current is not working, what I need change \ do ?
In Twig 1.8 there is embed tag (http://twig.sensiolabs.org/doc/tags/embed.html).
You would have to remove the postList.html.twig file or work around it.
{% embed "MainBlogBundle:_parts:postSingle.html.twig" with {'postSingle': postSingle} %}
{% block footer_moderator_buttons %}
custom buttons here
{% endblock %}
{% endembed %}
So, you question is actually "I want to understand how\what twig can". Well, the answer to that question is: "It can't overwrite blocks from "main" to the smaller ones."
If you want to use twig, you have to stop thinking in php include() way where you make new files and you "PUT" components in them over and over again, components such as header, footer, menu etc.
In twig, you define main twig file with blocks which can be imagined as empty spaces which can, but do not have to, be overwritten. Surely, it still means you can have postList.html.twig as include in some file that extends MainSiteBundle::layout.html.twig. The same goes for postSingle.html.twig.
I think you catch the logic of twig except don't try to overwrite blocks from the wrong side - in this case, from MainSiteBundle::layout.html.twig to it's smaller portions.
how about this:
{% extends "MainSiteBundle::layout.html.twig" %}
....
{% block footer_moderator_buttons %}
{{ parent() }}
{% endblock %}
woops didnt put parent..
the {{ parent() }} will inherit {% block footer_moderator_buttons %}{% endblock %} from extended twig.