I am trying to use asset url,
{{'Archt-Quick-Start-Guide-FR.jpg' | asset_url }}
but after saving the page its converting it to this, like encoded in URI,
%7B%7B'Archt-Quick-Start-Guide-FR.jpg'%20%7C%20asset_url%7D%7D.
Please Help!
You cannot add a liquid code in the "Page" on Shopify. It will just treat it as another html object. You can instead do the following in the Shopify -> Admin Panel -> Online Store -> Themes -> Edit HTML/CSS
Click on Add a new template under Templates
Select "Create a new template for page" and give it a name.
In this newly created template, add your code and load it into a JS variable right at the start of the page. <script>var test = '{{ 'Archt-Quick-Start-Guide-FR.jpg' | asset_url }}'</script>
This will load the link of the image into test.
Next, go to the page you are editing under Shopify -> Admin Panel -> Online Store -> Pages -> Your Page
Now use JavaScript function to load the "test" variable into the element as required.
Are you using a standard page from Online Store > Pages or are you editing a theme file?
Try this:
{{ 'Archt-Quick-Start-Guide-FR.jpg' | asset_url | img_tag }}
Related
Is it possible to load element from collection in the way that it's templating will have access to the variables from where it got loaded, like the include have?
When it is included in following way:
{{ site.blocks | where: "tag", "test" | first }}
Then the page variable is set to the collection document instead of the page that loads it.
I was trying to create dashboard using HTML template taken from SB Admin 2 - Dashboard taken from here
Also, I was following this tutorial https://shiny.rstudio.com/articles/templates.html. Before i add {{ headContent() }} and {{ bootstrapLib() }} on the head section the generated dashboard become smaller as can be seen on the picture.
I don't know why, does anyone here know? I guess it is because different version of bootstrap and js. But I am not sure how to make generated dashboard exactly like the template before.
I've been given a task of displaying files hosted on a webserver(jekyll) via a webpage using iframe. Iframe lists all the files. Though the view is not as pretty as an embedded Google Drive link.
However, there are 2 major issues with this:
The filenames are being truncated - "abc..." and on the browser I see ellipses and I'm not able to reverse this.
All the pdf files are getting downloaded as opposed to opening in a new tab which would have been possible via embedding a Gdrive link (the idea is to move files to a static folder on the web server instead of Gdrive)
I have read most articles. Even if the second issue is not solvable, I am interested in learning how to solve the first issue.
I'm able to inject my own CSS like this:
<script>
$( document ).ready(function() {
$('iframe').each(function(){
console.log("here");
function injectCSS(){
$iframe.contents().find('head').append(
$('<link/>', { rel: 'stylesheet', href: '{{ site.col_url}}/static/xyz/xyz.css', type: 'text/css' })
);
}
var $iframe = $(this);
$iframe.on('load', injectCSS);
injectCSS();
});
});
</script>
I would like to see the complete file names being listed on my webpage. I am not allowed to use a scripting language since the whole system is built in Markdown format
Set the below option on your vhost file, if you are using Apache
IndexOptions NameWidth=*
Ref: https://www.networkworld.com/article/2311687/showing-long-file-names-in-apache-directory-listings.html
Use can use the directory plugin https://github.com/sillylogger/jekyll-directory to display the files in your static folder. This gives full filenames and its better than using iframes. By default your chrome browser renders pdf and jpg images in a new tab as opposed to downloading them. Just take care of bad urls. To get the last modified date, use the gem file https://github.com/gjtorikian/jekyll-last-modified-at
Your code looks like this:
{% directory path: <provide a path to your static folder> %}
<a href="<static_path>/{{ file.name }}" datetime="{{ file.date |
date_to_xmlschema }}">{{ file.name }}</a>
{% enddirectory %}
Additionally, to get the last modified date:
Last Modified on {{ page.last_modified_at|date_to_string}}
I am using Laravel 5. In a specific Blade template, I have a link that looks like this:
{{ $category->category }}
Normally on my localhost WAMP server, I can access my main page that has this link, like this:
http://localhost:8080/myApp/laravel/public/
When you click the <a> link above, I want the link to simply go to:
http://localhost:8080/myApp/laravel/public/categories/1
Instead, it goes here:
http://localhost:8080/categories/1
If I don't include the leading "/" on categories/1. then it simply keeps adding categories/1 to the url everytime I click it. The first time it works, but the second time (and on) it of course says page not found.
What is the appropriate way to handle routing links in Laravel using the Blade templates?
Try this
{{ $category->category }}
currently I'm working on static website, so I'm using jekyll to generate it. To have a nice structure and fancy URLs, I use permalinks.
permalink: /impressum/
So for example the impressum.html is rendered to impressum/index.html. And in my HTML i can simply link to that file with
<a href="/impressum">
That works for me very well. But you know, I'm a programmer. What if I want for example to change the URL to /imprint/? Well, I can change the permalink without any problems. But what's about all the other links on the site? Yeah, sure, I can use the search & replace function of my editor to change the linked URLs and check the whole site with a site checker for broken links, but that's not the fancy way I want to go. That's why I tried to create some kind of global variables with the permalink.
_config.yml:
lnk_impressum: /impressum/
impressum.html
---
layout: layout
title: Your New Jekyll Site
permalink: {{ site.lnk_impressum }}
---
But that does not work. I get this error:
Generating... error: no implicit conversion of Hash into String. Use --trace to view backtrace
So what's wrong or is there a better way?
It doesn't seem to be possible to place Liquid tags inside the YAML Frontmatter or _config files, per this SO answer.
Something else you could try is based on the approach used by the documentation pages for Bootstrap, which uses a Page Variable they call slug that provides a unique, unchanging reference to each page.
For instance, if you'd like to place a link to your impressum.html page (for which the permalink could change), you can place this code on another page, such as index.html:
{% for mypage in site.pages %}
{% if mypage.slug == 'impressum' %}
Link to Impressum page
{% endif %}
{% endfor %}
Then, in the YAML frontmatter for each of your pages, place code similar to the following:
---
slug: impressum
permalink: /my-permalink-to-impressum/
---
To change your permalinks in the future, you would just make the change to the Page Variable permalink in each page. The URLs referenced in your other pages would be automatically updated by Jekyll, as long as the slug variable remains unchanged.