I am using Shopify to develop my e-commerce site and I am a little confused about assets.
Do I just dump all my JavaScript, css and images in the assets folder or can I have sub folders for each of them inside the assets folder?
Do I need to end every file name in .liquid?
If I can make subfolders would I use a relative path like this?
{{ 'css/default.css' | asset_url | stylesheet_tag }}
You just upload all assets (images, CSS, JS, or any other file pertaining to the theme of your website) into the assets folder. You then just reference it by the filename.
Sub-folders are not possible at this time, but it's something I think a lot of Shopify customers would appreciate. I personally like a clean folder structure.
CSS:
{{ 'styles.css' | asset_url | stylesheet_tag }}
JS:
{{ 'modernizr.min.js' | asset_url | script_tag }}
Referencing images or other assets in the CSS:
{{ 'background.jpg' | asset_url }}
div#myDIV {
background: url({{ 'background.jpg' | asset_url }}) center center no-repeat;
}
Related
I'm trying to build a site with jekyll. I managed to make math work and upload some files. Now the overall distribution of content is not optimal.
I get a link to "HEAD" that lists a series of updates of Jekyll. I would like to get rid of that.
The main url redirects to some blog entries while you have to click on "About" in order to go to some general information about me. I would like to do it in the opposite way, i.e. having the about section shown in the main url of the page https://rjraya.github.io/ and the blog in some derived url like https://rjraya.github.io/blog
Here are the sources of the page. How can I do this simple changes? I understand that I'm using the Minima template.
Re: HEAD
I think the "HEAD" is coming from the History.markdown file. It is strange that the "HEAD" does not show up in a local jekyll serve development environment. I suspect the code below is picking up History.markdown in jekyll, along with about.md when rendering header.html.
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L20-L27
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
RE: Page Title URL Computational reflections
Change the href from / to /blog in this line
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L7
<a class="site-title" rel="author" href="{{ "/blog" | relative_url }}">{{ site.title | escape }}</a>
RE: About URL
Remove the permalink : /about/ from the about.md page. The about.md will be come the homepage (e.g. /) in the next step.
https://github.com/rjraya/rjraya.github.io/blob/gh-pages/about.md
RE: Show about.md information on homepage rjraya.github.io and show _posts markdown files under rjraya.github.io/blog
Let jekyll use the default behavior of assigning permalinks based on the markdown filename.
Rename index.md to blog.md. This will move the list of _posts files from / to /blog.
Rename about.md to index.md. This will move the content of about.md from /about to /.
I usually put these below code in order to do additional styling for my product page. But I am looking for a way where I would like to link CSS style sheet in the product page and do the CSS designing in a different directory, example: "assets/custom.css".
So how do I link the below styles made under .
<style>
.checkmarks li {
list-style-type: none;
background: url("https://i.imgur.com/FqEWdiJ.png") 0px 5px no-repeat;
background-size: 20px;
padding-left: 30px;
line-height: 200%;
}
</style>
<ul class="checkmarks">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
If you have a file in the assets folder, you can access it using the asset_url filter in Liquid. (Reference: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url)
If you create your stylesheet as assets/custom.css you can get the URL using:
{{ 'custom.css' | asset_url }}
Since it's a stylesheet, you can add on the stylesheet_tag filter to also have Shopify automatically make it into an appropriate HTML tag for you:
{{ 'custom.css' | asset_url | stylesheet_tag }}
One further possible improvement would be to make your stylesheet a scss file rather than a standard css file. This allows you to use some fancy features that help keep longer CSS files more readable/maintainable. Additionally, Shopify will minify a scss file when it compiles everything into a final css file - which means the file size will be slightly smaller because all of the whitespace gets stripped out. If you decide to do this, the compiled (browser-friendly) version of the file is accessed as <filename>.scss.css - so custom.scss could be put in as:
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
Finally, if you want this file to only appear on your product pages, you can either:
Place this code inside your templates/product.liquid file, or
Place this code in the layout/theme.liquid file, wrapped in a simple template check to see if we are on a product page:
{% if template.name == 'product' %}
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
{% endif %}
I can not seem to get Jekyll to recognize that a collection exists!
I have my folder structure like so
_posts
_includes
_layouts
_sass
_site
_portfolio
assets
index.html
_portfolio is the collection
I have it in my _config.yml file as so
colletions:
portfolio:
output: true
And I'm trying to show it in a list here (this snippet is from my default layout which is being used in my index.html)
{% for item in site.portfolio %}
<a href="{{ item.url | relative_url }}" class="portfolio-item-link">
<div class="portfolio-item" style="background: url('{{ site.url }}/assets/img/{{ item.image }}'); background-size: cover; background-position: center;">
<h1 class="portfolio-item-title">{{ item.title }}</h1>
</div>
</a>
{% endfor %}
The problem is Jekyll isn't even adding anything to the collection! If I do {{ site.portfolio | inspect }} it returns nil. I've also tried generating the site on my Ubuntu system (my current system is windows). If anyone has any ideas I'd really appreciate it!
So I misspelled "collections" in my _config.yml file. Don't do that. It works now.
I have the below folder structure in my Jekyll site:
...
_machine-learning
|- my-first-post.md
|- index.html
...
I wanted to arrange my site, such that when someone visits http://example.com/machine-learning/, they can see all of the collection pages neatly listed.
To do that, I added the following to my index.html:
<h1 class="page-heading">Machine Learning</h1>
<ul class="post-list">
{% for item in site.machine-learning %}
{{ item.title }}
{% endfor %}
</ul>
This works fine, but the only issue is that it displays my index.html in there as well, making everything look like a mess.
Am I doing something wrong here? How do I iterate through my collection, skipping over index?
I just changed the folder structure, moving the index.html file from inside the machine-learning/ collection to the root folder as machine-learning.html. The URL remains the same (example.com/machine-learning) and it doesn't show up in the site.machine-learning list.
Before:
...
_machine-learning
|- my-first-post.md
|- index.html
...
After:
...
machine-learning.html
_machine-learning
|- my-first-post.md
...
Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}
It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!