I would like to set up a variable to share across all posts to set up the expected location of images so I can do this:
Which I eventually want to emit:
{{site.baseurl}}/images/posts/{{page.date | date: '%Y' }}
I've tried a bunch of things and cant seem to work out how to get anything to show up on the post object (for all pages).
Things I've tried (Ive ignored the variables component to try to make it simpler for now):
in post.html layout:
---
layout: default
b: 'bananas'
---
{% assign a = 'apples' %}
And then in a post:
{{a}}{{b}}
{{post.a}}{{post.b}}
None of these options seem to do anything. Im guessing im putting it in the wrong place or doing it wrong but im not too sure where I should be putting post-scoped variables.
Related
I currently have .pug code that looks like this:
a.item
.ui.green.horizontal.label something
.ui.basic.grey.label
| {{ variable1 }} descrip1
.ui.basic.green.label
| {{ variable2 }} descrip2
.ui.basic.grey.label
| {{ variable3 }} descrip3
I would like to make the colors of the individual ui elements dynamic based on the values in the variables. So for example, if variable1 > 30, the ui element would be
ui.basic.green.label
whereas if variable1 < 10, the ui element would be
ui.basic.red.label
Is there a way to do this in .pug? I just get multiple divs when I try and make each component dynamic. As a note, I tried
ui.basic.{{color_variable}}.label
or something to that effect, but obviously this is incorrect syntax and it didn't compile properly.
I'm very new to HTML and .pug and any help is appreciated!
EDIT: The solution that worked for me (with Sean's help) was escaping the character using the # key.
.ui(class= "basic #{color_variable} label")
or
.ui.basic.label(class= "#{color_variable}")
EDIT2: Apparently the above is deprecated, please look at Sean's answer below.
It's possible when using the standard attribute syntax for classes instead of the class literal syntax (or when combining the two).
Here's an example of how to do that with your markup.
This Pug—
.ui.basic.label(class= color)
—will compile to this HTML—
<div class="ui basic label green"></div>
—if the value of the color Pug variable is "green".
So I am trying to work on a OctoberCMS theme for my own project. The goal is to have the whole navigation header in a different color, based on the page the user is on. Seems pretty simple but I was after hours of trying still not able to manage.
So my idea was to add a different css class based on the page the user is on. For https://example.com/foo/bar a class like this should be showing: navbar-foo
I found OctoberCMS Twig has a option called this.param.tab which should return exactly "foo", so I thought of this:
{% if this.param.tab == 'foo' %}
<nav class="navbar-foo">
{% if this.param.tab == 'bar' %}
<nav class="navbar-bar">
And so on. The thing is, that would take up a lot of space and I didn't think it was that clean of a way. Also the class would need to be on multiple elements which would kind of make it a bit unreadable. So i thought I'll just solve it like this:
{% set slug = this.param.tab %}
<nav class="navbar-{ slug }">
<div class="navbar-menu-{ slug }
This didn't work. First I thought it didn't work because I didn't insert the twig right for it to be counted as a string in the html. The other thing I thought I did wrong was that this.param.tab returns an Array and not a string. So i tried different ideas to insert it into the class attribute and change it from array to string when I realised, that this.param.tab was empty.So I tried wrapping it into a div and just display it like that. But that just turned out empty. I tried to {{ dump(this.param.tab) }} which also turned out empty.
So it seemed to me that this.param.tabactually did not return anything. As the code is in the header.htm I thought maybe it needed to be in the main called file, as the header.htm is just a partial that gets inserted. So I tried the layout.htm and I tried home.htm (layout is the file, that defines the layout of the page, where the partials/page are inserted and home.htm is the file that actually contains the slug and the other code of the page the user is visiting). But that didn't do anything either.
So i'm not entirely sure what is wrong here. Does this.param.tab even actually work? or is there a better way I should do this?
If you need additional information ask, but I thought it won't matter because it is just a basic October setup and the theme is just twig, javascript and scss.
if you just need url for your condition you can do like this
{% set slug = this.page.settings.url|replace({'/': '-'} %}
<nav class="navbar{{ slug }}">
<div class="navbar-menu{{ slug }}
Now if you set your url = "/foo/bar" your class name will be navbar-foo-bar, if you set your url = "/test" your class name will be navbar-test, if you set your url = "/bla/ok/test" your class name will be navbar-bla-ok-test.
with params
you need to set your url to => /foo/:tab and then you can get tab value in to {{ this.param.tab }}
so once you set url like that then you can get values like this
if you use url http://example.com/foo/bar -> {{ this.param.tab }} will be foo
<nav class="navbar-{{ this.param.tab }}"> -> will be -> <nav class="navbar-foo">
if you use url http://example.com/foo/test -> {{ this.param.tab }} will be test
<nav class="navbar-{{ this.param.tab }}"> -> will be -> <nav class="navbar-test">
if any doubts please comment.
Hi ,
I'm working on a project with Angular /Jhipster. I have currently a problem with the input Forms,
In fact, I created an Input Form with Type="TIME". It works on my browser perfectly for example (12:24) but in other browsers, it's displayed in another form like (12:24 AM) or in some others its displayed like a normal string and not time.
How can I fix it, I want it to be displayed in all other browsers like mine.
<input id="timeVar" type="time" name="usr_time" value="09:36"
(change)="setDefValue($event,'usr_time')" required pattern="[0-9]{2}:[0-9]{2}">
Thanks !
I am not really sure if there is any solution for that. I see, you also tried with pattern. Other alternative if you are willing to try, then search for time-picker online. Maybe this should help and i think it will make standardize time pattern in all browsers.
If you are using angular project, you can use a Angular DatePipe. This is the easiest way to do this without creating your own solution.
Example : {{valueDate | date: 'dd/MM/yyyy'}} or {{ dateObj | date }}.
You can choose your output. Look into documentation => example from doc.
{{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }} // output is '9:43 PM'
{{ dateObj | date:'mm:ss' }} // output is '43:11'`
Angular doc to DatePipe
I'm trying to go through a basic vue tutorial. Recently I must have changed something that is stopping anything in the vue.js from rendering on my page and I can't seem to find out why. Example: instead of displaying the value of data.product, it displays {{ Product }}. Thanks in advance for any help!Here's a link to the project repo on gitlab: project link
I'm quite sure you will see an Uncaught ReferenceError if you open the DevTools of your browser. Because in your main.js file you reference two times to non-existent variables. In your variants-array you are using Green and Blue for your variantColor as variables but non of them is defined. From context I guess you just want to display these two values as string at your page, so you have to assign a string to your variantColor variable by adding single or double quotes.
Inside your main.js change your variant array to this:
...
variants: [
{
variantId: 2234,
variantColor: 'Green'
},
{
variantId: 2235,
variantColor: 'Blue'
}
]
...
I'm using Jekyll to build a portfolio showcasing my design work. I'm getting confused on whether I should use a 'data' file (yml) and loop through content on my templates or use 'collections'.
My content is structured like this:
Homepage:
Featured Item
Client Hero 1
Client Hero 2
Client Hero 3
Client Hero 4
Client Hero 5
All of these link to their respective 'Client' page where i'll have images as jpgs in the same format for all case studies.
I'm confused on how to best use data, collections, etc to build out my site while keeping updating as efficient as possible.
My current solution uses _data/projects.yml where i have defined for 5 clients:
category: Pitch
description: "Lorem Ipsum Dolar Erat"
title: "Client John Smith"
shortname: "john-smith"
publish: false
featured: true
All of this is looped through and featured on the homepage. Now, I can create each post myself and add content manually but i believe there is a better way. How can I use collections and/or multiple individual project data files to best address this?
My idea situation would be defining content in yml or data files for each individual client and having 10 images, numbered 1 to 10 automatically brought in from /client name/ into a client layout.
collection are beta, so, not production ready. Just don't use them as they can break without notice.
data are not creating pages, an if you want to refer to data file from a page/post, you have to loop over to get a match between site.data.client and page.client or post.client. This is an option but you will have datas in page/post and in data files. all over the place.
creating a page/post with front-matter custom vars ensure that you get all datas in same place. And you can easily loop over page/post variables to get things done.
I prefer #3 and in any client/clientName.html I personally do :
---
category: Pitch
description: "Lorem Ipsum Dolar Erat"
title: "Client John Smith"
shortname: "john-smith"
publish: false
featured: true
img:
- img-02.jpg
- img-03.jpg
---
{% include _client.html %}
That's it : all in the same place.
And on the home page you can loop with :
{% for page in site.pages %}
{% if page.category == 'Pitch' and page.featured = 'true' %}
And also loop over page/post.img
The idea is to get all in the same place. But it's really up to you.
Happy Jekyll !