The fieldtype displays either a dropdown list or a group of checkboxes containing the members in one or more member groups. The allowed member groups can be set on a per-field basis. For each field you can also choose whether the user can select only one member (from a drop-down list) or any number of members (checkboxes).

Prerequisites

You must have FieldFrame (tested on version 1.3.4+) installed to use VZ Members.

Template Tags

Single Tags

{members_field}

Will output a pipe-delimited list of member ids. You can also use the separator parameter to separate them with something other than a pipe. For instance {members_field separator=', '} would output something like: 1, 4, 5, 8.

{members_field:names}

Will output a list of member screen names with a comma and space between each. You can also use the separator parameter to separate them with anything else. For instance {members_field:names separator=' and '} would output something like: Bob Smith and Jane Doe and Jimmy Jones.

{members_field:is_allowed members="1|4" groups="3"}

Checks if the members selected in this entry are among the members or groups specified in the tag parameters. Can also be used as a tag pair, in which case the content between the tags will only be displayed if the selected members are among those specified in the tag. You can specify member ids and/or group ids and either one can be a pipe-delimited list. For example, if you want to show a notice for every weblog entry where a super-admin was selected, use this code: {members_field:is_allowed groups="1"}Super!{/members_filed:is_allowed}. Please note that at this time, FieldFrame does not support using a variable as the value of a parameter. I am looking for a workaround to this issue.

Tag Pair

{members_field}{id} - {screen_name}{/members_field}

If you need more control over the output, use the tag pair.

Optional Parameters:

orderby=“id|username|screen_name|group_id” - The column to use in ordering the output. Default is id.

sort=“asc|desc” - Which order to sort in. Default is asc.

backspace=“2” - Remove the last x characters from the final iteration.

Variables:

id - The id of the current member.

username - The login name of the current member.

screen_name - The screen name of the current member.

group_id - The id of the group to which the current member belongs.

count - The number of the current iteration.

total - The total number of members selected.

switch=“odd|even” - Switch between multiple values each time through the loop.

Installation

Download and unzip the extension. Upload the files, following the folder structure in the download. You simply need to enable the VZ Members fieldtype in FieldFrame’s extension settings to be ready to go.

Version History

• Version 0.97 Fixed a couple bugs in the HTML output.
• Version 0.96 Added :is_allowed tag.
• Version 0.95 Initial public release. May be buggy! Use at your own risk! If you do find any bugs, please report them on the GitHub Issues page.

Download VZ Members

There is also one significant new feature. Previously, if the entered url was redirected to another site (i.e. http://google.com, which redirects to http://www.google.com) it would be displayed as an error. Now, a more helpful message is show, with the option to update to the new url.

You can get the full details on VZ Url from my original post or download it from GitHub.

Why use mod_xsendfile?

In many case you have files available through your webapp that should only be accessible to certain people. You don’t want to rely on security through obscurity (throwing them all in a public folder, but only showing the links to certain visitors). Although that will deter casual users from getting ahold of the forbidden files, once someone has the link they could post it anywhere and your security is blown. What you want to do is to squirrel the files away outside of your publicly-accessible folder and then give them out as needed once a user is validated by whatever authentication method you are using.

Apache’s mod_xsendfile module (inspired by lighthttpd’s X-Sendfile) is the tool for this job. By intercepting http requests with the “X-Sendfile” header and outputting the contents of a specified file, it both enables per-file authentication and is more efficient than processing the file contents through your server-side script and sending it to the browser that way. The file path you give to mod_xsendfile doesn’t need to be in the server’s public folder, so it is a very secure way to store sensitive files.

Installing on Mac OS X

(Installing on any Apache server will be similar, but I use OS X for development, so that is what these instructions are based on.)

Prerequisites:

• Xcode Developer Tools (which is can be installed from your OS X DVD)
• Basic knowledge of the command line

Download the source

Open up the Terminal and create a folder to hold the mod_xsendfile source files:

mkdir ~/src
cd ~/src

Now download the source and uncompress it:

curl -O http://tn123.ath.cx/mod_xsendfile/mod_xsendfile-0.9.tar.gz
tar xzvf mod_xsendfile-0.9.tar.gz
cd mod_xsendfile-0.9

Compile and install it:

sudo apxs -cia mod_xsendfile.c

You will have to enter your password and it will do its thing. Finally you need to enable the module. You can choose to do this globally in your httpd.conf file or for just a particular project in a .htaccess file. Either way, the syntax is the same:

# Enable mod_xsendfile
XSendFile On
# Allow sending files from above the requested uri
XSendFileAllowAbove On

Finally restart Apache by opening your System Preferences and in the Sharing pane unchecking and re-checking the “Web Sharing” option.

Sending a file

This part is easy. Just set the x_sendfile header with the path to the file you want to send. Make sure you check first if the current user is allowed to access the file! They will not see the xsendfile header or have any way of knowing where the file is actually stored.

In PHP

header("X-Sendfile: $filePath");
header("Content-Disposition: attachment; file=$fileName");

In Ruby on Rails

response.headers['X-Sendfile'] = @file.path
response.headers['Content-Disposition'] = "attachment; filename=#{@file.file_name}"
render :nothing => true

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.7 Changed handling of redirected url. They are now considered valid as-is, but with the pop-up prompt to update to the final url. Also fixed a bug in checking multiple VZ Url fields when editing an existing entry.
• 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.

Download VZ Url

listFilter allows you to automatically filter out items from a list on the fly, using any number of criteria and data items. You can look at the example to see how it works.

How to use

First you need to inlude jQuery and the plugin script:

<script src=”/scripts/jquery.min.js”></script>
<script src=”/scripts/jquery.listfilter.js”></script>

You will need to things in you page: a list to filter and a form containing the controls you will use to set the filter criteria. These controls can be text inputs, textboxes, or select boxes. The list can be an actual list—<ul> or <ol>—or it can be any other element containing a group of similar elements (for instance a <table>, which contains <tr> elements). The trick here is that each filter criteria needs to match up with a sub-element of the list items. So if your list item looks like this: <li><h3 class=“name”>Name</h3> <p>Plumber</p></li>, you could have a criteria form that looks like this:

<form id=“criteria”>
  <label>Name:> <input type=“text” id=“name_filter” />
  <label>Job:> <input type=“text” id=“job_filter” />
</form>

You will notice that the id of each filter matches the class of an item in the list, with “_filter” added to the end. That is how the script knows what to filter.

Finally, you need to initialize the filtering with this line of code (either in the head of you document, or in an external script):

$(document).ready(function() {
$('#listToFilter').listFilter('#criteria');
});

There are three optional settings that you can pass to the listFilter function as a second parameter. listElement lets you specify the child element of #listToFilter that represents an individual item (default is “li”). transition specifies the effect used to show and hide the list items—can be “toggle”, “slide”, or “fade” (default is “toggle”). Finally, speed specifies the speed at which the transition will take place (default is 500). So if you wanted to filter the rows of a table by sliding unneeded rows up slowly, you would use:

$(document).ready(function() {
$('#tableToFilter').listFilter('#criteria', {listElement: 'tr', transition: 'slide', speed: 2000});
});

Download the script

Leave a comment if you have any questions or improvements. This plugin is loosely based on liveSearch by John Nunemaker as revised by John Resig.

Part of the reason for my procrastination was the need to decide how and where I wanted them printed: Should I spend more to get them letterpressed? Should I get them from one of the many super-cheap online printers? Could I do it locally and/or sustainably? In the end, I went with The Mandate Press, a low-cost letterpress shop out of Salt Lake City. They have a running deal on 250 custom business cards for $95. With a discount coupon (do a search, the coupon codes are everywhere) and shipping, my total came to $93. The tradeoff for such a low price is not having any options for paper or ink color, and a two- to three-week wait for the cards.

Overall, I am satisfied with my cards. The paper is good quality—thick and white with a nice texture. There is a noticeable impression around the letters, which is reason to pay extra for letterpress, right? The printing itself could be better, though. It looks like there wasn’t quite enough ink on the press, so the black band, in particular, isn’t actually black. It has the same white specks peeking through that you would expect in a newspaper. I guess for a third the price of anywhere else I have seen, I don’t expect perfection; and I would certainly consider ordering from Mandate again. But if you really need to impress people with the quality of your card you will probably need to look elsewhere (or use one of Mandate’s custom options, which I expect are more tightly controlled).

What Roadblock does is look every time someone logs in to see if they have been shown a message yet, and how long ago. If they have not yet seen the roadblock, or if it was over a specified length of time ago, the roadblock will be displayed (or, optionally, they will be sent to a url of your choosing). Although I built it for displaying the term of use, it would also be useful for displaying reminders or instructions. Please note: There is no checking to ensure that the user “agrees” to the message. If you need their access to the site to be conditional on accepting an agreement, you will have to look elsewhere.

Installation

Download the file ext.roadblock.zip. Inside the archive you will find two files: lang.roadblock.php goes in your language/english folder and ext.roadblock.php goes in the extensions folder. You can now enable it in the extensions section of your control panel.

Settings

Users should see the roadblock The interval between displays of the roadblock for each user.

Track users by We can either keep track of who has seen the roadblock by User ID or by Computer. The latter option uses cookies, meaning that if the same user logs on using two different computers (or browsers) they will be shown the roadblock twice.

Url to redirect to By default, the roadblock message will be shown in your User Message template (as defined in the Specialty Templates section of the CP) with a link to this address at the bottom. Normally, this would be the home page of you website (which it is set to by default). Optionally, you can leave the remaining settings fields blank, in which case this address will be used as the roadblock itself. This option allows you to create a unique template for the roadblock message, or create additional functionality within it.

Title & Text This is the actual content of the roadblock message. Anything you put in the Text field will be run through EE’s Xhtml processor.

Link text The link to continue on to the website.

Url to redirect to when the roadblock is not shown If this field is filled in, the user will be routed directly to the specified url when the roadblock is not shown, bypassing the Expression Engine “you are logged in” confirmation message.

Disclaimer

Remember, this is my first real extension, and I have tested it on my own system but if it blows up you installation of Expression Engine I cannon be held responsible. Use at your own risk!

If you have questions, find bugs, or otherwise need help, please see my post on the Expression Engine Forums.

So I turned to jQuery to wrap the first letter of the first paragraph with a <span> tag that I could style however I wanted. I found inspiration for this script on the Learning jQuery website, but I couldn’t find a pre-made script that would do exactly what I needed. So here is my script, hopefully it will help someone else out.

Stylesheet

.init-cap {
  font-size: 1.5em;  /* Set the size of the raised letter */
  line-height: 1.2em;  /* Adjust the line spacing */
  }

Javascript

$(document).ready(function() {
  $('.cap p:first').each(function() {
    var text = $(this).html();
    var first_letter = text.substr(0,1);
    if ( /[a-zA-Z]/.test(first_letter) ) {
      $(this).html('<span class="init-cap">' + first_letter + '</span>' + text.slice(1));
    }
  }); 
});

What we are doing is selecting the first paragraph inside each element with the class “cap” applied to it. We then chop the first letter off that paragraph, check to be sure it is really a letter (rather than a tag, for instance), and add it back on wrapped inside a <span> tag. By adjusting the CSS, this could easily be used for drop-caps, as well.

I have been using PixelPost for my photoblog for nearly two years, since I got tired of the size limit of photos in Blogger. PixelPost always served me well, and as a purpose-built photoblog package, it can’t be beat. However, it has suffered from a (seeming) lack of developer attention lately, and is now showing it’s age.

Since there is no native export functionality in PixelPost, I had to write a custom script to dump the database into the MoveableType export format that EE will import. That worked pretty well, although there were a few things I had to go in and fix by hand. When I have some spare time, I will try to clean up the script and make it available for anyone in my situation. (Or contact me if you want a copy of the file to play with.)

If you were subscribed to my photography RSS feed, please update your subscriptions to the new link: http://elivz.com/photo/feed/. It should redirect the old address, but I may not keep the redirect active forever.

Hope you enjoy! I am going up to Portland, ME tomorrow, so I should have some new photos to post, as well.

Amanda has some final scanning and printing of photos to do at Duke in preparation for her show in August. I will also be working on some design projects, but I expect to have plenty of free time. So give me a call, we’ll have a drink on my porch, go for a walk, or you can make me dinner (all of our dishes and cookware will still be here in Somerville).

The easiest solution would have been to use an <img /> tag in the flow of the text. There were two problems with this: The first is my philosophical issue with using an image tag when semantically I want text. The second problem is making the image change color when the user hovers their mouse over it, like all the other links on the page. Of course I could have set up and onMouseOver script that would switch the images, but I didn’t like that, either. The classic image-replacement trick of saving both the normal and the “hot” images in one file and then adjusting the background-image-position in css is so much faster and more elegant.

So I started looking at image replacement techniques. Unfortunately, all the standard methods require the replaced image to be a block-level element. This obviously won’t work in my case, since it would put each image on a separate line. With a bit of experimentation, I found a method that allows me to keep the replaced image as an inline element, keeps the link and tooltip active, and even lets me underline the image on mouseover, just like a normal link.

First try

I am going to be working with this xHTML for my first experiments:

<p>This is a line of text with a <a href=”#” class=“replaced” id=“butterfly”>butterfly</a> in the middle.</p>

I want to replace the word butterfly with an image of a butterfly:

There is a CSS position property called “inline-block” that would seem to combine the necessary qualities of both “inline” positioning—keeping the replaced image inside the flow of text—and “block” positioning—creating a defined space that an image can be placed in. And it does, except that it is not part of the CSS specification and Firefox doesn’t support it. However, Firefox does support their own implementation, called “-moz-inline-box”. So combining those with the standard image-replacement code, we get:


.replaced {
display: inline-block;
display: -moz-inline-box;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
text-indent: -9999px;
} #butterfly {
width: 22px;
height: 18px;
background: url(butterfly.png) no-repeat;
}

Which gives us:

This is a line of text with a butterfly in the middle.

That’s close—the image shows up in the middle of the sentence, as desired, but in Firefox and IE the image is still overlaid with text.

Second Try

Adding two new rules to the stylesheet will make it work in Firefox:

.replaced {
display: inline-block;
display: -moz-inline-box;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
text-indent: -9999px;
font-size: 0;
vertical-align: text-top;
}

This is a line of text with a butterfly in the middle.

But Internet Explorer, the bad boy of the browser world, only shows a little glob at the top of where the image should be. Fortunately, my default solution to all IE bugs works in this case. Adding zoom: 1 gives the image “layout” and causes it to re-appear. (Incidentally, both display: inline-block and setting the dimensions should trigger hasLayout, but for some reason they don’t in this case.) Zoom is a Microsoft proprietary extension to CSS, so it won’t validate, but neither will display: -moz-inline-box. If that bothers you, move them to alternate style sheets…I’m not too worried about it.

Underlining on hover

On my site, like many others, an line appears under links when you place your mouse over them. Since I wanted to directly replace the text in my sentence with an image, it would make sense that it would also have the underline. If you have a rule in your stylesheet for a:hover already, the image-replaced link will inherit it automatically, but the line will be directly under the image rather than a few pixels lower like it would be with normal text. So I add some padding to the bottom on hover. I also adjust the background position to show the second, hightlighted, image that is below the normal one.

#butterfly:hover {
background-position: 0 -18px;
border-bottom: 1px solid;
padding: 0 0 2px;
}

This is a line of text with a butterfly in the middle.

Looks great, right? Except if you are using Firefox, which refuses to add the padding to the bottom. As reported by Firebug, Firefox actually decreases the height of the element to cancel out the added padding. Weird. The only solution I have found requires adding an extra <span>, which I generally avoid. I moved a number of CSS rules to the new span and added three extra rules. The line height of the span is set to the height of the image, to prevent it from showing part of the highlighted image below. Also, IE7 no longer shows the “hand” cursor, so I added a rule to fix that. Lastly, I added -3 pixels of margin to the bottom to offset the padding and border.

The final code is:

<p>This is a line of text with a <a href=”#” class=“replaced” id=“butterfly”><span>butterfly</span></a> in the middle.</p>

.replaced {
display: inline-block;
display: -moz-inline-stack;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: text-top;
zoom: 1;
} .replaced span {
display: block;
overflow: hidden;
text-indent: -9999px;
line-height: 18px;
cursor: pointer;
} #butterfly {
width: 22px;
background: url(butterfly.png) no-repeat;
} #butterfly:hover {
background-position: 0 -18px;
border-bottom: 1px solid;
padding-bottom: 2px;
margin-bottom: -3px;
}

And the final result is:

This is a line of text with a butterfly in the middle.