Load vimeo video beneath text input for (pre)view

[thijs]

Hi all,

Been getting into Processwire for the past couple of days, it’s simply amazing, very nice work there (Ryan)! I’ve got a short question; I’m trying to make a field where you can input a vimeo url or vimeo video id (just as a text input), and have it load the video beneath the text field when the field loses focus. This is something that can easily be done with some javascript, but I’m wondering if I should make a custom field (module?) for this, or what the best approach would be to get this in the existing ProcessWire structure?

I know that there is a module that converts urls to embed codes and displays them in a (tinymce) field, but I’d rather separate display and input here. I appreciate any insights, and thank you in advance for reading / thinking along!

Best regards,

Thijs

[diogo]

Hi ijsga, welcome to the forum!

If you know how to do it easily in javascript, just use a normal text field to get the url, and do all the work on the templates. I think it will be easier and cleaner

[thijs]

Hi Diogo,

Thank you for your reply and the welcome! Do you mean on the admin page template(s)?

[diogo]

Sorry, I misunderstood your question. It's happening a lot lately...

edit: Have a look at http://modules.processwire.com/modules/fieldtype-color-picker/ as an example of a field type module that includes some js and css on the admin.

[Soma]

It's simple and possible to add a custom js to load on page edit. Then the script would listen to the field input and handle the showing of the video. A regular field (text) would suffice, you then need to look at the admin code what class or id you have to attach you're scripts to. If that's what you're after you can maybe make it a simple js module or an autoload module that hooks in after Page::edit or something similar. Let us know so we could sure give you more detailed help to get you started.

Edit: of course nothing again creating a simple fieldtype/inputfield module that would be more flexible and dedicated, but little more complex.

[thijs]

Thanks for your replies! Soma; I’ll go for more flexible and dedicated (even though it may be a bit more complex at this point). It’s good to get to know the inner workings of ProcessWire a bit more (and I’m very familiar with PHP). If you could give some pointers to get me started, that’d be really great! I’ve already fiddled around a bit with duplicating and editing some existing modules but would be good to do it right the first time!

[Soma]

I think maybe my ColorPicker modules would be good reference to make it. http://modules.processwire.com/modules/fieldtype-color-picker/

[ryan]

The Map Marker Fieldtype/Inputfield is another good one to look at. It was originally created as a way to show someone how to make Fieldtypes and Inputfields, so it's documented in the code with that intention. Feel free to ask any questions that come up along the way. If you are able to, please share your module--it sounds like quite a useful field to have.

[thijs]

Thanks guys, these are some great references! And Ryan; my compliments for your work on ProcessWire. It would have taken me many years to have gotten my own cms somewhere near the current state that ProcessWire is in. But instead I’ll try spending that time to contribute wherever I can, and I’ll ofcourse be sure to share my first module!

[ryan]

Thanks ijsga! We're glad to have you here.

[thijs]

Continuing on what I started earlier, Vimeo also supplies a thumbnail image through their jsonp interface, I’d ofcourse like to use (and save) this thumbnail to this module/field I’m creating. Since anything is possible in ProcessWire I was wondering if you could perhaps give me some additional directions here? Thanks once more, enjoying PW very much.

[ryan]

I think the question might be too broad for me to know if I'm answering the right thing. But if you are able to get a URL to the thumbnail, you can always add it to a ProcessWire image field like this (assuming your field is named 'images'):

$page->images->add("http://domain.com/path/to/file.jpg"); 

Or if it's a single image and output formatting on:

$page->image = "http://domain.com/path/to/file.jpg"; 

The first example is more likely the one you'd want. When you save, it should download the image and put it into the system.

[thijs]

Thanks again for your replies! By adding the thumbnail to an images section of the page the client could possibly delete the image, and this would break parts of the website. It would be better to hide the image from the editor/client, and tuck it away somewhere safe. And somehow create a relation between the video id and this specific image. Or am I trying to bend the system too much?

[Soma]

You could add an image field and hide it , so its invisible in the backgound. I woudnt worry too much about.

[ryan]

Soma is correct that you can set the "visibility" to "hidden" in the field settings, and then the field can exist on the page but won't appear in the page editor.

[thijs]

Thanks for the suggestion, I suppose that could work. But would it still be possible for it to be a module / field, meaning that this hidden images field is somehow contained when using this field/module? Otherwise the working of the field would be dependent on the presence of this hidden field on a page I think.

[ryan]

I'm not sure that I understand the question 100%, but am thinking you might be thinking of "hidden" as a type of field (like it would be in HTML), as opposed to a status that any field can have. In ProcessWire, setting the visibility to hidden can be done with any field and it's not related to the field type. That field will still be present in all of your API usage… it just won't be rendered in the page editor. So it's great for fields that you want to store things in from the API side, while excluding it from the interactive side.

[thijs]

I was thinking of the visibility kind of hidden and not the ‘undercover’ kind input type that html has got. The functionality you describe sounds perfect, and think I could rephrase my question; would it be possible to have an images field / entity present within this new fieldtype I’m creating? The fieldtype should consist out of a text field entry field for the video url, another text field where the retrieved embed code is stored, and an image field where the thumbnail belonging to the fetched video will be stored, and also some optional config fields (i.e. to specify a fixed width for the video, or any other presets such as autoplay).

[ryan]

The fieldtype should consist out of a text field entry field for the video url, another text field where the retrieved embed code is stored, and an image field where the thumbnail belonging to the fetched video will be stored, and also some optional config fields (i.e. to specify a fixed width for the video, or any other presets such as autoplay).

You might want to look at using a repeater for this, as it would enable you to do this pretty easily. Though cloning and modifying the existing images fieldtype would enable you to do all this too (with a little more work).