Trying to get liquid to add the class has_second_image if there is a 2nd image present but when I run yarn start the terminal spits out 'if tag was never closed"
{% liquid
assign has_second_image = false
if product.images[1]
assign has_second_image = true
endif
%}
<a href="{{ product.url }}" class="product-tile{% if has_second_image %} product-tile-has-second-image{% endif %}">
<div class="product-tile_image-wrapper"{% if has_second_image %} style= "background-image: url({{ product.images[1] | img_url: '700x' }});">
<img class="product-tile_image" src="{{ product.featured_image | img_url: '700x' }}" alt="{{ product.featured_image.alt }}" />
</div>
<div class="product-tile_info">
<h3 class="product-tile_title"> {{ product.title }}</h3>
<span class="product-tile_price">{{ product.price | money }}</span>
</div>
</a>
You didn't close your if statement on line 10 of the code you posted:
<div class="product-tile_image-wrapper"{% if has_second_image %} style= "background-image: url({{ product.images[1] | img_url: '700x' }});">
This should fix it:
<div class="product-tile_image-wrapper"{% if has_second_image %} style= "background-image: url({{ product.images[1] | img_url: '700x' }});"{% endif %}>
Related
I'm pretty new to craft and creating my first front end entry form using the demo code provided by craft. For some reason I'm getting a 'Request missing required body param' error. I've tried adding <input type="hidden" name="entryId" value=""> but that didn't solve the issue.
Here's my code:
{% extends "_layout.twig" %}
{% macro errorList(errors) %}
{% if errors %}
{{ ul(errors, {class: 'errors'}) }}
{% endif %}
{% endmacro %}
{# If there were any validation errors, an `entry` variable will be
passed to the template, which contains the posted values
and validation errors. If that’s not set, we’ll default
to a new entry. #}
{% set entry = entry ?? create('craft\\elements\\Entry') %}
{# Add `enctype="multipart/form-data"` to `<form>` if you’re
uploading files. #}
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
{{ csrfInput() }}
{{ actionInput('entries/save-entry') }}
{{ redirectInput('viewentry/{slug}') }}
{{ hiddenInput('friends', '2') }}
<input type="hidden" name="entryId" value="">
<div class="mb-6">
<label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Dog's Name</label>
{{ input('text', 'title', entry.title, {
id: 'title',
class:'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
}) }}
{{ _self.errorList(entry.getErrors('title')) }}
</div>
<div class="mb-6">
<label for="featureImage" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Feature Image</label>
{{ input('file', 'featureImage', entry.featureImage, {
id: 'featureImage',
}) }}
{{ _self.errorList(entry.getErrors('featureImage')) }}
</div>
<div class="mb-6">
<label for="postContent" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tell us about your dog</label>
{{ tag('textarea', {
id: 'postContent',
name: 'fields[postContent]',
class:'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
}) }}
{{ _self.errorList(entry.getErrors('postContent')) }}
</div>
<div class="mb-8">
<label for="postCategories" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Breed</label>
<select name="fields[postCategories]" id="postCategories">
{# Create a category query with the 'group' parameter #}
{% set myCategoryQuery = craft.categories()
.group('blog') %}
{# Fetch the categories #}
{% set categories = myCategoryQuery.all() %}
{# display post categories #}
{% if entry.postCategories|length %}
<div class="border-t py-2 mb-6">
{% for category in entry.postCategories.all() %}
<a href="{{ category.url }}" class="inline-block border rounded px-2 py-1 text-sm">
{{- category.title -}}
</a>
{% endfor %}
</div>
{% endif %}
{% nav category in categories %}
<li>
<option>{{ category.title }}</option>
</li>
{% endnav %}
</select>
</div>
{#
{% set field = craft.app.fields.getFieldByHandle('postCategories') %}
{{ hiddenInput('fields[postCategories]', '') }}
<select multiple name="fields[postCategories][]">
{% for option in field.options %}
{% set selected = entry is defined
? entry.postCategories.contains(option.value)
: option.default %}
<option value="{{ option.value }}"
{% if selected %} selected{% endif %}
>
{{ option.label }}
</option>
{% endfor %}
</select>
#}
<div class="mb-6">
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Publish</button>
</div>
</form>
{% endblock %}
I didn't realise that the 2 in {{ hiddenInput('sectionId', '2') }} had to be changed for the ID of the channel - not the handle.
For anyone else stuck with this, the ID can be found in the URL when you're editing the channel in the dashboard settings.
More details here >>
I'm using Pimcore 5.4.4 in combination with twig and I'm trying to customize my output. Currently I have this:
$this->setViewAutoRender($event->getRequest(), true, 'php');
$this->view->navigation=$navStartNode;
which I render with this:
{{ pimcore_render_nav(mainNavigation) }}
This does its job, it is however horribly uncustomizable.
I want to render an arrow-down icon for the menu Items that have children. Can this be achieved in any way?
To clarify, I would like my markup to look something like this:
<ul>
<li> m1 </li>
<li class='hasChildren'><i 'arrow-down'> m2 </i></li>
<ul>...
which should then display an arrow-icon next to the items which have children.
Any help here would be much appreciated.
Greetings, derelektrischemoench
Is it not possible to overwrite the partial?
See the documentation:
https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Individual-Partial-Navigation-View-Script
Here's an entire custom navbar that works for me with Bootstrap 4.3.1 and mdbootstrap 4.8.9, tested with Pimcore 6.2.0:
<header>
{% set mainNavStartNode = document.getProperty('mainNavStartNode') %}
{% if mainNavStartNode is empty %}
{% set mainNavStartNode = pimcore_document(1) %}
{% endif %}
{% set mainNav = pimcore_build_nav(document, mainNavStartNode) %}
{% set renderer = pimcore_nav_renderer('menu') %}
<nav class="navbar navbar-expand-lg navbar-dark indigo mb-4">
<!-- Additional container -->
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="{{ mainNavStartNode }}">
<img src="{{ asset('static/img/lovia-navbar-white.png') }}" alt="Lovia"
style="height: 1.3rem; margin-bottom: 0.4rem;">
{# <strong>Lovia</strong> #}
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="{{ "Toggle navigation"|trans }}">
<span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
{% for page in mainNav %}
{% if page.isVisible() and renderer.accept(page) %}
{% if page.hasPages %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.label|trans }}</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
{% for child in page.pages %}
<a class="dropdown-item" href="{{ child.href }}">{{ child.label|trans }}</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ page.href }}">{{ page.label|trans }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
{{ include('Includes/login.html.twig') }}
{{ include('Includes/language.html.twig') }}
</ul>
</div>
</nav>
</header>
Adapted from https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Using-Partials-Generating-a-Customized-Navigation
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.
I have a method that returns multiple arrays and I want to access to their data to manipulate them in twig:
repository
public function getmemberlist($list){
$memberId = explode('-',$list);
$membres = $this->getEntityManager()
->createQuery(
'SELECT m.nom, m.prenom, m.profile_pic
FROM MainBundle:Member m
WHERE m.id IN(:id)'
)
->setParameter('id',array_values($memberId))
->getResult();
return $membres;
}
controller
public function membreGroupeAction()
{
$em = $this->getDoctrine()->getManager();
$str = $em->getRepository("GroupGroupBundle:Groupe")->findOneBy(array('id'=>1));
$member = $em->getRepository("GroupGroupBundle:Groupe")->getmemberlist($str->getMembres());
var_dump($member);
return $this->render('#GroupGroup/layout/membres.html.twig',array("mem"=>$member));
}
this is the result of var_dump($member)
everything is good until now but i didn't find how to manipulate the data in my twig. I've tried this but it shows me an error
twig
{% extends '#GroupGroup/Group/groupe_mur_base.html.twig' %}
{% block panel %}
{% for i in mem %}
{% for j in i %}
{{ j[0].nom }}
{% endfor %}
{% endfor %}
<div class="jumbotron list-content" style="display: block;">
<ul class="list-group">
<li href="#" class="list-group-item title">
Liste des Membres
</li>
<li href="#" class="list-group-item text-left" id="listmembre" style="display: block;">
<div class="image">
<img class="img-thumbnail" src="http://bootdey.com/img/Content/User_for_snippets.png">
<span id="membername">Juan guillermo cuadrado</span>
<div><button id="btnajout" class="btn btn-primary">Ajouter</button></div>
</div>
<div class="break"></div>
</li>
<li href="#" class="list-group-item text-left" id="listmembre" style="display: block;">
<div class="image">
<img class="img-thumbnail" src="http://bootdey.com/img/Content/User_for_snippets.png">
<span id="membername">Juan guillermo cuadrado</span>
<div><button id="btnajout" class="btn btn-primary">Ajouter</button></div>
</div>
<div class="break"></div>
</li>
error
I'm not sure why you are using 2 for-loops in your code,
{% for i in mem %} {# here you are looping members #}
{% for j in i %} {# here you are looping attributes of the member #}
{{ j }} {# output is bg, wass, http://.... #}
{% endfor %}
{% endfor %}
If you want to display the name of the members you should only use one loop
{% for i in mem %}
<div>
<img src="{{ i.profile_pic }}" alt="{{ i.nom }} {{ i.prenom }}" title="{{ i.nom }} {{ i.prenom }}" />
{{ i.nom }} {{ i.prenom }}
</div>
{% endfor %}
I have got a bizarre behaviour using paginator on a Jekyll generated website.
I used to create the list of the last 3 posts as
<ul class="post-list">
{% for post in site.posts limit:3 %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<p>{{ post.excerpt }}</p>
</li>
{% endfor %}
</ul>
As soon as I activated the paginator in Jekyll and cycled pages as
{% for post in site.posts %}
<div class="post-preview">
<a href="{{ post.url | prepend: site.baseurl }}">
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">
{{ post.subtitle }}
</h3>
<p>{{ post.excerpt }}</p>
{% endif %}
</a>
<p class="post-meta">Posted by {% if post.author %}{{ post.author }}{% else %}{{ site.title }}{% endif %} on {{ post.date | date: "%B %-d, %Y" }}</p>
</div>
<hr>
{% endfor %}
post.excerpt becomes empty. I tried both with the standard behaviour and with the trick.
Build Settings in _config.yml are as such:
# Build settings
gems: [jekyll-sitemap]
markdown: kramdown
highlighter: rouge
permalink: pretty
paginate: 5
paginate_path: "/archives/page/:num"
Thank you
You've put {{ post.excerpt }} expression in a conditional statement.
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
<p>{{ post.excerpt }}</p>
{% endif %}
So, no subtitle, no excerpt !
This is better :
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% endif %}
<p>{{ post.excerpt }}</p>
In order to render paginated posts you must loop in paginator.posts see documentation