How to apply cycle to this div's - django-templates

Since there is no modulus (%) in django templates So how to apply
cycle at this
{% for story in data %}
{{forloop.counter}}
when forloop.counter%4==1 then this should be executed
<div class="thumb">
<img src="{{ STATIC_URL }}images/thumb.jpg" width="185" height="185" />
</div>
<div class="thumbFooter">
<span class="view">
{{ story.views }}
</span>
<span class="like">
{{ story.likes }}
</span>
</div>
</li>
when forloop.counter%4==2 or 3 then this should be executed
<li>
<div class="thumb">
<img src="{{ STATIC_URL }}images/thumb.jpg" width="185" height="185" />
</div>
<div class="thumbFooter">
<span class="view">
{{ story.views }}
</span>
<span class="like">
{{ story.likes }}
</span>
</div>
</li>
when forloop.counter%4==0 of for loop this should be executed
<li class="omega">
<div class="thumb">
<img src="{{ STATIC_URL }}images/thumb.jpg" width="185" height="185" />
</div>
<div class="thumbFooter">
<span class="view">
{{ story.views }}
</span>
<span class="like">
{{ story.likes }}
</span>
</div>
</li>
<div class="clear"></div>
{% endfor %}

You can build your own custom filter
In the templatetags directory of your Django, add a file named 'mod.py'. In that file add the following code:
from django import template
register = template.Library()
def mod(value, arg):
if value % arg == 0:
return True
else:
return False
register.filter('mod', mod)
In your template use the mod filter like this:
...
{% load mod %}
...
<tr bgcolor="{% if forloop.counter|mod:2 %}#cccccc{% else %}#ffffff">
...

I think you want class='omega' on each 4th li of forloop. Use django Cycle in template in this way,
{% for story in data %}
<li {% cycle '' '' '' 'class="omega"' %}>
<div class="thumb">
<img src="{{ STATIC_URL }}images/thumb.jpg" width="185" height="185" />
</div>
<div class="thumbFooter">
<span class="view">
{{ story.views }}
</span>
<span class="like">
{{ story.likes }}
</span>
</div>
</li>
{% cycle '' '' '' '<div class="clear"></div>' %}
{% endfor %}

Or you could use the divisibleby filter. You can also use the add filter to adjust for all your conditions:
when forloop.counter%4==1 then this should be executed
{% if forloop.counter|add:"-1"|divisibleby:"4" %}
when forloop.counter%4==2 or 3 then this
{% if forloop.counter|add:"-2"|divisibleby:"4" or forloop.counter|add:"-3"|divisibleby:"4" %}
And without using add for the ones divisible by 4:
when forloop.counter%4==0 of for loop this should be executed
{% if forloop.counter|divisibleby:"4" %}

Related

Add a class to each slide on a shopify slideshow

I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}

HUBL HUBSPOT - Articles description not showing in block posts

I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?

How to make boxes fields the same size

I'm using HTML and TWIG.
I have different boxes with different fields filled with data retrieved from a php call. The problem is I don't know how to make those fields (and consequently boxes) the same size.
The size of each field should be the tallest one of the group. So far I got this
As you can see, Contratto, JSer and Azienda are fine (usually always on a single line, so it shouldn't be a problem).
The problem is Note: as you can see, it goes well for single box, but having more ones just break the visualization. I'd like all fields to be the same size in their own group:
every Contratto the size of the biggest one;
every JSer the size of the biggest one;
every Azienda the size of the biggest one
and of course, the important one, every Note the size of the biggest one
Here's the code I'm using, with Bootstrap 3.3.7
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<p><b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}</p>
<p><b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}</p>
<p><b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}</p>
<p><b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
EDIT: this is the code version with columns and rows
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
</div>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
Any suggestion?
EDIT ANSWER:
After few tries, I normalized the single row instead of single fields...single fields would not be the same height, but the row will, so this is actually fine for my final result. Here's the answer:
//CSS in head
.alertProperties {
padding-left:0px !important;
}
//Code
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
{% if loop.index % 5 == 0 or loop.first %}
<div class="row">
{% endif %}
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="box-header with-border"><h3 class="box-title" style="color: #ff000f">Avviso</h3></div>
<div class="box-body" style="border-left: 1px solid #00ACDF !important">
<div class="col-sm-12 alertProperties">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
<div class="col-sm-12 alertProperties">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align:left;">
<div class="col-sm-12 alertProperties">
<b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}
</div>
</div>
{% endif %}
<div class="box-footer">
<div class="col-sm-12">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
{% if (loop.index % 4 == 0 or loop.last) %}
</div>
{% endif %}
{% endfor %}
</div>
{# </div> #}
</div>
{% endif %}
You can truncate text of the note section by forcing text on the same line with the white-space:none
p{
width:400px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
However if you wanna truncate it to more than one line you can read it more on chris coyier's article here

How to stop content from stacking on top of each other?

I have been creating a blog and I have made these cards but I want the content to stack side by side rather than on top of each other.
Here's an image:
http://imgur.com/KP7kThH
model.py
class ProjectPost(models.Model):
title = models.CharField(max_length=120)
author = models.ForeignKey('auth.User')
image_url = models.CharField(max_length=1000, blank=True, null=True)
text = models.TextField()
def __str__(self):
return self.title
views.py
def projects(request):
ProjectPosts = ProjectPost.objects.all()
return render(request, 'blog/projects.html', {'projectposts': ProjectPosts})
projects.html
{% extends 'blog/base.html' %}
{% block content %}
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="text-right">
<h1 class="glyphicon glyphicon-plus"></h1>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 ">
{% for projectpost in projectposts %}
<div class="projectposts">
<img src="{{ projectpost.image_url }}" id="projects_image" class="img-thumbnail"/>
<div class="page-header">
<h2>{{ projectpost.title }}</h2>
</div>
<footer>By: {{ projectpost.author }}</footer>
<p>{{ projectpost.text | truncatewords:50 }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
You have wrapped your for loop inside a col-lg-3 .... You need to put the column classes inside the loop, not outside it:
<div class="row">
{% for projectpost in projectposts %}
<!-- These columns need to be inside the for loop -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 ">
<div class="projectposts">
...
</div>
</div>
{% endfor %}
</div>
You may be able to remove one level of nesting and just put all your classes in one <div class="projectposts col-lg-3 col-md-3...">.

Why can't I search spaces in shopify what do I do?

UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>