I am trying to the get my head around this for quite some time now:
Is it possible to create a pinterest Layout with Twitter Bootstrap only?
I know there are jQuery Plugins like Masonry, but is there no way without them?
Thanks
Found a (free) template at http://bragthemes.com/demo/pinstrap/. It's supposed to have all you are asking for. Haven't had time to check it out, though.
Edit 2016-03-15: Bootstrap 4 allows this out of the box here. It's still in alpha, but we're getting there.
Found this solution, works within bootstrap (works even without defining column sizes), doesn't require javascript -- I snapped it into a project and it works beautifully:
http://www.bootply.com/118335
Bless you #katiejones!
EDIT: This is now out of the box in boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns
Sure Thing. Took me a while to work out. Hope this helps!
Apologies for the code dump but its necessary to show the grid working.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row masonry-container">
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
</div> <!--/.masonry-container -->
</div><!--/.tab-panel -->
<style type="text/css">
body {
padding-top: 50px;
}
.main-container {
padding: 10px 15px;
}
.p {
text-align: center;
}
</style>
<script type="text/javascript">
/* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library
* on SitePoint by Maria Antonietta Perna
*/
//Initialize Masonry inside Bootstrap 3 Tab component
(function( $ ) {
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});
//Reinitialize masonry inside each panel after the relative tab link is clicked -
$('a[data-toggle=tab]').each(function () {
var $this = $(this);
$this.on('shown.bs.tab', function () {
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});
}); //end shown
}); //end each
})(jQuery);
</script>
Yes, it is possible but with some limitations.
Principle
Each column is a div (or section depending upon the meaning of your layout)
Within each column each tile is also be a div, or img etc. depending upon your design.
Practice
To make the columns you can use the following various techniques:
float the columns
display: inline-block the columns
Use the new flexible box API (non-standard implementations are creeping into modern browsers)
Use the new grid positioning API (although I'd avoid this for now as it's not supported hardly at all)
Then place various tiles (divs) in each column. Again, depending upon your design/layout you could replace the column-divs with uls, and have a list of tiles (lis). I can't speak as to whether that is semantically correct for your design.
Limitations
Resizing the Pinterest page maintains the general position of most elements i.e. elements at the top of a column generally stays near the top, even when the number of columns is adjusted for the browser width - the pure CSS solution won't do that out of the box.
Work-Arounds
While not a perfect solution, you can use media queries to influence the position of various elements.
With some time, one could get pretty close to the Pinterest layout - that said, there's probably a good reason they chose to implement said layout with JavaScript.
I know my answer is late. but just wanted this common question to be up dated. I found out 3 latest implementations.
isotope. Found this on bootstrap website. Works well with infinite-scroll to build infinite scroll web pages too.
Salvattore. This is achived with pure CSS and JS. JS is only used to pull data.
masonry.desandro.com. This is a JS intensive implementation. but it has its own features.
Since Bootstrap 4, the .card-columns class is available.
Specifications in there documentation here. It makes a nice Pinterest-like grid. 😌
<div class="card-columns">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
<div class="card" id="card..."></div>
</div>
About the number of columns, though, I had trouble adapting it to different screen sizes. I finally managed to do it with :
#media (max-width: 575.98px){
.card-columns {
column-count: 1; }
}
#media (min-width: 576px){
.card-columns {
column-count: 2; }
}
#media (min-width: 768px){
.card-columns {
column-count: 3; }
}
#media (min-width: 992px){
.card-columns {
column-count: 4; }
}
#media (min-width: 1200px){
.card-columns {
column-count: 4; }
}
There we have a stuff named: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/
But in fact, this plugin does not need bootstrap as it's dependencies. It's depends on whether you want to use bootstrap as your pin's markups or just style it yourself.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
For everyone who dont want want to go through the hassle of cross browser compatibility, here is a PHP solution. Assuming you have your data in an array,
<?php $iColumns = 4;?>
<?php for($i=0; $i < $iColumns; ++$i):?>
<div class="span3">
<?php
$j=$i;
while( isset( $aData[$j] ) ):
$oItem = $aData[$j]
?>
<div class="thumbnail" style="margin-top:10px;">
<a href="">
<img src="" alt=""/>
</a>
<h3>title</h3>
<p>caption</p>
</div>
<?php
$j=$j+$iColumns;
endwhile;?>
</div>
<?php endfor;?>
Related
I have four cards aligned in flex raw. Each card has image and text respectively. The gap between each card is 24px (gap-6).
However the image sizes of cards are not equal and when shrinks the proportion/symmetry is not maintained.
Kindly, advice how can I fix this.
Respective code is in playground: https://play.tailwindcss.com/BEc01nvdZj
Here's how I would approach it:
First, we would set each card to take 1/4 of its container by applying w-1/4 to each card. We'll also use a responsive utility (md:) because we want each card to take the full width of the container when the screen is smaller than 768px:
<div class="max-w-sm border bg-white md:w-1/4">
<img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" />
<div class="p-5">
<a href="#">
<h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem, ipsum dolor.</h5>
</a>
<p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum asperiores expedita harum eius veritatis minus unde et minima aut numquam!.</p>
</div>
</div>
Now that we have a fixed position for each card, we'll apply some classes to take care of the images width, height, and content.
width: Each image should take the whole width of the container. Therefore we apply w-full.
height: Each image should have a fixed height. This way, we can ensure that the height of each image will be identical. In this example, I set the height to be h-[12.5rem].
content (Docs): We want to make sure that each image will always cover the full size we set (full width and 12.5rem height). This is why we use the object-cover utility. This utility will make sure that the image will cover its container.
We could also use object-fill but it will stretch the image quite a bit.
<img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" />
Tailwind-play
Full Code:
<section class="container mx-auto my-4">
<div class="section-header">
<div class="section-title"><h1 class="font-BPGBannerCaps font-bold tracking-wide">Lorem, ipsum.</h1></div>
<hr class="mb-4 h-px border-0 bg-gray-400 dark:bg-gray-700" />
</div>
<div class="projects w-full md:flex md:gap-6">
<div class="max-w-sm border bg-white md:w-1/4">
<img src="https://images.unsplash.com/photo-1605546290557-ff57ffe5abcc" alt="" class="h-[12.5rem] w-full object-cover" />
<div class="p-5">
<a href="#">
<h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem, ipsum dolor.</h5>
</a>
<p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum asperiores expedita harum eius veritatis minus unde et minima aut numquam!.</p>
</div>
</div>
<div class="max-w-sm border bg-white md:w-1/4">
<img src="https://images.unsplash.com/photo-1526628953301-3e589a6a8b74" alt="" class="h-[12.5rem] w-full object-cover" />
<div class="p-5">
<a href="#">
<h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur.</h5>
</a>
<p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, repellat dolore. Reprehenderit, modi ullam placeat nam pariatur quas perspiciatis possimus porro ratione? Ad molestias perspiciatis iste ex unde neque enim repellendus sed fugiat consectetur? Voluptatem expedita eum voluptatum explicabo modi.</p>
</div>
</div>
<div class="max-w-sm border bg-white md:w-1/4">
<img src="https://images.unsplash.com/photo-1635695604201-2b718204bccb" alt="" class="h-[12.5rem] w-full object-cover" />
<div class="p-5">
<a href="#">
<h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum.</h5>
</a>
<p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta animi atque totam eos nam doloremque iusto qui odio officia doloribus saepe aspernatur dolore eligendi culpa, quos aliquam vel voluptatibus non!</p>
</div>
</div>
<div class="max-w-sm border bg-white md:w-1/4">
<img src="https://images.unsplash.com/photo-1640545232493-9a9b5c88ede4" alt="" class="h-[12.5rem] w-full object-cover" />
<div class="p-5">
<a href="#">
<h5 class="font-NotoSansGeo mb-2 text-lg font-bold leading-normal md:text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat enim saepe ex. Temporibus, atque nihil.</h5>
</a>
<p class="mb-3 text-sm font-normal leading-normal text-gray-700 dark:text-gray-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus velit voluptate, doloremque asperiores sapiente earum ut obcaecati ipsa necessitatibus itaque similique incidunt. Blanditiis modi nulla pariatur inventore soluta, quo similique quidem quasi perspiciatis nesciunt numquam rerum natus tenetur, consequatur nihil atque, beatae error itaque aspernatur iusto? Architecto vel ea cupiditate.</p>
</div>
</div>
</div>
</section>
I would like to implement a News Headline banner.
The HTML code for that headline banner is this:
<!-- hot news start -->
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
<li class="news-item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</li>
<li class="news-item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</li>
<li class="news-item">Donec quam felis, ultricies nec, pellentesque eu</li>
<li class="news-item">Nulla consequat massa quis enim. Donec pede justo, fringilla</li>
<li class="news-item"> Donec pede justo, fringilla vel, aliquet nec, vulputate eget ultricies nec, pellentesque</li>
<li class="news-item">In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</li>
<li class="news-item">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis </li>
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
</div>
<!-- hot news end -->
I would like to make this so it can be used in a modular page. The idea is that the user could just type something similar to this:
news:
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
news:
text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem
url: foo.com/sedut
...
And the whole block would be rendered. I would like to know how to implement that in Grav/Twig. If someone answers please bear in mind that I am relatively new to Grav, so a verbose answer is more appreciated than a concise one.
I will begin with the simplest solution that would achieve your goal.
At first, I will treat this as a regular page, not a modular page.
In your user file, let's define a new template within your current template. Antimatter is the default one, so I'll work with this one. Create news.html.twig in user - templates - antimatter folder and paste in the following code block.
{# user/templates/antimatter/news.html.twig #}
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
{% for news in page.header.news %}
<li class="news-item">{{news.text}}</li>
{% endfor %}
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
This is a twig way how to loop through the frontmatter content which we'll create now.
All the pages in Grav are stored in user - pages folder. The name of the folder specifies among others the relative address of the page, the number is just for ordering purposes and irrelevant for now, the markdown file inside specifies which template to use.
Let's create in pages a folder called 02.news and inside a file called news.md. Therefore, it'll use news template we created earlier. Paste this into the news.md
<!-- user/pages/02.news/news.md -->
---
news:
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
---
Doing this we create a news array and each entry has text and url. Now you have access to it through page.header.news and you can retrieve it's attributes.
I'm not all too sure how would you imagine turning this into a modular design. One way that comes to mind is to have a parent page and within have modular pages for various topics such as business news or politics. Let's try that.
Start with a parent template, let's call it a newscontainer.html.twig. In it we need to specify that grav should retrieve all it's modular children and iterate over. Grav calls these children a collection of pages. We'll just want to spit out their content.
{# user/templates/antimatter/newscontainer.html.twig #}
{% for module in page.collection() %}
{{module.content}}
{% endfor %}
Now in the 02.news folder, change the markdown file name to newscontainer so it uses our new template. Now it serves as a parent container for all the news. Inside, specify that it should load into it's page.collection all it's modular children. The limit means that maximum 20 modular pages will be loaded.
<!-- user/pages/02.news/newscontainer.md -->
---
title: News
content:
items: '#self.modular'
limit: 20
---
In the templates folder, create a new one called modular and move the news.html.twig template we made earlier into it. Modular pages look for templates in this folder.
Almost there. Lastly, in 02.news folder, we can now create modular pages. You can do that by creating new folders that start with _ instead of numbers, so for example create _politics and _business. You can copy now the news.md we made earlier into each and change the content as you wish. It should display correctly if you go to whateverpage.com/news
In the end, the pages structure looks like this
pages
01.Home
default.md
02.News
newscontainer.md
_business
news.md
_politics
news.md
As additional comment to Dan's answer, here is what I finally did:
Defined a partial twig template
<!-- hot news start -->
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
{% set items = page.find('/ticker').children %}
{% for item in items %}
<li class="news-item">{{ item.title }} </li>
{% endfor %}
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
</div>
<!-- hot news end -->
Populated empty pages with just titles under /ticker folder (invisible).
The template can be used anywhere with {% include %} and the user just needs to add or delete empty pages and set up the title he wants to display as headline/news.
I found this approach was easier than any other one.
Say I'd like to have a component that wraps its contents (aka children):
<article>
<header>${input.heading}</header>
<section> ... contents come here ... </section>
<article>
Then use it like:
...
<my-article heading='Test'>
Lorem ipsum <s>dolor</s> sit amet
</my-article>
How do I access the contents in the template?
Or a simple solution:
<article>
<header>${input.heading}</header>
<section><include(input) /></section>
<article>
And use:
<my-article heading='Test'>
Lorem ipsum <s>dolor</s> sit amet
</my-article>
Found the solution - <include> reusable/nested content:
<article>
<header>${input.heading}</header>
<section><include(input.body) /></section>
</article>
Then use it like:
<my-article heading='Hello'>
<#body>Lorem ipsum dolor sit <u>amet</u></#body>
</my-article>
I hope someone can help me with this piece of code that I have been struggling with for the last couple of hours. I have a grid of cards with a somewhat responsive design. see this pen.My problem is that I do not understand why the 3rd and 4th cards don't fit the screen like the rest of them and instead their width gets increased a lot more than needed.
Just a heads up, I cannot use md-grid so if you can point me to what's wrong with the current code or element distribution I will really appreciate it.
<div ng-controller="MainCtrl" ng-cloak layout flex>
<!-- Some side content -->
<div id="sideContent" hide-xs flex-sm="33" flex-md="30" flex-lg="25" layout="column" class="md-whiteframe-z2" style="z-index: 55">
<p>Some side content</p>
<p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
<p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
<p>Lorem ipsum dolor sit amet, affert melius disputando ex his. Sit an unum disputando ullamcorper, his ne summo nostrud graecis. At modus nulla vidisse nam, pro et alienum iudicabit repudiandae, mei te dictas dignissim reprehendunt. Vivendum gloriatur
adversarium te nec, liber apeirian tractatos ad pri, choro latine voluptatibus eu est. Ne maluisset liberavisse eos, et luptatum referrentur per.</p>
</div>
<md-content style="z-index: 54; position: relative;" flex>
<div layout layout-wrap>
<!-- Custom sized card -->
<div layout flex="35" flex-md="100" flex-xs="100" flex-sm="100">
<md-card flex="noshrink" style="width:300px;height:700px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 1</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>Content in card 1</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
</div>
<div layout flex flex-md="100" flex-xs="100" flex-sm="100">
<div layout layout-wrap flex>
<!-- Card 2 -->
<md-card flex="noshrink" style="min-width:300px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 2</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>
Content in card 2
<md-select placeholder="{{data.currentSelected}}" ng-model="selection">
<md-option ng-value="$index" ng-repeat="text in data.options">{{text.text}}</md-option>
</md-select>
<span>Some random text<br />
More random text, with some more text</span>
</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
<!-- tabs -->
<md-card flex="noshrink" style="min-width:300px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 3</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>
<md-tabs md-selected="1" md-center-tabs flex>
<md-tab ng-repeat="tab in data.tabs">
<md-tab-label>{{tab.name}}</md-tab-label>
<md-tab-body>
<div style="padding-top:20px;">
<md-list-item class="md-2-line" ng-repeat="content in tab.content">
<img ng-attr-src="http://placehold.it/{{::content.image}}" class="md-avatar" />
<div class="md-list-item-text" layout="column">
<h3>{{::content.title}}</h3>
<p>{{::content.data}}</p>
</div>
<md-icon class="material-icons">
cached
<md-tooltip>Icon 1</md-tooltip>
</md-icon>
<span style="margin-left:5px;"></span>
<md-icon class="material-icons">
cached
<md-tooltip>Icon 2</md-tooltip>
</md-icon>
</md-list-item>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
</div>
</div>
</div>
<!-- Lorem -->
<div layout flex>
<div layout flex>
<md-card flex="noshrink" style="min-width:300px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 4</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>{{::data.lorem}}</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
</div>
</div>
<div layout layout-wrap>
<!-- Card 5 -->
<div layout flex>
<md-card flex="noshrink" style="width:300px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 5</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>
<div ng-repeat="content in data.content">{{::content}}</div>
</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
</div>
<div layout flex></div>
<!-- Card 6 -->
<div layout flex>
<md-card flex="noshrink" style="width:300px;">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<h3><span>Card 6</span></h3>
</div>
</md-toolbar>
<md-card-content layout="column" layout-padding>
<md-subheader class="md-no-sticky">Some addresses {{::data.addresses.expiry_date}}</md-subheader>
<md-list-item class="md-3-line" ng-repeat="address in data.addresses.address">
<md-button class="md-icon-button" href="http://maps.google.com/maps?q=255 Queens Avenue London ON Canada" target="_blank" md-autofocus>
<md-icon class="material-icons">place</md-icon>
<md-tooltip>Open address in Google map</md-tooltip>
</md-button>
<div class="md-list-item-text" layout="column">
<h3>{{::address.description}}</h3>
<p>{{::address.street}}</p>
<p>{{::address.city}}, {{::address.postal_code}}</p>
</div>
</md-list-item>
</md-card-content>
<span flex></span>
<md-card-icon-actions layout>
<span flex></span>
<md-button aria-label="details">
<span>Details</span>
</md-button>
</md-card-icon-actions>
</md-card>
</div>
</div>
</md-content>
</div>
I am using this theme http://twbs.github.io/bootstrap/examples/justified-nav/
I want to instantiate the documents of my collections in jade view and (create pagination later on), but my question is about having an HTML or Jade example just to figure out the further process.
this is my div to loop:
<div class="row">
<div class="col-lg-4">
<h2>Safari bug warning!</h2>
<p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
</div>
Let say I have just 12 documents in my collection, how do I loop trough my collection to create
4 <div class="row"> and each one of these <div class="row"> have 3 <div class="col-lg-4"> and
each <div class="col-lg-4"> have a:
<h2>= product.title
<p> = product.imgurl
<p> = product.description
<p> = prodcuct.url
I know how to route, access the db, display on jade engine...I made simple test
all successful, but to get to the next-level I would appreciate some explanations or a small example.
I resolved myself:
each product, i in products
div
div
h1 = product.title
p = product.imgurl
p = product.description
p = prodcuct.url
I just made a small, quick and dirty example out of your provided informations, I hope it will help you to do the last few steps to get familiar with Jade and co.
First your collection, just a small example (only with 8 examples):
{
products: [{title: 'xyz', imgurl: 'http://www.example.com/img.jpeg',
description: 'more text',
url: 'http://www.example.com/'},
{title: 'abc', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'fgh', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'tgb', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'qwe', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anotherz'},
{title: 'asd', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anothery'},
{title: 'hjk', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anotherx'}]
}
This is what you pass through res.render in your node app.
Next we have your Jade markup, your example is not that wrong, I changed only a few things here:
- for (var i = 0; i < products.length; i += 4)
div.row
- for (var j = i; j < 3+i; j++)
div(class="col-lg-4")
h1= products[j].title
p= products[j].imgurl
p= products[j].description
p= products[j].url
Like you see, I put your <div class="row"> between two loops (I used for loops here, it would be easier if you pass your data in an other way. What I try to say: This example is not fail safe, e.g. if you don't have data that has 3 cols you will get an error like Cannot read property 'title' of undefined - so here you have to set exceptions), so we don't get more than one per 3 iterations, your example would produce one div per iteration.
A class can be added by a dot. For example div.yourClass or just with div(class="yourClass" style="..." whatever="...").
Next we have the loop, after that given <div class="col-lg-4 "> for your collection data. Your data can be displayed by either tag= var or tag #{var}.
The rest should be simple to guess.
This will produce following HTML code:
<div class="row">
<div class="col-lg-4">
<h1>xyz</h1>
<p>http://www.example.com/img.jpeg</p>
<p>more text</p>
<p>http://www.example.com/</p>
</div>
<div class="col-lg-4">
<h1>abc</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/another</p>
</div>
<div class="col-lg-4">
<h1>fgh</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/another</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h1>qwe</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anotherz</p>
</div>
<div class="col-lg-4">
<h1>asd</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anothery</p>
</div>
<div class="col-lg-4">
<h1>hjk</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anotherx</p>
</div>
</div>
You see the <p> tag for links makes here not that much sense, but you can easily change them to an <a> tag, it is always the same procedure.
Important, in your Jade markup, is the right indentation, everything shifted is between the opening tag and the close tag.
So the loop is in div row, the data in your cols.