Brandon Kelly has done the Expression Engine developer community a great service with the release yesterday of his FieldFrame extension. He has created a framework for the quick development of new fieldtypes (like the XHTML and drop-down types that come with EE). I couldn’t resist experimenting with FieldFrame, and—aside from a few areas that are not yet documented—it is as easy as promised.
I whipped up a Url fieldtype, somewhat similar to Designchuchi’s URL Field Extension, but with the addition of ajax url validation. When the user leaves the url field, it will ping the url they entered and display an error message if it doesn’t find a valid webpage there.
Please note that VZ Url will not prevent the user from saving their weblog entry if if cannot validate the url—it just warns them. This is intentional, perhaps they are linking to a page they have not yet created, or the site they are linking to is currently down but they know the url is correct. I may add this functionality as an option later on.
Prerequisites
You must have the FieldFrame and jQuery for the Control Panel extensions installed and enabled. Your server will also need to have the CURL library enabled for the link checking to work.
Installation
Download and unzip the extension below. Upload the files, following the folder structure in the download. You will need to enable the VZ Url fieldtype in FieldFrame’s extension settings. Then you will need to go back to FieldFrame’s settings & show the settings for VZ Url to set the error message that will be shown if the url is invalid.
That’s it! Now you can use the VZ Url field type anywhere you were previously using a plain text field. Switching from a Text Field to a VZ Url field (or vice-versa) will not affect your data.
Version History
- Version 1.1.4 Removed hard-coded url to a testing copy of proxy.php that I had mistakenly left in.
- Version 1.1.3 No longer equates “no url” as “invalid url”.
- Version 1.1.2 Compatible with PHP < 5.2. Compatible with Multi-Site Manager installations. Slight styling fixes.
- Version 1.1.1 Checks to make sure it’s even a valid url before trying to ping the remote server.
- Version 1.1 Completely refactored code. Displays errors—inluding a new message for redirected urls—in a new, prettier, pop-up box. Hopefully also fixed all the bugs mentioned in the comments up to now. Read more in my blog post.
- Version 1.0.2 Preparation for FieldFrame 1.2—thanks to Brandon Kelly!
- Version 1.0 Now checks urls as you type, rather than waiting until you move to the next field. Also some aesthtic adjustments.
- Version 0.9.9 Cleaned up the design, refactored the javascript, and added support for FF Matrix.
- Version 0.9.8 Moved some code around to simplify things.
- Version 0.9.7 Update to new API structure in FieldFrame 0.9.5; moved to GitHub.
- Version 0.9.6 Minor update to take advantage of new features in FieldFrame 0.9.2.
- Version 0.9.5 Initial public release. May be buggy! Use at your own risk! But please tell me if you do find any bugs and I will do my best to fix them.
Comments:
Matt on April 9, 2009 at 11:54pm#1
Thanks for the great FieldType Eli!
Chuck on July 26, 2009 at 1:31pm#2
I am using VZ URL, but I do not see the +Add Row button. Is something not setup correctly?
Chuck on July 26, 2009 at 1:47pm#3
Hi Again, I’m still just beginning with tags and FieldFrame. Is there a way to have the {options} populate into a table…or if not, perhaps several columns? Thanks again!
EliVZ on July 26, 2009 at 4:31pm#4
Chuck: If I understand your questions correctly, you need to read the FF Matrix documentation. The things you are trying to do are part of FF Matrix, no VZ URL. Good luck, and let me know if you have any other trouble!
smartpill on August 2, 2009 at 6:55pm#5
For some reason this link to an MP3 file is being flagged with the red “X” even though the link is obviously valid.
Can Berkol on August 24, 2009 at 6:58am#6
This is a life saver. Thank you.
Erwin on August 25, 2009 at 7:27am#7
Eli, your extension doesn’t seem to work with fieldframe v1.3 anymore. It does give an error if my custom field is empty, but it does not give an error when the syntax isn’t correct.
Tom Davies on August 25, 2009 at 7:50am#8
+1 to Erwin’s bug report - no error is given on FF 1.3.2 if the string entered is not a valid url
Eli Van Zoeren on August 25, 2009 at 8:12am#9
Hmmmm. I’ll take a look at that bug tonight.
EliVZ on August 26, 2009 at 9:27pm#10
Erwin and/or Tom: Can you try upgrading to FieldFrame 1.3.3? It seems to be working fine for me. If you still don’t get the invalid url warning, please send me an email with details—what urls you are trying, what version of ee & php you are using, Windows or Linux server—and I will try to track this issue down.
Erwin on September 5, 2009 at 9:54am#11
I’ve changed the code of proxy.php to:
<?php
// Proxy for checking if a remote page exists
// Used by the VZ URL extension
$session = curl_init($_GET[‘path’]);
curl_setopt($session, CURLOPT_HEADER, true);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
curl_setopt ($session, CURLOPT_VERBOSE, false);
curl_setopt($session, CURLOPT_TIMEOUT, 15);
/*
// Request the file
$httpcode = curl_getinfo($session, CURLINFO_HTTP_CODE);
*/
$response = curl_exec($session);
curl_close($session);
if(strlen($response) > 4000){
echo 1;
}
The problem was that i was always getting a 200 header, maybe this is some serverconfiguration. This isn’t the real solution, but it works for me :)
Brent on October 3, 2009 at 11:12pm#12
Love the fieldtype Eli! Thanks for sharing.
I noticed a small JS error on the Edit page when using your fieldtype on it’s own (outside of FF Matrix)
On line 56 of ff_vz_url.js you might want to check if $.fn.ffMatrix is defined.
Thanks again!
smartpill on October 23, 2009 at 1:10pm#13
I get the red checkmark if I enter a URL without a “www” for instance:
http://google.comis considered invalid, buthttp://www.google.comis valid. I’m using FF 1.3.4 and VZ URL 1.0.2.Jake Mauer on November 23, 2009 at 8:52pm#14
Your current link the the VZ URL download is broken. I appreciate your effort and upkeep of this fieldtype!
Jake Mauer on November 23, 2009 at 9:19pm#15
False alarm, it looks like GitHub was to blame. Thanks Eli!
EliVZ on November 23, 2009 at 9:21pm#16
GitHub does that periodically, but since it is otherwise awesome we can forgive it. Glad everything worked itself out.
Your site looks great, by the way!
Florian Schroiff on November 24, 2009 at 5:38am#17
Weird: I installed the Url extension. Now I can set it as a fieldtype on its own, but I can’t select the fieldtype inside an FF Matrix.
I’m playing with Fieldframe for the first time, so chances are I’m doing something wrong…
Manoj Thomas on December 3, 2009 at 6:34pm#18
The version on github isn’t the latest. When I download it it turns out to only be v1.0.5
Eli Van Zoeren on December 3, 2009 at 10:04pm#19
Manoj- How did you download it? The version on GitHub is the newest—1.1.3—so I’m not sure how you got an older copy. Make sure you use the link at the end of my post, if you followed another link from another site, perhaps it was pointing at an old copy, although there was never a 1.0.5 release.
Very strange….
Jason Morehead on December 12, 2009 at 2:01am#20
FWIW, I just downloaded the files from GitHub and when I installed them, and then went to the “Fieldtypes Manager” in my admin area, it says the version is 1.0.5. Additionally, I’m no longer able to use a field that is of the VZ URL type in conditionals—it always returns false.
Eli Van Zoeren on December 12, 2009 at 10:14pm#21
Jason- Crap! I just realized that GitHub has been providing an old version through the download button (for how long, I don’t know…sorry everybody). I have filed a support ticket with them to get their cache cleared. I will update this comment when I hear back from them.
[UPDATE] Okay, it’s working properly now.
Jason Morehead on December 14, 2009 at 9:14am#22
Cool, I’ve been able to upgrade successfully. Thanks.
Joel Bradbury on January 18, 2010 at 5:11am#23
Hey quick note,
In the ff_vz_url.js (line 76) the path proxy.php is hard coded to be :
“http://www.vsadc.com/siteadmin/extensions/fieldtypes/ff_vz_url/proxy.php?callback=?”
It’s probably just an oversight and nothing malicious, but worth updating the latest version to use a proxy.php under the user’s control, not elsewhere.
EliVZ on January 18, 2010 at 9:57am#24
Joel- Wow, I’m an idiot! I put that in when I was testing something, and never took it back out. There’s an updated version on GitHub that uses the correct local copy.