Ever since HubSpot changed the design area, I am lost. I want the columns where the videos are to be custom columns so I can add videos as we make them. There will be a total of 12. Does anyone have any suggestions? Help?
1. right click the folder you would like this module to live in. I use a 'modules' folder in my root templates folder for the template set I am working on.
2. Check 'page' and/or 'blog' then name the module, like 'Video Library'.
3. This will open the module editor. There is an HTML section, a CSS section, and a javascript section. The right side bar is where you create your editable fields. You will want to code your module here.
<div class="video-library">
<div class="vl-page_center">
<div class="vl-grid">
<div class="vl-item">
<!-- your video assets go here -->
</div>
</div>
</div>
</div>
.vl-grid will contain your gallery, .vl-item will wrap each item in your gallery.
4. now you need a repeater field. This is going to be a group of fields that belong inside vl-item, and will exist for each item in the grid. You will use the left side bar for this.
You are going to have to choose if you want to use embeds (youtube, vimeo, etc.) in your popup or if you are going to use html5 and source the video files from your file manager. Wistia Videos comes with a popup embed code that would make your life a lot easier.
.vl-item is going to contain:
i. The thumbnail image
ii. The title
iii. the video
So for each item you need an image field and a text field for the title. If your video is embeds then a text field will work here otherwise you will need to build out an html5 player and create a file field for each required video file type (.ogg, .mp3, .webm).
If your using wistia you only need to wrap the img tag in the link provided and the scripts provided will create the popup.
6. group the fields, then at the bottom of the group settings turn on the repeater and set a default number of items.
7. at the top of the group settings You'll see a link titled "Copy" with a down arrow. click there and choose copy snippet.
I paste my snippets above my html then copy and paste the values to where the should exist. In most cases I don't want image size control options so I turn that off on my image fields and omit the attributes from the image tag in the snippet as well. also, for text fields at least, you want the token that starts and ends in double curlys: {{ this is a token }} so I copy those out of the snippet. Because it is a repeater field you will be working with a for loop. Just make sure that .vl-item is the outer most parent inside the loop:
<div class="vl-grid">
{% for foo in bar %}
<div class="vl-item">
if you pasted the snippet into the text editor to copy and paste like I do, be sure to delete it back out after you are finished. If you set default content to your fields you can click preview and you should see the grid.
8. The rest is a javscript issue and the only way to solve it is to know how you plan to implement the videos. I built this video gallery here using html5 video and the old design manager. Playing with video can be a bit tricky and cumbersome. Here is the code from that site:
function popup_video(b) {
var c = $(b).siblings(".video_container");
var a = c.children(".video_wrap");
var d = c.find(".step_video").get(0);
var e = c.find(".video_close");
d.load();
c.show();
d.play();
e.on("click touch", function() {
c.hide();
d.pause()
});
if (c.is(":visible")) {
$(c).on("click touch", function(f) {
f.preventDefault();
c.hide();
d.pause()
});
a.on("click touch", function(f) {
f.stopPropagation()
})
}
};
1. right click the folder you would like this module to live in. I use a 'modules' folder in my root templates folder for the template set I am working on.
2. Check 'page' and/or 'blog' then name the module, like 'Video Library'.
3. This will open the module editor. There is an HTML section, a CSS section, and a javascript section. The right side bar is where you create your editable fields. You will want to code your module here.
<div class="video-library">
<div class="vl-page_center">
<div class="vl-grid">
<div class="vl-item">
<!-- your video assets go here -->
</div>
</div>
</div>
</div>
.vl-grid will contain your gallery, .vl-item will wrap each item in your gallery.
4. now you need a repeater field. This is going to be a group of fields that belong inside vl-item, and will exist for each item in the grid. You will use the left side bar for this.
You are going to have to choose if you want to use embeds (youtube, vimeo, etc.) in your popup or if you are going to use html5 and source the video files from your file manager. Wistia Videos comes with a popup embed code that would make your life a lot easier.
.vl-item is going to contain:
i. The thumbnail image
ii. The title
iii. the video
So for each item you need an image field and a text field for the title. If your video is embeds then a text field will work here otherwise you will need to build out an html5 player and create a file field for each required video file type (.ogg, .mp3, .webm).
If your using wistia you only need to wrap the img tag in the link provided and the scripts provided will create the popup.
6. group the fields, then at the bottom of the group settings turn on the repeater and set a default number of items.
7. at the top of the group settings You'll see a link titled "Copy" with a down arrow. click there and choose copy snippet.
I paste my snippets above my html then copy and paste the values to where the should exist. In most cases I don't want image size control options so I turn that off on my image fields and omit the attributes from the image tag in the snippet as well. also, for text fields at least, you want the token that starts and ends in double curlys: {{ this is a token }} so I copy those out of the snippet. Because it is a repeater field you will be working with a for loop. Just make sure that .vl-item is the outer most parent inside the loop:
<div class="vl-grid">
{% for foo in bar %}
<div class="vl-item">
if you pasted the snippet into the text editor to copy and paste like I do, be sure to delete it back out after you are finished. If you set default content to your fields you can click preview and you should see the grid.
8. The rest is a javscript issue and the only way to solve it is to know how you plan to implement the videos. I built this video gallery here using html5 video and the old design manager. Playing with video can be a bit tricky and cumbersome. Here is the code from that site:
function popup_video(b) {
var c = $(b).siblings(".video_container");
var a = c.children(".video_wrap");
var d = c.find(".step_video").get(0);
var e = c.find(".video_close");
d.load();
c.show();
d.play();
e.on("click touch", function() {
c.hide();
d.pause()
});
if (c.is(":visible")) {
$(c).on("click touch", function(f) {
f.preventDefault();
c.hide();
d.pause()
});
a.on("click touch", function(f) {
f.stopPropagation()
})
}
};
@Jsum thank you so much for that wonderful response. I have read through it but I fear I do not have enough development experience to create that library. Any idea if you are able to use the new vidyard hosting that HubSpot has with it? Thats what I need.
I purchased a module from the marketplace however, it doesnt work with the new capability that HubSpot has with Video Hosting and Vidyard. 😞 We really wanted that since you can have the form live in the video and thats how we were planning on gating them. 😞
Sep 26, 20181:43 PM - edited May 31, 20195:08 AM
Key Advisor
Video Library
SOLVE
@ErinKas what I gave you is pretty much copy and paste so I would probably suggest you hire someone to just knock this out for you really quick. It shouldn't take more than a couple of hours to build a module like this which tanslates to a couple hundred bucks to get what you want, quickly, and without the headache.
