Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Use jQuery .load() with twig

Started by Muut Archive 10 years ago · 3 replies · 2037 views
10 years ago

First of all, I'm a total noob in Grav, twig and yaml.
I'm trying to convert my website into a Grav-template (for personal use). In the site I had a portfolio section in which the projects loaded on click. I did this with jQuery (that's ajax I think):

JS
('#someProject').on('click', function() {
   ('.someTarget').load('someProject.html');
});

I'd wish to have the same functionallity, but with a Grav-template, so that the client can add projects and change the content. The projects contain a lot of images so I don't think loading them al at the beginning would be a good idea.
Is there a possibility/alternative to do this with twig?
Thanks!

10 years ago

Technically you can do that same thing with Grav. Twig is not a substitute for jQuery/javascript.

As you start out, you can freely load your .html file as you're doing now, and then look at nicer solutions later down the road.

If the problem are just the images, you can load all the projects at once and then lazy load the images on demand, like using something like http://luis-almeida.github.io/unveil/

10 years ago

Thanks!
When I load a twig file with jQuery, the variables do not get rendered, they just appear as {{ some.variable}} . Is there a way to fix that?
In case there isn't, I'll work my way around by lazy loading the images.

10 years ago

You'd need to load the resulting processed file, not the Twig-template. In any regard, lazy-loading many images is good practice.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1354 9 years ago
Archive · by Muut Archive, 9 years ago
2 935 9 years ago
Archive · by Muut Archive, 9 years ago
2 4065 9 years ago
Archive · by Muut Archive, 9 years ago
1 2953 9 years ago
Archive · by Muut Archive, 9 years ago
3 1119 9 years ago