Creating a responsive gallery using Velocity.
We just underwent a responsive redesign of our web site and I created a responsive gallery locally on my computer [see attachment] and want to implement it into our site using Velocity. I want to become more familiar with Velocity and this seems like it may be a good place to start learning.
I created head-tags that contain the css and footer-tags for the javascript to be included on any page that this gallery will be used. I tried thinking what the best method to use to populate the gallery and I think using an index block and a script format to pull the images from a folder might be the easiest to manage (if there's a more intuitive way than this I am all ear).
I've seen this done before with XSLT but is there an advantage of making this script with Velocity? Either way, I don't know quite know where to start.
//side note
Out of curiosity, is something like this possible with a brick? It was recently announced and I don't know how much it is capable of doing yet. It would be great to just add a gallery using any WYSIWYG.
- slider-gallery.zip 2.26 MB
Comments are currently closed for this discussion. You can start a new one.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
1 Posted by matthew.wren on 19 Sep, 2013 01:05 PM
just checking in on this one.
2 Posted by Ryan Griffith on 19 Sep, 2013 01:42 PM
Hi Matthew,
Your solution to use an Index Block would probably be the simplest to maintain and easiest for your end users, this would allow you to easily create/delete images for the slider (ie the "slides").
As for whether to use XSLT or Velocity, this is really up to what you prefer to use since this should be doable in both types of Formats. If you needed to add additional JavaScript, Velocity may be a bit easier since it's less restrictive on the produced content (ie valid XML) and using code sections is a bit simpler.
You could probably do something similar using Velocity. Theoretically, you could enter something like
{slider blockID="INDEX_BLOCK_ID"}
and use Velocity to generate the content. Your code could grab the value of the blockID parameter and use the new Locator Tool to find the associated block and loop over it's content.Please let me know if you have any questions.
Thanks!
3 Posted by matthew.wren on 20 Sep, 2013 01:02 PM
I haven't used Velocity yet so I don't know what a good jumping off point is. Where would I start and what tools would I need to use to pull this off?
4 Posted by matthew.wren on 02 Oct, 2013 02:07 PM
I know you're busy but just wondering about this. I still like to try more Velocity because it seems to be easier to manage but I'm not familiar with it.
5 Posted by Ryan Griffith on 02 Oct, 2013 05:45 PM
Not a problem, Matthew.
So let's assume you have an Index Block set up to index a Folder of images and these images have a summary metadata field available for a slide caption. The following Velocity should generate the HTML from the sample you provided above:
Note: this assumes you are already including the required CSS and JS for the slider within the page.
Please let me know if you have any questions.
Thanks!
6 Posted by matthew.wren on 09 Oct, 2013 01:04 PM
I believe I have everything in place to test out the gallery but when I apply everything to a page I get an error dealing with an unclosed img attribute. There wasn't a `/>` in the img attribute so I added it and it still comes up with this error. Is this error occuring in the Velocity script?
7 Posted by Ryan Griffith on 09 Oct, 2013 01:48 PM
Hm, it could possibly be an issue with the alt attribute. Try removing the attribute from the image tag and see if you still get the error message.
8 Posted by matthew.wren on 10 Oct, 2013 03:47 PM
That did the trick! Thanks! It seems to work really well now and is really easy to use on just about any page I can think of. I am noticing one little thing about it that I'm hoping is just a little fix.
We have 4 DEFAULT Regions on our template and I've been putting the gallery in the one right after the page's content that's outputted by a format. Someone wants their gallery at the top of the page so when I put the gallery in the first DEFAULT region and the format to display the content of the WYSIWYG in the next one.
For some reason this causes the content below it to disappear.
Also I remember mentioning something about possibly being able to embed a gallery into anywhere on the page using WYSIWYG. Is this possible/feasible? could provide a lot more flexibility depending on what the client wants.
9 Posted by matthew.wren on 16 Oct, 2013 01:34 PM
That did the trick! works almost like a charm! There's just one thing I'm noticing and I can't tell if it because of the gallery.
On many pages we have a format that pulls the main content in the first DEFAULT Region so I've been putting the gallery in the DEFAULT2 regions and that's no problem. The problem comes in when I try putting the gallery in the FIRST region. I'll put in the DEFAULT region and it works but when I put the format that pulls the page's content in the other DEFAULT regions it won't display the content.
Think this problem is from the gallery?
10 Posted by Ryan Griffith on 16 Oct, 2013 01:54 PM
Hi Matthew,
It sounds as though you are not applying a Calling Page Index Block along with your page content Format. With the DEFAULT region, you can leave out this Index Block because we assume leaving out a block within the region means you want the calling page data. When you move to a different region, you will need to apply an Index Block so the Format has access to the calling page's data.
Please let me know if you have any questions.
Thanks!
11 Posted by matthew.wren on 16 Oct, 2013 02:41 PM
OH I understand. That makes a lot of sense. I created a Calling Page Index Block but it still outputs a bit of XML into the main content area. Should I alter my index block?
12 Posted by Ryan Griffith on 16 Oct, 2013 03:25 PM
You will need to alter the Format that generates your main content because the XML applied to the Format has changed due to the Index Block.
Ryan Griffith closed this discussion on 22 Oct, 2013 08:47 PM.
matthew.wren re-opened this discussion on 24 Jul, 2014 03:51 PM
13 Posted by matthew.wren on 24 Jul, 2014 03:51 PM
I have another question about this gallery. I'm trying to see how well it would work as its own data definition field because I know a lot of our users will be intimidated by having to go into the outputs to select a folder.
I created a region in the template that calls the xml of the page and the format is currently the same as the one listed above so it won't work yet.
Here's the xml of the test page I have
I'm just wondering if it is a simple change to the Velocity to locate those image files from the XML.
14 Posted by Ryan Griffith on 24 Jul, 2014 06:31 PM
Hi Matthew,
You are correct, it should just be a matter of adjusting the XPath you use to obtain the "slides." In this case, you would change:
To something like:
15 Posted by Ryan Griffith on 24 Jul, 2014 06:33 PM
My apologies, accidentally hit submit while I was typing my response.
As I was saying, you would change:
To the following:
Note: because we're dealing with choosers, you'll want to add a
path
check to ensure a file was selected.Please let me know if you have any questions.
Thanks!
16 Posted by matthew.wren on 24 Jul, 2014 07:01 PM
Oh yeah! that worked out great! So I was testing it out and I realized something something. If you look at the XML there's a section called
new-item
and it contains a few fields including a WYSIWYG. My intentions are to get this gallery to be at the bottom of each of these sections but the way it is created now it will only be placed on the bottom of the the entire site (because I created a region that's below this default content).I was going to add this into the format so it'd display along with that content but it is written in XSLT... would that snippet be very difficult to convert over to that language? also would it cause any other issues by implementing in that part of the page?
17 Posted by Ryan Griffith on 24 Jul, 2014 08:42 PM
Hi Matthew,
You would most likely want to remove one of the regions if you are planning to combine the two elements.
That being said, you would just need to loop over each
new-item
element and move your current code into that loop. Note: you will need to adjust your XPath that obtains all of the galleries to only get the gallery for the currentnew-item
.Please let me know if you have any questions.
Thanks!
18 Posted by matthew.wren on 29 Jul, 2014 01:29 PM
I can see how to insert the image into the source of the
img
tag in Velocity but what about XSLT?XML
XSLT
19 Posted by Ryan Griffith on 29 Jul, 2014 07:42 PM
Hi Matthew,
You would use the same logic that exists for the graphic field:
Alternatively, you could separate the gallery image output into a different template:
Please let me know if you have any questions.
Thanks!
20 Posted by matthew.wren on 07 Aug, 2014 12:53 PM
This worked perfectly! thank you so much Ryan!
21 Posted by Ryan Griffith on 07 Aug, 2014 02:17 PM
Not a problem at all, Matthew, I am glad to hear the new XSLT did the trick.
I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.
Have a great day!
Ryan Griffith closed this discussion on 07 Aug, 2014 02:17 PM.