My Problem:
Hey everyone, I'm currently in the process of coding a website for Shopify and I want to animate some HTML within the website using anime.js. The website correctly locates and reads the "anime.min.js" file that I've included in the website's assets, however, it just isn't animating anything. Is it even possible to use anime.js in Shopify Liquid?
I would really appreciate it if someone could help clarify this for me.
What I've Tried:
If you know Shopify Liquid, I'm assuming you know how it code editor works as well. Like I said, I've added the "anime.min.js" file to the "Assets" folder in the template, and it's recognizing and reading that file correctly (via the code shown below) so I'm not really sure why it isn't working unless anime.js just doesn't work with Shopify Liquid for some reason.
My Code:
<!-- HTML/Liquid -->
<div class="social-media__icons">
{% for block in section.blocks %}
<img src="{{block.settings.icon | img_url:'x22'}}">
{% endfor %}
</div>
<!-- JS -->
<script src="{{ 'anime.min.js' | asset_url }}"></script>
<script>
anime({
targets: '.social-media__icon',
duration: 1000,
delay: anime.stagger(200, {start: 400}),
translateY: [-500, 0],
easing: 'easeOutCubic'
});
</script>
Related
How to set size of image in jekyll markdown?
![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }})
I'm using jekyll minima. Using
![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }} =250x)
from Changing image size in Markdown doesn't work. If possible, I would like to know how to rotate image as well.
Jekyll seems to accept attribute lists. You can set the size of an image as follows:
{: width="250" }
(or use height="250"). The property value is in pixels, and should (according to the HTML spec) not have explicit units.
Markdown doesn't have built in support for image-sizes, so the only real solution is to use a little HTML inside your markdown. Given that, my jekyll-image-size plugin can do the resizing you need without any CSS.
Example:
<!-- template -->
{{ /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' }}
<!-- output -->
<a href="/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
(Where YYY is the actual, proportionally scaled height of your image.)
If you need the absolute_url filter:
<!-- template -->
<a
href={{ "/assets/steam-fish-1.jpeg" | absolute_url }}
{{ /assets/steam-fish-1.jpeg:props?width=250 }}
alt='steam-fish-1'
>
<!-- output -->
<a href="http://test.com/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
For rotating your images, would it make sense to just rotate the image file itself?
If there is no way to include a size/rotation attribute to a Jekyll generated HTML code (as illustrated here, see the comments)... there is always the CSS route.
See "Resize image proportionally with CSS?": you could add a CSS stylesheet to set the size of your picture. Or even rotate it.
With jekyll-image-size, should use
<!-- template -->
{% imagesize /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' %}
<!-- output -->
<a href="assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
Like this
{:width="100%"}
I'm making a jekyll blog, and this is the link.
https://jinmc.github.io/programmingTips/
You can also look at the code from here : https://github.com/jinmc/programmingTips
Right now I just finished making the sidebars,
and I know how it works, and implemented on just one keyword csharp.
Rest of it doesn't work.
I implemented this by making a csharp.html file and implementing this code on it.
---
layout: default
sidebar: sidebar_nav
---
<h1>C Sharp</h1>
<ul>
{% for posts in site.categories.csharp %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ posts.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
</h3>
<p>{{posts.meta}}</p>
</li>
{% endfor %}
</ul>
something like this.
I can make every html regarding the sidebar navigations but I'm starting to wonder
if this is good practice as the content inside it would be almost similar. Plus, I'll have to make every other html files every time I make a new category. But still, can't think of anything that could automate this.
Thanks in advance!
I would recommend writing a JavaScript method that listens for clicks on the navbar elements and selectively hiding or showing the relevant post links.
Modify _layouts/home.html so that it renders a ul containing all post links and a ul for each category that contains all the post links for that category. Add ids to these ul element that identify the category or 'all'. Use jQuery to hide all the category specific ul elements on page load. Use another script in the _layouts/default.html defining a global var initialized to 'all', a click listener that listens for which the different category clicks in the navbar and hides the previously shown ul and shows the desired ul by applying css styles. You can also change text on the page to show what the current category is.
I'm sort of updating my Octopress website, and decided to start from a clean install and add my customizations. I'm noticing a buggy behavior that was not there before in how Octopress parses html tags in particular situations.
An example. In the head section, I have the following commented out line:
<!--<link href="{{ root_url }}/favicon.png" rel="icon"> -->
This should be a perfectly valid commented out line, and works perfectly except when there's another html tag within the comment (i.e. <link ...>). In the above case, Octopress replaces the -- at the end of the comment with –, the HTML code for en-dash, with the result that the comment never actually ends when it should.
I found a workaround for this case by using <--> for closing the comment tag.
This is also happening in another instance, and I need help with this one. A few of my blog titles have an <em> in them, so that when Octopress creates an html for it, the result should be, for example:
My Title With <em>Emphasized</em> Text
However, once again, since there's a nested tag here, the actual result is the following:
<a href="/blog/link/to/post" title="My Title With <em>Emphasized</em> Text”>My Title With <em>Emphasized</em> Text</a>
i.e., the closing " at the end of the title is replaced with ”, the HTML code for ", with disastrous results.
I can't find a solution or a workaround for this... help!
I found a bug report here, but there doesn't seem to be any activity about this.
https://github.com/imathis/octopress/issues/1662
Once again, I should emphasize that this is a bug in a more recent build of Octopress (or its dependencies), and was not present in an earlier version that I have been using.
Help! :)
OK, found a solution!
Find the html layout file for your post type, usually here: /source/_layouts/post.html, and find this section:
<p class="meta">
{% if page.previous.url %}
<a class="basic-alignment left" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">« {{page.previous.title}}</a>
{% endif %}
{% if page.next.url %}
<a class="basic-alignment right" href="{{page.next.url}}" title="Next Post: {{page.next.title}}">{{page.next.title}} »</a>
{% endif %}
</p>
Add | strip_html after the two instances of title, as follows:
title="Previous Post: {{page.previous.title | strip_html}}
and
title="Next Post: {{page.next.title | strip_html}}"
And that's it! Now there's no html inside the title quote, and no issues!
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I am setting up a simple CMS and I am using a Textarea (Froala to be exact) to render the HTML content of each page that's generated via database. The textarea can display the html with no problems. However, the blade template isn't executing. It's just in plain text. How can I make sure blade executes correctly? I need it mainly for links.
For an example. I have a form element written in blade:
{{ Form::text('name')}}
It should display like so on my page:
<input name="name" type="text">
However, it's just displaying like this:
{{ Form::text('name')}}
EDIT: here is my pages.blade.php file if they may help with figuring it out.
#extends('layouts.main')
#section('main_content')
<section class="mainContent">
<div class="row">
<h1 title="{{ $pages->title }}">{{ $pages->title }}</h1>
{{ $pages->body }}
</div>
</section>
#stop
There is no out-of-the-box way to do that. Blade templates are compiled only from files.
But you can take look at
Flynsarmy/laravel-db-blade-compiler if you want to compile Blade from Eloquent model
or
TerrePorter/StringBladeCompiler if you want to compile Blade from strings.