I have a problem with this code for a fancybox gallery which its showing all images across the page, when should be visible just the first one and then others, when you click.
How do i stop from showing all images and show just the first one before click?
<code>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endfor %}
</code>
You have to change the first line:
// delete this line {% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %} //use this one
and the last one:
// delete this line {% endfor %}
{% end %}
Related
what I want is that each carousel-item hold card group with 3 cards inside .. so ..
in this particular case, there are 8 related posts, it would like this .. *[(1)(2)(3)] -> [(4)(5)(6)] -> [(7)(8) ]
[Twig file]
{% set division = (related|length - 1)/ 3 %}
{% from _self import post_cards %}
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide">
<ol class="carousel-indicators">
{% for i in 0..division %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}" class="{{ i == 0 ? 'active' : ''}}"></li>
{% endfor %}
</ol>
{# -- inner elements -- #}
<div class="carousel-inner bg-warning">
{% for post in related %}
{% if (loop.index0 is divisible by(3)) or (loop.first) %}
<div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
<div class="card-group w-100">
{% endif %}
{{ post_cards('col-md-4 my-4', post)}}
{% if (loop.index0 is divisible by(3)) or (loop.first) %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{# --- end of inner elements --- #}
</div>
</div>{# END container --- #}
{# --- card macro #}
{% macro post_cards(classes, post) %}
<div class="{{ classes }}">
<div class="card h-100">
<a class="text-decoration-none blog-card-link h-100" alt="Link to blog post" role="button"
target="_self" href="{{ post.link }}">
<img src="{{ post.thumbnail.src }}" class="card-img-top my-0" alt="Image for {{ post.title }}">
<div class="card-body">
<p class="post-category font-weight-medium">{{ post.category }}</p>
<h3 class="card-title font-weight-bold">{{ post.title }}</h3>
<p class="card-text">
{% set post_preview = post.meta('on_blog_list') %}
{{ post_preview ? post_preview|truncate(10) : post.preview.length(10).read_more(null) }}
</p>
</div>
<div class="card-footer bg-transparent border-0">
<span class="blog-date">
{{ post.date }}
</span>
<a class="d-inline btn-link arrow-link float-right"
alt="Read more" role="button"
target="_self" href="{{ post.link }}">
read
</a>
</div>
</a>
</div>
</div>
{% endmacro post_cards %}
..generates following
code above generates this
so cards fall outside the carousel-item
You have same condition for opening and closing div.
Try something like this.
{# -- inner elements -- #}
<div class="carousel-inner bg-warning">
{% set x = 0 %}
{% for post in 1..15 %}
{% set x = x + 1 %}
{% if x == 1 %} {# opening div on 1st item #}
<div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
<div class="card-group w-100">
{% endif %}
{{ post_cards('col-md-4 my-4', post)}}
{% if x == 3 %} {# closing div after 3rd item #}
</div>
</div>
{% set x = 0 %}
{% endif %}
{% endfor %}
</div>
{# --- end of inner elements --- #}
I'm having a problem using Twig because I have a vertical sidebar used as a menu. When the user clicked on the menu item, it add an active class. But when the user change of page, active page disapear. I know this is the behavior expected but that's what I'm here. I wanted to know if someone have an idea to keep this active class in my layout when the user click on this item, so that, when he change of page, the menu will be as he desired (i.e. active or not)
Here is my layout.html.twig file :
<!DOCTYPE HTML>
<html>
<head>
{% block head %}
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %} AcreatMailing {% endblock title %}</title>
{% block js_head %}
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/jquery-3.1.1.min.js') }}"></script>
{% endblock js_head %}
{% block stylesheet %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link href="{{ asset('/bundles/front/css/style.min.css') }}" rel="stylesheet" />
{% endblock stylesheet %}
{% endblock head %}
</head>
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1">
<button class="hamburger">☰</button>
</div>
<div class="col-4 offset-1">
{%- block breadcrumb -%}{%- endblock -%}
</div>
<div class="col-6">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="100" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<span class="dropdown-item"><b>{{app.user.username}}</b></span>
<span class="dropdown-item">{{app.user.email}}</span>
{{ 'acreat.mailing.nav.myaccount'|trans }}
{{ 'acreat.mailing.nav.changepassword'|trans }}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
{{'acreat.mailing.admin.impersonalisation'|trans}}
{% endif %}
</div>
</div>
<div class="card-footer text-center">
{{ 'acreat.mailing.nav.logout'|trans }}
{% else %}
{{ 'acreat.mailing.nav.login'|trans }}
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span>
<i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" id="addmessage" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" id="viewNotSent" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagenotsent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberNotSent[0][1] }}</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" id="viewSent" data-parent="#sidebar" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagesent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberSent[0][1] }}</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" id="draft" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span>
</i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span>
<div class="collapse show no-escape" id="menu4">
{{ 'acreat.mailing.nav.administrationlist'|trans }}
{{ 'acreat.mailing.nav.administrationaccount'|trans }}
{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}
{{ 'acreat.mailing.nav.administrationparameters'|trans }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
{% block footer %}
{% block footer_javascript %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/tether.min.js') }}"></script>
<script type="text/javascript" src="{{asset('bundles/front/components/moment/min/moment.min.js') }}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/bootstrap.min.js') }}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/mdb.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/components/jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/libraries.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/acreatmailingfront.min.js') }}"></script>
{% endblock footer_javascript %}
{% endblock footer %}
</html>
The sidebar is inside the {% block navbar %}.
Thanks all in advance.
You can use twig's if inside the class definition of each menu item.
If the current path matches the menu item's path, then print " active " inside the class html attribute.
I found the solution with one of my teamates. I used javascript and jquery to set cookies for the menu. And then if the cookie is set i add/remove the class for my menu. Thanks all by the way.
I have designed a new site using the Timber Framework in Shopify and I am now trying to sort out the responsive side to ensure this works on all devices properly.
The problem I am currently facing is that when the screen is resized to below 768px the desktop menu goes away which is fine but no menu shows up at all and I am not sure why this is. Initially when I added the Timber Framework then this was working and I have looked through the theme.liquid file but can't work why this is happening.
The site itself can be viewed at : http://www.prontaprint247.com
If somebody could please advise as to where I have gone wrong as not sure how to fix this issue.
Any help or advice would be appreciated.
My menu code in theme.liquid
<div id="NavDrawer" class="drawer drawer--left">
<div class="drawer__header">
<div class="drawer__title h3">{{ 'layout.drawers.browse' | t }}</div>
<div class="drawer__close js-drawer-close">
<button type="button" class="icon-fallback-text">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.drawers.close_menu' | t }}</span>
</button>
</div>
</div>
<!-- begin mobile-nav -->
<ul class="mobile-nav">
<li class="mobile-nav__item mobile-nav__search">
{% include 'search-bar' %}
</li>
{% for link in linklists.main-menu.links %}
{% comment %}
Create a dropdown menu by naming a linklist the same as a link in the parent nav
More info on dropdowns:
- http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
{% endcomment %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}" aria-haspopup="true">
<div class="mobile-nav__has-sublist">
{{ link.title }}
<div class="mobile-nav__toggle">
<button type="button" class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">See More</span>
</button>
<button type="button" class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'cart.general.close_cart' | t | json }}</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist">
{% for childlink in linklists[child_list_handle].links %}
<li class="mobile-nav__item {% if childlink.active %} mobile-nav__item--active{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}">
{{ link.title }}
</li>
{% endif %}
{% endfor %}
{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item">
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
{{ 'layout.customer.account' | t }}
{% endif %}
</li>
<li class="mobile-nav__item">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
</ul>
<!-- //mobile-nav -->
</div>
I'm doing my best to learn Hubspot's HubL language and CSS but am stuck on creating a 2 column format for my blog (they only provide a 1 column format). I inserted their Blog Content module, then edited the "Listing Template" code to be more to my liking, as follows. In the blog settings page I set the number of posts per "listing page" to 10 but would like to make it wrap at 5.
I also applied this inline styling so that the first column takes up half the space, which is good, but can't figure out how to tell it to wrap posts 6-10 to another column. I am reading everything I can about how I can get this to work but nothing applies directly to my problem.
max-width: 50%; height: auto;
Caveat - I can edit the below and I can apply CSS styling but that's the extent of my knowledge. If I have to do something in Javascript, I can copy-paste into a file that applies to the site but that's about it.
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="{{ blog_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
{% endif %}
{% if blog_author.linkedin %}
{% endif %}
{% if blog_author.twitter %}
{% endif %}
{% if blog_author.google_plus %}
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}
{% for content in contents %}
<div class="post-item">
{% if not simple_list_page %}
{% if topic %}<h3>Posts about {{ page_meta.html_title|replace(' | ', '') }}</h3>{% endif %}
{% if content.topic_list %}
<p id="hubspot-topic_data"> >
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
{{ content.publish_date_localized }}
<div class="post-header">
<h2>{{ content.name }}</h2>
</div>
<div class="post-body clearfix">
<!--post summary-->
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
</a>
</div>
{% endif %}
{{ content.post_list_content|safe }}
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
</div>
{% else %}
<h2 class="post-listing-simple">{{ content.name }}</h2>
{% endif %}
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<div class="blog-pagination">
{% if last_page_num %}
<a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
{% endif %}
<a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
{% if next_page_num %}
<a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
You could reverse the loop and use modulus to split the posts into 2 columns
change your opening loop to:
<div class="span5">{% for content in contents|reverse %}
and then change the closing of the loop to:
{% if loop.index % 5 == 0 %}
</div><div class="span5">
{% endif %}
{% endfor %}
</div> <!-- close the span5 we opened -->
</div> <!-- close the parent loop container -->
I am trying to align the logo and cart icon in same line. Also there should be some space between the logo and the cart icon. Check the part //...moved this code here - start. That is the code I have added. It was earlier residing in a ul tag. Moved it here.
<div class="row">
<div id="logo" class="desktop-12 mobile-3">
{% if settings.use_logo_image %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/>
{% else %}
{{ shop.name }}
{% endif %}
//...moved this code here - start
<ul id="cart" class="{% if settings.enable-hello %}desktop-3 {% else %}desktop-6{% endif %} tablet-6 mobile-3">
<li class="cart-overview"><i class="icon-shopping-cart icon-2x"></i><span id="item_count">{{ cart.item_count }}</span>
<div id="crt">
{% include 'shopping-cart' %}
{% if cart.item_count != 0 %}
<a class="checkout-link" href="/cart">{{ 'cart.general.checkout' | t }}</a>
{% endif %}
</div>
</li>
</ul>
//...moved this code here - end
</div>
</div>
This is the output I am getting now.
And this is the output I am expecting.
Yes so under the div named logo; both logo image and then cart comes. So inorder to align in same line
for example below:
<div class="logo">
<div class="logoimg"></div>
<div class="cartimg"></div>
</div>
Style becomes like eg:
<style>
.logo{display:inline-block;width:900px}
.logoimg{float:left;width:400px;}
.cartimg{float:right;width:400px;}
</style>
Let me know for more details if needed.