The tiled cards with varying sizes are done in JavaScript. Have a look at the Masonry JS library. It'll allow you to easily get the same effect.
You just need to render the Django templates as usual. Then, use Masonry to automatically rearrange the tiles. On Apr 3, 2015 11:48 PM, "Nkansah Rexford" <seanmav...@gmail.com> wrote: > allow me to use wired.com to ask my question > > On wired.com, you see the news items displayed in cards, with varying > sizes. > > In django, using the {% for %} will mean all the news item will have the > same card design and size etc. > > Is there a way in Django to have the design intact, and just filling in > the missing areas without having to use use {% for %} on one particular > design card to display the list items? > > What I tried sometime ago was to use slices in templates, so I would slice > each index of the returned list one by one, and place them in each card. > > Is there a better solution to this? > > So something like this, for instance: > > {% for i in object_list %} > <h1> {{ i.title }} </h1> > <div class="excerpt"> {{ i.description|truncatechars:"250" }} </div> > <!-- Then the second part is different from the first --> > > <h4> {{ i.title }} </h4> > <div class="excerpt smaller"> {{ i.description|truncatechars:"100" }} > </div> > {% endfor %} > > in the above scenario, django will go through every tag in the {% for %} > template tag, and will replace first item in the {% for %} block with first > item in object_list > > Should there be left over {{ i.title }}'s in the for loop, it doesn't show > those parts at all, and hides them. > > I don't know if the above concept makes sense, but I'm willing to explain > further. Or if there's a workaround to doing something like the above > without using slices, I'm all ears. > > thanks > > -- > You received this message because you are subscribed to the Google Groups > "Django users" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to django-users+unsubscr...@googlegroups.com. > To post to this group, send email to django-users@googlegroups.com. > Visit this group at http://groups.google.com/group/django-users. > To view this discussion on the web visit > https://groups.google.com/d/msgid/django-users/587e2855-91e9-4e96-ba09-3ab66028b75d%40googlegroups.com > . > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Django users" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscr...@googlegroups.com. To post to this group, send email to django-users@googlegroups.com. Visit this group at http://groups.google.com/group/django-users. To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAMHY-KcnJ7BjoiKyA60stbDgUMn4a3j%2BGiWakA%2BqMtJMZ4QJwQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.