SOLVED Twig & Slick Slideshow
-
-
- Bridget
- Rocketeer
- Posts: 98
- Thanks: 4
-
While TWIG is great sometimes modifying php code to it is frustrating --
So here's the issue:
Im trying to add the slick slideshow to my ACF using the Gantry theme for wordpress.
www.quickcleancode.com/how-to-create-an-...-with-acf-and-slick/
The one issue I"m having is using the proper twig code to call the slideshow in my views/single.php
Specifically its this code:
$('.slideshow').slick();
WHile I tried the php to twig converter -- nothing changes. And in fact my page won't render as it does not like this code.
Below I've used these items to call (these work)
$context .= ' - ' . $post->title();
$context["acf"] = get_field_objects($data["post"]->ID);
But can't quite get what I need to call so that my slick slideshow renders for:
$('.slideshow').slick();
Any help would be great!
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22291
- Thanks: 3227
- messin' with stuff
-
That's JS, not PHP
try it like:
(function($) { $('.slideshow').slick(); })(jQuery);
If that doesn't work check your browser's console for errors:
Chrome: Settings > More Tools > Developer Tools > Console
Mozilla: Settings > Developer > Web Console - Last Edit: 7 years 1 month ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Bridget
- Rocketeer
- Posts: 98
- Thanks: 4
-
Thanks for the response! However with this code I get this error:
www.awesomescreenshot.com/image/3231412/...7ac25f2d1c53be73bf21
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22291
- Thanks: 3227
- messin' with stuff
- you can't stick JS in a PHP file.... I thought you were editing a TWIG file
- Last Edit: 7 years 1 month ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Bridget
- Rocketeer
- Posts: 98
- Thanks: 4
-
Sorry thats my bad. I realize the real issue isn't TWIG but TIMBER. Timber does not like this code for some reason:
$('.slideshow').slick();
Basically its a class reference (I put in my single-template.php to call up JS in my twig template file (single-cameras.html.twig) when it's rendered.
I get the error in the Timber php file (use Timber\Timber;)
Sorry still trying to sort through timber and twig.
-
-
-
- Bridget
- Rocketeer
- Posts: 98
- Thanks: 4
-
I reference using this in my twig file- this SORT of works as my images show BUT I can't put in the $('.slideshow').slick(); in the timber php file that would call on the JS file. Timber gives me the error.
<div class="slideshow">
{% for image in post.get_field('image_gallery') %}
<img src="{{ TimberImage(image) }}" />
{% endfor %}</div> - Last Edit: 7 years 1 month ago by Bridget.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22291
- Thanks: 3227
- messin' with stuff
-
It's not a PHP class reference... it's a jQuery function that initializes Slick
You should not have the Timber plugin installed separately anymore... we package it in Gantry now... Timber is just TWIG for WordPress is all
//Loading the Timber plugin seperately could cause issues as it's likely a newer version than Gantry wants
you can stick that init in a Custom HTML particle, or in a TWIG file, or on your Page Settings tab ... in all of those instances it needs to be inside <script> </script> tags (except the areas on the Page Settings tab we tell you not to use <script> tags because we automatically insert them)
The ONLY place you put that NOT inside a <script> tag is in a JS file
kenwheeler.github.io/slick/#getting-started
Initialize your slider in your script file or an inline script tag - Last Edit: 7 years 1 month ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22291
- Thanks: 3227
- messin' with stuff
-
I think you're just overcomplicating this...
if it's me, I'd just load the JS and CSS files via the Page Settings > Assets
then I'd stick EVERYTHING else in a Custom HTML Particle
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div> <script> (function($) { $('.your-class').slick(); })(jQuery); </script>
- Last Edit: 7 years 1 month ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22291
- Thanks: 3227
- messin' with stuff
- perhaps I was hasty... but the above should work, be proof of concept, then you can go back and do your fancy TWIG stuff to dynamically pull and loop images
-
The following users have thanked you: Bridget
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Bridget
- Rocketeer
- Posts: 98
- Thanks: 4
-
OK THANKS!!! I forgot that Gantry does all that on backend. I got the slidehow to work.
Ok so for others who are trying to Use Gantry Advanced Custom Fields and Wordpress here is a step by step. Thanks to Matt for helping out!!
This is based off of these articles:
www.quickcleancode.com/how-to-create-an-...-with-acf-and-slick/
timber.github.io/docs/guides/acf-cookbook/
kenwheeler.github.io/slick/
Assumptions:
You've already loaded Advanced Custom Fields Pro in your WP install and created the Image Gallery Field.
Step by Step:
1. As Matt stated above go to "Page Settings" in your Gantry Theme in your WP backend and place the Css Asset and the Javascript - its the slick CSS and javascript links
2. In your content.html.twig file (this is for single blog posts) - Note I created a Custom Post Type for single-cameras so for me it was content-single-cameras.html.twig Place this code:
<div class="slideshow"> {% for image in post.get_field('image_gallery') %} <img src="{{ TimberImage(image) }}" /> {% endfor %}</div> <script> (function($) { $('.slideshow').slick(); })(jQuery); </script>
Note 3 things:
1. 'image_gallery' is the field name you use in ACF
2. .slideshow referenced in script is your class name
3. If you want different type of functions for your slideshow modify the code using this as a reference: kenwheeler.github.io/slick/ - Last Edit: 7 years 1 month ago by Bridget.
-
Time to create page: 0.102 seconds