I have the following responsive blog archives layout, which is suffering from alignment issues but I'm not sure which element to target to remedy the issue.
In the linked jsFiddle example, adjusting the width does produce a responsive layout, but the listing of blog posts does not flow in proper alignment.
The below code from the hyde static site generator seems to put redundant <p> tags in, which I'm not sure if it needs to be remedied there or if some CSS adjustments will suffice.
{% extends "base.j2" %}
{% from "macros.j2" import render_excerpt with context %}
{% block main %}
{% block page_title %}
<h1 class="title"></h1>
<div class="page-header">
<h1>{{ resource.meta.title }}</h1>
</div>
{% endblock %}
<div class="row-fluid">
{% for res in resource.node.walk_resources_sorted_by_time() %}
{% refer to res.url as post %}
<div class="span4">
<h2>{{ res.meta.title }}</h2>
{{ post.image|markdown|typogrify }}
{{ res.meta.excerpt|markdown|typogrify }}
<p><a class="btn" href="{{ content_url(res.url) }}">View details »</a></p>
</div><!--/span-->
{% endfor %}
</div><!--/row-->
{% endblock %}
If you want to build a grid is best that every 3 span4 you generate a new row-fluid below the other. For example:
<div class="row-fluid">
<div class="span12"> //These two row are our flexible container
/ GENERATE WITH YOUR CODE THIS STUCTURE UNDER EVERY 3 POST /
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
I use the php for doing it, but I think that is a small error of logical structuration of your html in the cycle!
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'm trying to pass a form along to a view but it wouldn't display and I get an error 500 (page loading is stopped and then, when I try to reach another page, it freezes)
I tried several tutorials including the official symfony documentation and I always get to that same point.
So please help me... (below is my code)
my controller
<?php
namespace siteBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use siteBundle\Form\ContactType;
use siteBundle\Entity\Contact;
class SiteController extends Controller
{
public function navigationAction(string $page,Request $request)
{
$option=array();
if ($page=='contact')
{
$donnees=new Contact();
$form=$this->createForm(ContactType::class,$donnees);
$option['contact']=$form->createView();
}
return $this->render('siteBundle:Pages:'.$page.'.html.twig',$option);
}
}
?>
my view
{% extends 'general.html.twig' %}
{% block description %}blabla{% endblock %}
{% block title %}blabla{% endblock %}
{% block body %}
<div class="container">
<h1>Prendre Contact </h1>
<p class="text-justify">
<br>blabla
</p>
<br>
<div class="row text-center">
<div class="col-md-6">
<p>
<img src="{{ asset('bundles/site/img/telephone.png') }}" alt="téléphone"><br>
<p>01.23.45.67.89</p>
</p>
</div>
<div class="col-md-6">
<p>
<img src="{{ asset('bundles/site/img/email.png') }}" alt="email"><br>
<p>a#b.fr</p>
</p>
</div>
</div>
<br>
<div class="row text-center">
<p>
<img class="text-center" src="{{ asset('bundles/site/img/formulaire.png') }}" alt="Formulaire"><br>
<p>Complétez le formulaire ci-dessous</p>
</p>
</div>
{% if contact is defined %}
<div>
{{ form_start(contact) }}
{{ form_widget(contact) }}
{{ form_end(contact) }}
</div>
{% endif %}
</div> <!-- container -->
{% endblock %}
thanks in advance for your help
Regards
Make sure you use the dev env to display the stack trace of the Exception.
You can use /app_dev.php for that.
my opinion, the error in:
return $this->render('siteBundle:Pages:'.$page.'.html.twig',$option);
use:
return $this->render('SiteBundle:pages:'.$page.'.html.twig',$option);
Check your logs! /var/logs/prod.log or error.log, and you find an error message
In you route change the key word controller by _controller
Maybe this would help :
if i get rid of the array $option on my render line (see code below), there is absolutely no problem and the page loads fine.
return $this->render('siteBundle:Pages:'.$page.'.html.twig');
something is happening when passing the variable to the template...
I am completely new to PHP, Wordpress and Timber. I have a custom post type called Projects, it uses the posts archive template and I am going crazy to create a specific Projects archive template so I can have a different layout for it.
This is what my index.twig looks like
{% extends "layouts/base.twig" %}
{% block content %}
<div class="uk-child-width-1-3#m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: false">
{% for post in posts %}
{% include "tease-post.twig" %}
{% endfor %}
</div>
{% endblock %}
and this is the tease-post.twig
{% block content %}
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="{{post.thumbnail.src('full')}}" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">{{post.title}}</h3>
<p>{{post.get_preview(25,false,false,true)}}</p>
</div>
<div class="uk-card-footer">
Read more
</div>
</div>
</div>
{% endblock %}
Any idea how it works? Can't find any related documentation..
There are a few diff't methods depending on what you're looking to achieve. It would seem the simplest is...
{% extends "layouts/base.twig" %}
{% block content %}
<div class="uk-child-width-1-3#m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500; repeat: false">
{% for post in posts %}
{% include "tease-'~ post.type ~'.twig" %}
{% endfor %}
</div>
{% endblock %}
You could then create a file called tease-project.twig (assuming that `project is the name of your custom post type's slug) that might look something like this...
{# tease-project.twig #}
<h2>My cool project is... {{ post.title }}</h2>
If you're looking to do something special with a CPT's specific archive page...
Check your archive.php file, if you're using the starter theme it should load a file called archive-projects.twig (assuming that projects is the name of the custom post type).
The logic is fully customizable so you can load any .twig files you want depending on the circumstance
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
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.