I am using Grav Cms w/materilaize.css. For image capition I need the following html syntax in materialize:
<img class="materialboxed"
data-caption="A picture of a way with a group of trees in a park"
src="https://lorempixel.com/800/400/nature/4"
>
In twig I use the following in general:
{{ image.html('', '', 'materialboxed responsive-img card') }}
But I do not know how can I add the data-caption element to this line?
The best route would be to use the url function instead of html, as it provides more flexibility in modifying the actual element.
<img src="{{ image.src }}"
class="materialboxed responsive-img card"
data-caption="A picture of a way with a group of trees in a park"
>
Related
Here is the source code of the website with its index.md and config.yml.
The problem
The number of tools (.md files) in _wadcoms directory keeps increasing over time, so I want the main page to be paginated in order to better navigate among plenty of them.
I tried several blogs and followed them all step by step individually, but unfortunately, I couldn't document each one of them here, still, my Jekyll site won't render that pagination.
Just now I found out that Pagination only works within HTML files, despite the solutions and workarounds suggested in that thread, I am unable to follow it up with my website. It renders the main page from the index.md file, I am not able to convert it to index.html which would help my site paginate.
What I wanted
I wanted to have ellipses to paginated the site using Jekyll-Paginate-v2, just like in the answer thread. I am absolutely out of ideas and I have no clue how to proceed with rendering a successful pagination in this case.
NOTE: Those files under _wadcoms are individual webpages, they increase in number over time, that's why I needed pagination on the main site. Imagine 200 of these tools/commands, that would be very difficult to navigate.
Thanks for your help.
Following my comment above, I have tested the plugin.
The result is not a numbered pagination yet but this should be also possible. Note that I converted the paragraphs, logo, and links in the index to HTML tags (p, img and a) but this worked OK:
I have not tested the search ... I hope that this is a trace and helps a bit. You can find my complete test code I comment below in a branch/PR in your repo: https://github.com/WADComs/WADComs.github.io/pull/21
I have replaced the current code in bin_table.html with
<!-- not sure about the reverse, the plugin offers this option, too! -->
{% assign sites = paginator.wadcoms | reverse %}
{% for file in sites %}
<tr>
<td>
<div class="bin-name">
<div style="flex: 0 0 97%"><a href="{{ file.url }}" id="{{ file.url }}"
style="text-decoration: none; color: DarkGreen;">{{ file.command | escape }}</a></div>
<div style="flex: 1;"><a href="javascript:void(0)" onClick="copyFunction('{{ file.url }}')"><img
src="/assets/copy-button.svg" alt="Copy" title="Copy" id="{{ file.url }}_img" /></a>
</div>
</div>
<p style="margin-top: -12px;">{% include filter_list.html bin=file %}</p>
</td>
</tr>
{% endfor %}
Previous page | Next page
{{ paginator.page }}
{{ paginator.total_pages | inspect }}
{% for page in paginator.total_pages %}
{{ page }}
{% endfor %}
I have added these lines to the _config.yml file (as an example config):
paginate:
collection: wadcoms
per_page: 10 # maximum number of items per page
limit: false # Maximum number of pages to paginate (false for unlimited)
permalink: /page:num/ # pagination path (relative to template page)
title_suffix: " - page :num" # Append to template's page title
category: '' # Paginate items in this category
categories: [] # Paginate items in any of these categories
tag: '' # Paginate items tagged with this tag
tags: [] # Paginate items tagged with any of these tags
reversed: true # Reverse the order of the documents
I am trying to build a website with Hugo. I am having some trouble getting nested menus set up.
I am using the Tokiwa theme for this project.
here is a link to my repo.
On the main page of the site I am trying to create menus that slide down to show subfolders, here is an example from the imperial-library site to show what I mean. You can click on “game books” and then a list opens up that shows all of the available topics for that option. Ex (All, Arena, …) If you click on one of the topics it takes you to a page with a list of all of the entries and a short description of each one. You can then click on the entry to view that post.
In my project my directory is structured
content -> writing (Writing has subfolders poem and stories)
So on the home page I would like for someone to be able to click on “writing” then it would slide down to reveal “poems” and “stories”. You could then click on either one of those to view a list page formatted like
description of poem 1 - link to poem 1
description of poem 2 - link to poem 2
description of poem 3 - link to poem 3
I would also like to add this feature to other topics than only writing.
My config.toml file has the following
sectionPagesMenu = "main"
[menu]
[[menu.main]]
identifier = "writing"
name = "writing"
url = "/writing"
weight = 1
[[menu.main]]
identifier = "post"
name = "post"
url = "/post"
weight = 2
[[menu.main]]
identifier = "poems"
name = "poems"
url = "/category/poems"
parent = "writing"
weight = 1
[[menu.main]]
identifier = "stories"
name = "stories"
url = "/category/stories"
parent = "writing"
weight = 2
in my layouts/index.html
{{ define "menu-item" }}
{{ $page := .page }}
{{ with .entry }}
{{ if .HasChildren }}
<li class="{{ if $page.HasMenuCurrent "main" . }}active{{ end }}">
{{ .Name }}
<ul class="sub-menu">
{{ range .Children }}
{{ template "menu-item" (dict "entry" . "page" $page) }}
{{ end }}
</ul>
</li>
{{ else }}
<li class="{{ if $page.IsMenuCurrent "main" . }}active{{ end }}">
{{ .Name }}
</li>
{{ end }}
{{ end }}
{{ end }}
<ul>
{{ $page := . }}
{{ range .Site.Menus.main }}
{{ template "menu-item" (dict "entry" . "page" $page) }}
{{ end }}
</ul>
I also tried following this example from the hugo docs
Currently my site displays with the theme and when I click on a link the url seems correct ex writing/poems/poem1.
However, the folders are not displaying correctly.
I have posted this as well on the hugo forums and was unable to quite get my question answered. I browsed through many of the topics on "nesting menus" on the hugo forums and was still unable to exactly figure this out.
Thank you
I asked about this on the Tokiwa github.
The solution was to
Put custom.css and custom.js into static/lib/ folder, and add two lines in baseof.html:
<link rel="stylesheet" href='{{"lib/custom.css"|absURL}}' crossorigin="anonymous">
<script src='{{"lib/custom.js"|absURL}}' crossorigin="anonymous"></script>
Before </head> tag.
I wanna use ez_image_alias() function but I dunno what values I have to put in.
Do you have some examples of how to use this function using Twig ?
ez_image_alias Twig function accepts three parameters:
field you wish to render
version info of the content where the field is located
variant name
Starting from your content which is available in a content variable in your template, you would use ez_image_alias function like this:
{% set variation = ez_image_alias(
ez_field(content, 'image'),
content.versionInfo,
'large')
%}
variation variable will now hold an instance of eZ\Publish\SPI\Variation\Values\ImageVariation object which you can use to render the image:
<img src="{{ asset(variation.uri) }}" />
I'm having a hard time taking my json object and using the name and values to make a link. I've tried separate arrays as well, but I've decided it'd be easier if I set the object as {title:url} and when I use this code:
ul
each url, title in news
li= title
li= url
it returns my titles and urls like so
These are the arguments against net neutrality — and why they’re
wrong
https : //techcrunch .
com/2017/05/19/these-are-the-arguments-against-net-neutrality-and-why-theyre-wrong/
The bizarre naming trends that modern startups follow
https: //techcrunch .
com/2017/05/20/the-bizarre-naming-trends-that-modern-startups-follow/
Salesforce marches steadily toward $10B run rate goal
https :// techcrunch .
com/2017/05/19/salesforce-marches-steadily-toward-10b-run-rate-goal/
Uber threatened to fire engineer at center of Waymo trade secret
lawsuit
https :
//techcrunch.com/2017/05/19/uber-waymo-anthony-levandowski-termination-threat/
but when I try to make links with this code
each url, title in news
a(href= url) title
I get this:
titletitletitletitle
the links work, but it won't iterate the title...
any tips with this issue?
I decided to switch to an array and it seems like you need a = after (href= link) like this:
each articles in news
p
a(href = articles.url)= articles.title
li= articles.description
The issue is actually that there must be an equal sign (you were right about that) but there can be no space between the assignee (left side) and that equal sign. For example, this works:
ul
each url, title in {'/a': 'Title A', '/b': 'Title B'}
li
a(href=url)= title
... and will render:
<ul>
<li>
<a href='/a'>Title A</a>
</li>
<li>
<a href='/b'>Title B</a>
</li>
</ul>
If you omit the equals sign or leave a space like this:
ul
each url, title in {'/a': 'Title A', '/b': 'Title B'}
li
a(href=url) = title
... you'll get:
<ul>
<li>
<a href='/a'>title</a>
</li>
<li>
<a href='/b'>title</a>
</li>
</ul>
I have a transformation, used with a repeater, for a slider. All is working well. I have a slide caption, that isn't required. What I'm struggling with is a conditional statement where the caption tag doesn't show.
Here's my transformation:
<section class="imageSlide">
<figure role="group">
<img src="{% SlideImage %}" alt="{% SlideAlt %}">
<figcaption><p>{% SlideCaption %}</p></figcaption>
</figure>
</section>
What I'm hoping to do is not render the figcaption if there is no SlideCaption. SlideCaption isn't a required item. I had though if using jquery to change the display type of the <p></p> tags were empty, but want to avoid a lot of DOM manipulation.
I know that the syntax is something like this, but I haven't found a good example I can use as a base solution.
{% if(....) %}
Something like this should work. Didn't test it, so may need some tweaks.
{% IfEmpty(SlideCaption, "","<figcaption><p>" + SlideCaption + "</p></figcaption> ") %}
Another example for future reference if you dont want to be limited to using IfEmpty
{% if(SlideCaption != "" && SlideCaption != null) { return "<figcaption><p>" + SlideCaption + "</p></figcaption>" } %}