I made a special slider for the products on the catalog page. However, I cannot bring the images of the product in a loop. How can I get all the photos of the product?
This is the product_card.twig file. I want to create a for loop based on the product.
product_card.twig
{% for image in product.images %}
<div class="carousel-item active">
<img class="d-block" src="{{ images.thumb }}" alt="product-img">
</div>
{% endfor %}
Related
ive written an simple plugin but it changes the tree, so that the .container moves after the .head, if it trys to render this part:
<a class="head" href="#">
<div class="container">
{% for subchild in child.children %}
<a>{{ subchild }}</a>
{% empty %}
notext
{% endfor %}
</div>
</a>
but if i change the outter a tag to anything else it works
I have a a list of entries.
Each entry has a related person.
Each related person has an avatar.
On my index page I am looping over the entries and creating a <div> with the persons details. Eg
{% set person = entry.relatedPerson[0] ?? null %}
<p>{{person.firstName}} {{person.lastName}} </p>
I need to access the picture related to the person.
Have tried this which displays a list of every asset that is an image in its own div.
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in craft.assets.kind('image') %}
<li>
<img src="{{ image.getUrl }}" alt="{{ image.title }}">
</li>
{% endfor %}
I have also tried this which shows nothing
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in person.assets.kind('image') %}
<li>
<img src="{{ image.getUrl }}" alt="{{ image.title }}">
</li>
{% endfor %}
How can I add the relatedPerson image to each card?
Also it would be great if you could explain as I'm not understanding templating. The docs aren't sufficient for me
I think you missed the parenthesis after getUrl "()" in your code to fetch the image. The getUrl is a method.
{% set person = entry.relatedPerson[0] ?? null %}
{% for image in craft.assets.kind('image') %}
<li>
<img src="{{ image.getUrl() }}" alt="{{ image.title }}">
</li>
{% endfor %}
Use the getUrl as I used in the above code.
I hope it will work for you.
Thanks.
If you want to get the image, Try the below code:
{% for block in entry.relatedPerson.all() %}
{% set image= block.<image-handle>.one() %}
<li>
<img src="{{ siteUrl }}<image-path>/{{ image.filename}}" alt="{{ image.filename }}">
</li>
{% endfor %}
I have been following the Grav documentation (https://learn.getgrav.org/cookbook/general-recipes#render-content-in-columns) to figure out how to do this, but haven't had much luck. The content for my page is in default.md, but I can't figure out to how place images and content into separate columns and rows.
I've included a screenshot of what I've created in HTML and CSS. Basically I want to put an image into the left column of a row, and details into the right column. See here: http://imgur.com/HuTSGw5
When I am editing the page template however, I only seem to have one "variable" (if that's the right word) controlling all the content. See my code for base.html.twig:
<div class="container">
<div class="row">
<div class="col-md-4">
{% block content %} {# thumbnail image goes here #}
{% endblock %}
</div> <!-- COLUMN END -->
<div class="col-md-8">
{% block content %} {# album details go here #}
{% endblock %}
</div> <!-- COLUMN END -->
</div> <!-- ROW END -->
How do I specify that a content block is specific for an image, and that another is specific for album details?
{% block content %} is the only block available when showing data from the .md file.
To render the data (text or images) in two or more columns as shown in the documentation, you have to split them in the .md file (with ---) and then use the twig function {% for %} in your .html.twig template to show them.
user/pages/my-2-column-page.md
(note the extra line before the ---)
---
title: ' 2 Columns Page'
---
Column one is for the image thumb
---
Here goes all the album details content.
Phasellus id eleifend risus. In dui tellus, dignissim id
viverra non, convallis sed ante. Suspendisse
---
user/themes/mytheme/templates/my-2-column-page.html.twig
(note the twig function {% for %} )
{% extends 'partials/base.html.twig' %}
{% block content %}
{% set colsize = [4, 8] %}
<div class="container">
<div class="row">
{% for key, column in page.content|split('<hr />') %}
<div class="col-md-{{ colsize[key] }}">
{{ column }}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
OR ...
Other way to do it (more simple) is to define your .html.twig template as normal (with no "for" iteration) and call the image directly:
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="{{ page.media['thumbnail.jpg'].url }}" />
</div>
<div class="col-md-8">
{{ page.content }}
</div>
</div>
</div>
{% endblock %}
The image filename must match the file copied in the page folder (user/pages/my-2-column-page/thumbnail.jpg) and just type the album detail in the .md file.
I'm trying to display the full 50 products that Shopify allows per page call, but in my search results only 10 items are displayed and the pagination links lead to the same 10 products for each page.
I've read through the documentation and even used the template from Caroline Schnapp's skeleton theme here: https://github.com/Shopify/skeleton-theme/blob/master/templates/search.liquid, I get the same results no matter what I try.
To summarise, I'd like to display 50 products and pagination links on my search results page.
Can anyone shed any light on this please?
Here's the contents of my search.liquid template:
{% paginate search.results by 50 %}
{% if search.results_count == 0 %}
<div class="search-noresults">
<h2 class="no-results">Nothing found for <span class="search-terms">{{ search.terms }}</span></h2>
<p class="search-again">try searching again</p>
</div>
{% else %}
<section class="search-grid clearfix">
<h2 class="results-for">Results for <span class="search-terms">{{ search.terms }}</span></h2>
{% for product in search.results %}
<section class="collection-grid ">
<div class="product-box" href="{{product.url}}">
<img src="{{ product.featured_image | product_img_url: 'large'}}" alt="{{ product.description | strip_html | truncate: 75 }} click for more information" />
<hr class="collection-hr"><span class="grid-title">{{product.title}}</span><br/><span class="grid-price">{{ product.price | divided_by: 100 | replace: '.',' ' | truncatewords: 1 | remove: '...' }} £</span>
</div>
</section>
{% endfor %}
</section>
{% if search.results_count > 50 %}
<div id="pagination">
{{ paginate | default_pagination }}
</div>
{% endif %}
{% endif %}
{% endpaginate %}
So it turns out that all I needed to do was to activate the shop and the pagination worked as normal, when the shop is in dev mode pagination doesn't work as expected. Hopefully this helps someone else out there as I didn't find any of that in the documentation.
I'm using Jekyll for a static site and I'm trying to generate the blog as a subdirectory/subfolder:
http://example.com/blog
In the directory structure before running jekyll, this is blog/index.html.
I tried adding pagination by adding "paginate: 5" to _config.yml, but the generated url's were of the form:
http://example.com/page2/
i.e. no "/blog". This is fixed by:
paginate_path: /blog/page/:num
in _config.yml.
But the resulting generated pages at:
http://example.com/blog/page/2/
don't use blog/index.html as their layout. They use the root index.html. What's the point in even having the paginate_path option, then?
How do I get my blog at example.com/blog, with pagination, using Jekyll?
Use the destination key in your _config.yml file to set the base path where you want the output to be published to. For example,
paginate: 5
destination: _site/blog
Note that assuming your site is setup to server its root (e.g. "http://example.com/") from "_site" jekyll won't produce and "index.html" page at that location. Everything that jekyll builds will be under the "blog" directory, but that sounds like what you are after.
I found a fix via this page Basically it involves a bit of a hack to figure out if you are on the nth page of the blog and then includes a file that pulls in you blog section.
Create a file in _includes/custom/ called pagination. In that have your pagination code
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
Now in your _layout/index.html add
{% if paginator.page != 1 %}
{% include custom/pagination %}
{% else %}
The original content of index
{% endif %}