Montage Particle - Freebie by MrT
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
A number of members have asked me about having the ability to read and display images from a folder so I thought I'd come up with something and share it. I've called this particle "Montage" and here is an example of what you get by using it (and yes it is fully responsive and yes it uses lightcase).
This image is hidden for guests.
Please log in or register to see it.
I've use a Jquery program called "tj Gallery" - I did not write this program and it is freely available to all.
The instructions below are for Joomla(look for the equivalent locations in GRAV or Wordpress here ). - but it also works in GRAV and Wordpress too.
The first thing to understand is that you can't read the contents of a directory directly in TWIG. So, I've created a little helper class call "dir_list" which can be used in a TWIG file. So the first thing we need to do is make that class available to TWIG via Gantry...
1. Extract the "montage" ZIP file attached then open the "add_to_bottom_of_theme_yaml.txt" file and copy the contents. Then go to your /templates/TEMPLATENAME/includes/theme.php file and add those lines you copied to the bottom of that file. Note any template update will overwrite this file again so keep a backup - unfortunately there is no way of doing an override for this in Gantry 5 at present.
Next we need to add the helper class to the template.
2. From the ZIP file copy dir_List.php to /templates/TEMPLATENAME/custom/includes (note you may need to create this folder)
Now we need to get TJ Gallery minified jQuery program and add that to the template.
3. Go to https://www.jqueryscript.net/gallery/Responsive-Justified-Gallery-jQuery-TJ-gallery.html and click on the download button to download the ZIP archive. copy the "jquery-tjgallery.min.js" from the "src" directory and put it in /templates/TEMPLATENAME/custom/js
Next we need to add the montage particle itself to the template.
4. From the ZIP file copy montage.yaml and montage.html.twig to /templates/TEMPLATENAME/custom/particles (note you may need to create this folder)
So, now we're ready to actually use the particle.
5. Drag and drop the montage particle on to the layout of your outline and click on the settings cog in the particle.
This image is hidden for guests.
Please log in or register to see it.
Directory - Make sure that you set the directory to scan for images correctly - the path is relative to the root of your site. so it defaults to the images path of your joomla installation.
Margin - the margin around the image
Highlight Color - when hovering over the images the color of the inset box shadow
Row Minimum Height - The minimum height you want a row to be in your montage. Note that if you images are actually less than this height they will be scaled up (so you should avoid that).
That's it!
Enjoy!
Regards, Mark. - Last Edit: 4 years 4 months ago by MrT.
-
The following users have thanked you: Joe Halleck, David Goode, Trevor Smith, Henning, Pierpaolo Marcetti, D.Shelton, jooru, Matt, Javier San Felipe Larrea, Ron Miller
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Pierpaolo Marcetti
- Jr. Rocketeer
- Posts: 22
- Thanks: 0
-
Hi Mark,
everything works, with this method you can let users vote for the best image such as i do with rockgallery like? Do you have any suggestions?
Thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Nope, It's a freebie particle... if you want that then add the functionality yourself.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- jooru
- Hero Rocketeer
- Posts: 379
- Thanks: 10
- It’s Webtime! )
-
Hello, Mark!
I installed Montage Particle.
Complied with all the instructions.
A separate template is created for the required pages, named Default - Gallery.
Several images are uploaded to the catalog: images/test
I get an error on the page (at the bottom of content):
Directory not found!
Looking ahead: I would like to try to modify the Montage Particle to display images from the Articles in a new incarnation, from additional Fields.
Look at the top of the page: a list of images attached to the Article displays there.
At this point, just as a list of files.
I'll try to do it myself. I hope I don't bother you with questions. ) - — We don’t put dates, with a date the document becomes invalid.
© Tomcat Behemoth, “The Master and Margarita” by Mikhail Bulgakov
-
-
-
- jooru
- Hero Rocketeer
- Posts: 379
- Thanks: 10
- It’s Webtime! )
-
Mark,
I get an error on the page (at the bottom of content):What might be wrong on my side?
Directory not found! - Last Edit: 6 years 1 month ago by jooru.
- — We don’t put dates, with a date the document becomes invalid.
© Tomcat Behemoth, “The Master and Margarita” by Mikhail Bulgakov
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
It's because you gave the images a file extension of "JPG" (capitalised) instead of the conventional "jpg" (lowercase). So, I just tweaked the TWIG file to accept those formats too. Now it works.
As a general principle on webserver you should not use uppercase letters, special characters, or spaces in file names.
The whole point of the montage particle is that it reads a directory containing images - trying to alter it to to read information from Joomla articles extra fields would be completely the wrong thing to do and you would have to start again from scratch. Please also note that this will require some complete PHP, TWIG, HTML, SCSS and good knowledge of the inner working of Joomla to achieve. Nevertheless, good luck with that.
Regards, Mark. -
The following users have thanked you: jooru
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- jooru
- Hero Rocketeer
- Posts: 379
- Thanks: 10
- It’s Webtime! )
-
MrT wrote:
It's because you gave the images a file extension of "JPG" (capitalised) instead of the conventional "jpg" (lowercase). <...> As a general principle on webserver you should not use uppercase letters, special characters, or spaces in file names.Files are saved exactly as a poorly educated Site Editor would copy. )
MrT wrote:<...> you would have to start again from scratch. Please also note that this will require some complete PHP, TWIG, HTML, SCSS and good knowledge of the inner working of Joomla to achieve. Nevertheless, good luck with that.General knowledge is enough; the problem is in sufficient free time.
Perhaps, I will try to understand the ways of creating Particles not earlier than Christmas and New Year holidays...
Mark, thank you so much!
Your answers are always both helpful and inspiring to new knowledge and creativity. -
The following users have thanked you: MrT
- — We don’t put dates, with a date the document becomes invalid.
© Tomcat Behemoth, “The Master and Margarita” by Mikhail Bulgakov
-
-
-
- Ron Miller
- Sr. Rocketeer
- Posts: 153
- Thanks: 1
-
Mark! This is awsome... I wish I saw it two weeks ago!
I got it up and running with your excellent direction...
If I want to round off the corners, where would that override go?
I did it where I though it should go, but I only ended up rounding off the hover image
btw.. I noticed a typo in your twig.. it's shows 1 2 3 5 5 6 7 8 9 10.
I WAS able to fix that one Lol -
The following users have thanked you: MrT
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Thanks Ron. I have updated the ZIP to fix that little typo in the YAML file.
For your rounded corners Use this code...
Adjust radius to suit your needs..g-montage-item .g-montage-link img, .g-montage-item:hover::after { border-radius: 1rem !important; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Jeff Keller
- Rocketeer
- Posts: 88
- Thanks: 8
-
Hey Mark,
I have a request!
How hard would it be for you to kinda merge your Monrate particle with Content Tabs?
I would help in any way possible!
This should explain what I mean:
This image is hidden for guests.
Please log in or register to see it.
Thank you for all your support!
-
Time to create page: 0.064 seconds