Author: Meghan Frazer

I write a lot of “how-to” posts.  This is fine and I actually think it’s fun…until I have a month like this past one, in which I worry that I have no business telling anyone “how-to” do anything. In which I have written the following comment multiple times:

//MF - this is a bad way to do this.

In the last four weeks I have struggled mightily to make changes to the JavaScript in a Drupal module (the aforementioned Views Isotope).  I have felt lost, I have felt jubilation, I have sworn profusely at my computer and in the end, I have modifications that mostly work.  They basically do what we need.  But the changes I made perform differently in different browsers, are likely not efficient, and I’m not sure the code is included in the right place.  Lots of it might be referred to as “hacky.”

However, the work needed to be done and I did not have time to be perfect.  This needed to mostly work to show that it could work and so I could hand off the concepts and algorithms to someone else for use in another of our sites.  Since I have never coded in JavaScript or jQuery, I needed to learn the related libraries on the fly and try to relate them back to previous coding experiences.  I needed to push to build the house and just hope that we can paint and put on doors and locks later on.

I decided to write this post because I think that maybe it is important to share the narrative of “how we struggle” alongside the “how-to”.  I’ll describe the original problem I needed to tackle, my work towards a solution, and the remaining issues that exist.  There are portions of the solution that work fine and I utilize those portions to illustrate the original requirements.  But, as you will see, there is an assortment of unfinished details.  At the end of the post, I’ll give you the link to my solution and you can judge for yourself.

The Original Problem

We want to implement a new gallery to highlight student work on our department’s main website.  My primary area of responsibility is a different website – the digital library – which is the archival home for student work.  Given my experience in working with these items and also with Views Isotope, the task of developing a “proof of concept” solution fell to me.  I needed to implement some of the technically trickier things in our proposed solution for the gallery pages in order to prove that the features are feasible for the main website.  I decided to use the digital library for this development because

• the digital library already has the appropriate infrastructure in place
• both the digital library and our main website are based in Drupal 7
• the “proof of concept” solution, once complete, could remain in the digital library as a browse feature for our historical collections of student work

The full requirements for the final gallery are outside of the scope of this post, but our problem area is modifying the Views Isotope module to do some advanced things.

First, I need to take the existing Views Isotope module and modify it to use hash history on the same page as multiple filters.  Hash history with Isotope is implemented using the jQuery BBQ plugin, as is demonstrated on the Isotope website. This essentially means that when a user clicks on a filter, a hash value is added to the URL and becomes a line in the browser’s history.  This allows one to click the back button to view the grid with the previous filters applied.

Our specific use case is the following: when viewing galleries of student work from our school, a user can filter the list of works by several filter options, such as degree or discipline, (i.e., Undergraduate Architecture).  These filter options are powered by term references in Drupal, as we saw in my earlier Isotope post.  If the user clicks on an individual work to see details, clicking on the back button should return them to the already filtered list – they should not have to select the filters again.

Let’s take a look at how the end of the URL should progress.  If we start with:

.../student-work-archives

Then, we select Architecture as our discipline, we should see the URL change to :

.../student-work-archives#filter=.architecture

Everything after the # is referred to as the hash.  If we then click on Undergraduate, the URL will change to:

.../student-work-archives#filter=.undergraduate.architecture

If we click our Back button, we should go back to

.../student-work-archives#filter=.architecture

With each move, the Isotope animation should fire and the items on the screen should only be visible if they contain term references to the vocabulary selected.

Further, the selected filter options should be marked as being currently selected.  Items in one vocabulary which require an item in another vocabulary should be hidden and shown as appropriate.  For example, if a user selects Architecture, they should not be able to select PhD from the degree program, because we do not offer a PhD degree in Architecture, therefore there is no student work.  Here is an example of how the list of filters might look.

Once Architecture is selected, PhD is removed as a option.  Once Undergraduate is selected, our G1, G2 and G3 options are no longer available.

A good real-world example of the types of features we need can be seen at NPR’s Best Books of 2013 site.  The selected filter is marked, options that are no longer available are removed and the animation fires when the filter changes.  Further, when you click the Back button, you are taken back through your selections.

The Solution

It turns out that the jQuery BBQ plugin works quite nicely with Isotope, again as demonstrated on the Isotope website.  It also turns out that support for BBQ is included in Drupal core for the Overlay module.   So theoretically this should all play nicely together.

The existing views-isotope.js file handles filtering as the menu items are clicked.  The process is basically as follows:

• When the document is ready
  • Identify the container of items we want to filter, as well as the class on the items and set up Isotope with those options.
  • Pre-select All in each set of filters.
  • Identify all of the possible filter options on the page.
  • If a filter item is clicked,
    • first, check to make sure it isn’t already selected, if so, escape
    • then remove the “selected” class from the currently selected option in this set
    • add the “selected” class to the current item
    • set up an “options” variable to hold the value of the selected filter(s)
    • check for other items in other filter sets with the selected class and add them all to the selected filter value
    • call Isotope with the selected filter value(s)

To add the filter to the URL we can use bbq.pushState, which will add “a ‘state’ into the browser history at the current position, setting location.hash and triggering any bound hashchange event callbacks (provided the new state is different than the previous state).”

$bbq.pushState( options);

We then want to handle what’s in the hash when the browser back button is clicked, or if a user enters a URL with the hash value applied.  So we add an option for handling the hashchange event mentioned above.  Instead of calling isotope from the link click function, we call it from the hashchange event portion.  Now our algorithm looks more like this, with the items in bold added:

• Include the misc/jquery.ba-bbq.js for BBQ (I have to do this explicitly because I don’t use Overlay)
• When the document is ready
  • identify the container of items we want to filter, as well as the class on the items and set up Isotope with those options.
  • Pre-select All in each set of filters.
  • Identify all of the possible filter options on the page.
  • If a filter item is clicked,
    •   first, check to make sure it isn’t already selected, if so, escape
    •  then remove the “selected” class from the currently selected option in this set
    • add the “selected” class to the current item
    • set up an “options” variable to hold the value of the selected filter(s)
    • check for other items in other filter sets with the selected class and add them all to the selected filter value
    • push “options” to URL and trigger hashchange (don’t call Isotope yet)
      
  • If a hashchange event is detected
    • create new “hashOptions” object according to what’s in the hash, using the deparam.fragment function from jQuery BBQ
    • manipulate css classes such as “not-available” (ie. If Architecture is selected, apply to PhD) and “selected” based on what’s in “hashOptions”
    • call Isotope with “hashOptions” as the parameter
  • trigger hashchange event to pick up anything that’s in the URL when the page loads

I also updated any available pager links so that they link not just to the appropriate page, but also so that the filters are included in the link.  This is done by appending the hash value to the href attribute for each link with a class “pager”.

And it works.  Sort of…

The Unfinished Details

Part of the solution described above only works on Chrome and – believe it or not – Internet Explorer.  In all browsers, clicking the back button works just as described above, as long as one is still on the page with the list of works.  However, when linking directly to page with the filters included (as we are doing with the pager) or hitting back from a page that does not have the hash present (say, after visiting an individual item), it does not work on Firefox or Safari.  I think this may have to do with the deparam.fragment function, because that appears to be where it gets stuck, but so far can’t track it down.  I could directly link to window.location.hash, but I think that’s a security issue (what’s to stop someone from injecting something malicious after the hash?)

Also, in order to make sure the classes are applied correctly, it feels like I do a lot of “remove it from everywhere, then add it back”.  For example, if I select Architecture, PhD is then hidden from the degree list by assigning the class “not-available”.  When a user clicks on City and Regional Planning or All, I need that PhD to appear again.  Unfortunately, the All filter is handled differently – it is only present in the hash if no other options on the page are selected.  So, I remove “not-available” from all filter lists on hashchange and then reassign based on what’s in the hash.  It seems like it would be more efficient just to change the one I need, but I can’t figure it out.  Or maybe I should alter the way All is handled completely – I don’t know.

I also made these changes directly in the views-isotope.js, which is a big no-no.  What happens when the module is updated?  But, I have never written a custom module for Drupal which included JavaScript, so I’m not even sure how to do it in a way that makes sense.  I have only made changes to this one file.  Can I just override it somewhere?  I’m not sure.  Until I figure it out, we have a backup file and lots and lots of comments.

All of these details are symptoms of learning on the fly.  I studied computer science, so I understand conceptual things like how to loop through an array or return a value from a function, but that was more than ten years ago and my practical coding experience since then has not involved writing jQuery or Javascript.  Much of what I built I pieced together from the Drupal documentation, the Views Isotope documentation and issue queue, the Isotope documentation, the jQuery BBQ documentation and numerous visits to the w3schools.com pages on jQuery and Javascript.  I also frequently landed on the jQuery API Documentation page.

It is hard to have confidence in a solution when building while learning.  When I run into a snag, I have to consider whether or not the problem is the entire approach, as opposed to a syntax error or a limitation of the library.  Frequently, I find an answer to an issue I’m having, but have to look up something from the answer in order to understand it.  I worry that the code contains rookie mistakes – or even intermediate mistakes – which will bite us later, but it is difficult to do an exhaustive analysis of all the available resources.  Coding elegantly is an art which requires more than a basic understanding of how the pieces play together.

Inelegant code, however, can still help make progress.  To see the progress I have made, you can visit https://ksamedia.osu.edu/student-work-archives and play with the filters. This solution is good because it proves we can develop our features using Isotope, BBQ and Views Isotope.  The trick now is figuring out how to paint and put locks and doors on our newly built house, or possibly move a wall or two.

Once you have built a local development environment using an AMP stack, the next logical question is, “now what?”  And the answer is, truly, whatever you want.  As an example, in this blog post we will walk through installing Drupal and WordPress on your local machine so that you can develop and test in a low-risk environment.  However, you can substitute other content management systems or development platforms and the goal is the same: we want to mimic our web server environment on our local machine.

The only prerequisite for these recipes is a working AMP stack (see our tutorials for Mac and Windows), and administrative rights to your computer.  The two sets of steps are very similar.  We need to download and unpack the files to our web root, create a database and point to it from a configuration file, and run an install script from the browser.

There are tutorials around the web on how to do both things, but I think there’s two likely gotchas for newbies:

• There’s no “installer” that installs the platform to your system.  You unzip and copy the files to the correct place.  The “install” script is really a “setup” script, and is run after you can access the site through a browser.
• Setting up and linking the database must be done correctly, or the site won’t work.

So, we’ll step through each process with some extra explanation.

Drupal

Drupal is an open source content management platform.  Many libraries use it for their website because it is free and it allows for granular user permissions.  So as the site administrator, I can provide access for staff to edit certain pages (ie, reference desk schedule) but not others (say, colleague’s user profiles).  In our digital library, my curatorial users can edit content, authorized student users can see content just for our students, and anonymous users can see public collections.  The platform has its downsides, but there is a large and active user community.  A problem’s solution is usually only a Google search (or a few) away.

The Drupal installation guide is a little more technical, so feel free to head there if you’re comfortable on the command line.

First, download the Drupal files from the Drupal core page.  The top set of downloads (green background) are stable versions of the platform.  The lower set are versions still in development.  For our purposes we want the green download, and because I am on my Mac, I will download the tar.gz file for the most recent version (at the time of this writing, 7.23).  If you are on a Windows machine, and have 7zip installed, you can also use the .tar.gz file.  If you do not have 7zip installed, use the .zip file.

Now, we need to create the database we’re going to use for Drupal.  In building the AMP stack, we also installed phpMyAdmin, and we’ll use it now.  Open a browser and navigate to the phpMyAdmin installation (if you followed the earlier tutorials, this will be http://localhost/~yourusername/phpmyadmin on Mac and http://localhost/phpmyadmin on Windows).  Log in with the root user you created when you installed MySQL.

The Drupal installation instructions suggest creating a user first, and through that process, creating the database we will use.  So, start by clicking on Users.

Look for the Add user button.

Next, we want to create a username – which will serve as the user login as well as the name of the database.  Create a password and select “Local” from the Host dropdown.  This will only allow traffic from the local machine.  Under the “Database for user”, we want to select “Create database with same name and grant all privileges.”

Next, let’s copy the Drupal files and configure the settings.  Locate the file you downloaded in the first step above and move it to your web root folder.  This is the folder you previously used to test Apache and install phpMyAdmin so you could access files through your browser.  For example, on my Mac this is in mfrazer/sites.

You may want to change the folder name from drupal-7.23 to something a little more user friendly, e.g. drupal without the version number.  Generally, it’s bad practice to have periods in file or folder names.  However, for the purposes of this tutorial, I’m going to leave the example unchanged.

Now, we want to create our settings file.  Inside your Drupal folder, look for the sites folder. We want to navigate to sites/default and create a copy of the file called default.settings.php.  Rename the copy to settings.php and open in your code editor.

Each section of this file contains extensive directions on how to set the settings.  At the end of the Database Settings section, (line 213 as of this writing), we want to replace this

$databases = array();

with this

$databases['default']['default'] = array(
 'driver' => 'mysql',
 'database' => 'sampledrupal',
 'username' => 'sampledrupal',
 'password' => 'samplepassword',
 'host' => 'localhost',
 'prefix' => '',
 );

Remember, if you followed the steps above, ‘database’ and ‘username’ should have the same value.  Save the file.

Go back to your unpacked folder and create a directory called “files” in the same directory as our settings.php file.

Now we can navigate to the setup script in our browser.  The URL is comprised of the web root, the name of the folder you extracted the drupal files into and then install.php.  So, in my case this is:

localhost/~mfrazer/drupal-7.23/install.php

If I was on a Windows machine, and had changed the name of the folder to be mydrupal, then the path would be

localhost\mydrupal\install.php

Either way, you should get something that looks like this:

For your first installation, I would choose Standard, so you can see what the Standard install looks like.  I use Minimal for many of my sites, but if it’s your first pass into Drupal it is good to see what’s there.

Next, pick a language and click Save and Continue.  Now, the script is going to attempt to verify your requirements.  You may run into an error that looks like this:

We need to make our files directory writable by our web server users.  We can do this a bunch of different ways.  It’s important to think about what you’re doing, because it involves file permissions, especially if you are allowing users in from outside your system.

On my Mac, I choose to make _www (which is the hidden web server user) the owner of the folder.  To do this, I open Terminal and type in

cd ~/sites/drupal-7.23/sites/default

sudo chown _www files

Remember, sudo will elevate us to administrator.  Type in your password when prompted. The next command is chown, followed by the new owner the folder in question.  So this command will change the owner to _www for the folder “files”.

In Windows, I did not see this error.  However, if needed, I would handle the permissions through the user interface, by navigating to the files folder, right-clicking and selecting Properties.  Click on the Security tab, then click on Edit.  In this case, we are just going to grant permissions to the users of this machine, which will include the web server user.

Click on Users, then scroll down to click the check box under “Allow” and next to “Write.”  Click on Apply and then Ok.  Click OK again to close the Properties window.

On my Windows machine, I got a PHP error instead of the file permissions error.

This is an easy fix, we just need to enable the gd2 and mbstring extensions in our php.ini file and restart Apache to pick up the changes.

To do this, open your php.ini file (if you followed our tutorials, this will be in your c:\opt\local directory).  Beginning on Line 868, in the Windows Extensions section, uncomment (remove the semi-colon) from the following lines (they are not right next to each other, they’re in a longer list, but we want these three uncommented):

extension=php_gd2.dll
extension=php_mbstring.dll

Save php.ini file.  Restart Apache by going to Services, click on Apache 2.4 and click Restart.

Once you think you’ve fixed the issues, go back to your browser and click on Refresh.  The Verify Requirements should pass and you should see a progress bar as Drupal installs.

Next you are taken to the Configure Site page, where you fill in the site name, your email address and create the first user.  This is important, as there are a couple of functions restricted only to this user, so remember the user name and password that you choose.  I usually leave the Server Settings alone and uncheck the Notification options.

Click Save and Continue.  You should be congratulated and provided a link to your new site.

WordPress

WordPress is a very common blogging platform; we use it at ACRL TechConnect.  It can also be modified to be used as a content management platform or an image gallery.

Full disclosure: Until writing this post, I have never done a local install of WordPress.  Fortunately, I can report that it’s very straightforward.  So, let’s get started.

The MAMP instructions for WordPress advise creating the database first, and using the root credentials.  I am not wild about this solution, because I prefer to have separate users for my databases and I do not want my root credentials sitting in a file somewhere.  So we will set up the database the same way we did above:  create a user and a database at the same time.

Open a browser and navigate to the phpMyAdmin installation (if you followed the earlier tutorials, this will be http://localhost/~yourusername/phpmyadmin on Mac and http://localhost/phpmyadmin on Windows).  Log in with the root user you created when you installed MySQL and click on Users.

Look for the Add user button.

Next, we want to create a username – which will serve as the user login as well as the name of the database.  Create a password and select “Local” from the Host dropdown.  This will only allow traffic from the local machine.  Under the “Database for user”, we want to select “Create database with same name and grant all privileges.”

Now, let’s download our files.  Go to http://wordpress.org/download and click 0n Download WordPress.  Move the .zip file to your web root folder and unzip it.  This is the folder you previously used to test Apache and install phpMyAdmin so you could access files through your browser.  For example, on my Mac this is in mfrazer/sites.  If you followed our tutorial for Windows, it would be c:\sites

Next, we need create a config file.  WordPress comes with a wp-config-sample.php file.  Make a copy of it and rename it to wp-config.php and open it with your code editor.

Enter in the database name, user name and password we just created.  Remember, if you followed the steps above, the database name and user name should be the same.  Verify that the host is set to local and save the file.

Navigate in your browser to the WordPress folder.  The URL is comprised of the web root and the name of the folder where you extracted the WordPress files.  So, in my case this is:

localhost/~mfrazer/wordpress

If I was on a Windows machine, and had changed the name of the folder to be wordpress-dev, then the path would be

localhost\wordpress-dev

Either way, you should get something that looks like this:

Fill in the form and click on Install WordPress.  It might take a few minutes, but you should get a success message and a Log In button.  Log in to your site using the credentials you just created in the form.

You’re ready to start coding and testing.  The next step is to think about what you want to do.  You might take a look at the theming resources provided by both WordPress and Drupal.  You might want to go all out and write a module.  No matter what, though, you now have an environment that will help you abide by the cardinal rule of development: Thou shalt not mess around in production.

Let us know how it’s going in the comments!

Everyone occasionally dives right into a problem without researching (gasp!) the best solution.  For me, this once meant manually renaming hundreds of files and moving them into individual folders in preparation for upload to a digital repository.  Then finally a colleague said to me, and rightly so, “Are you crazy?  There’s scripts to do that for you.”

In my last post, I discussed file naming conventions and the best methods to ensure future access and use for files.  However, as librarians and archivists, we don’t always create the files we manage.  Donors bring hard drives and students bring USB drives and files get migrated…etc, etc.  Renaming existing files to bring them in line with our standards is often a daunting prospect, but there are lots of methods available to save time and sanity.

In this post, I’ll review a few easy methods for batch renaming files:

• Automator for Mac OS X – a built-in tool which aids in building scripts for this type of task
• Column Editor for Notepad++ in Windows – edit a list of rename commands, then run in a batch
• Batch File with a Loop in Windows – create a batch file which loops through the files and executes rename commands

The first two methods do not require any knowledge of coding; the last is slightly more advanced.  There are some caveats: if you are an experienced developer, it’s likely that you know a more efficient way.  I also tried to avoid any third-party tools specifically touted as renaming applications, as I have not used them and therefore cannot recommend which is best.  Lastly, while Photoshop and other photo editing software may help with this when working with image files, the options listed below should work with all file types.

In my example, I am using a set of 43 images waiting for upload to our digital library.  The files originated on a faculty member’s camera, so the names are in the following format:

DSCN2956.jpg
DSCN2957.jpg
DSCN2958.jpg
...

The images are of the Olympic Stadium in Beijing, China, and I would like the file names to reflect that, i.e. Beijing-OlympicStadium-01.jpg

Mac Automator

One of the features included in Mac OS X (10.4 and above) is Automator, the “personal automation assistant”, according to Apple Support.  The tool allows you to define a group of actions to take, automatically, on a given set of triggers.  For example, after discovering this tool I created a script which, when prompted, quickly grabs a screenshot and save it as a jpeg in a folder I specified.

For this post, let’s step through using the tool to batch re-name files.  First, I found a tutorial online.  These are everywhere, but specifically, I looked at “10 Awesome Uses for Automator Explained” by Matt Reich.  Reich gives a good succinct tutorial, placed in the context of personal photos.  We’re going to make a few changes in our steps, place it in the context of a digital collection and walk a little more slowly through the process.  I’ll be using Mac OS 10.8 in the steps and screenshots.

1.  Go to Finder, Open Applications and double-click on Automator.

2.  We’re going to create an Application.  Reich uses a Folder Action, which means that you would copy the items into the folder which would trigger the rename.  That approach makes sense as you move personal photos from a camera into the same Photos folder over and over again (in fact, I plan to use it myself).  However, in working with existing digital files that we just want to rename, which may need to live in many different folders, the Application is a more direct approach.  This will allow us to act on the files in place.  So, click on the Application Icon, and click on Choose.

3.  Now we need to add some Actions.  In the Library along the far left-hand pane, select “Files & Folders”.  The middle pane will now show all of the options for acting on Files & Folders.

4.  Click on “Rename Finder Items” and drag it to the large empty pane on the right.

5.  The system will prompt you as to whether or not you want to “Copy the Finder items.”  For this example, I opted not to, but if you prefer to make a copy, click on Add.

6.  The window you’ve dragged over will default to settings for “Add Date or Time”.  We want to do this eventually, but let’s start with changing the name and adding a sequence number.  In the drop-down menu at the top of the window, change “Add Date or Time” to “Make Sequential”

7.  Select the radio button next to “new name”, but don’t enter a default item name.

8.  Set the rest of the parameters.  For my purposes, I placed the number after the name, used a dash to separate, and used a three digit number set.

9.  Click on “Options” at the bottom, and select “Show this action when the workflow runs.”  The application will then prompt you to fill in the item name at runtime.

A note about the date:  In cases where you’d like to append a system date (e.g. Created, Modified, Last Opened or Current), you would use “Add Date or Time”.  To match our file naming conventions we have already established, we’ll want to select non-space and non-special characters as our separators, use Year Month Day as the format, and click the checkbox to “Use Leading Zeros”.  I would use a dash to separate the name from the date and no separator for Year Month Day.  Look at the example provided at the bottom to make sure the date looks correct.

However, in my case, I’m working with a set of files where the system dates aren’t much use to me.  I want to know the date of the photo; this is especially likely if I were working with scanned files from a historical period. So, I’m going to use “Add Text” instead, and append my own date.

10.  Repeat step 4: drag “Rename Finder Items” to the right pane.  This time, select “Add Text” from the dropdown.

11. Leave the “Add Text” field blank, click on “Options” and select “Show this action when the workflow runs.”  Then, when you run the application you’ll be prompted to add text and you can append 1950, for example, to the file name.

12.  Click on File > Save As, and save your Application in a location where it is easy to drag and drop files, like the Desktop.  For my example, I called the application BatchFileRename.

13.  Navigate to the folder containing the files you want to rename, and select them all (can use Cmd+A).  Drag the whole selection to the Automator file you just created, fill in the prompts and click “Continue”.

You now have a set of renamed files.  Note that the script did not modify the “Date Modified” value for the file.  The script is now set up for future projects as well; any time you want to rename files, just repeat step 13.

One thing you might notice is that the date is appended after the index number.  If you wanted it before the index number, we would append it to the “item name” field in the Make Sequential box and skip the Add Text section all together.

A note from a paranoid librarian:  I copied this set of files from its original location to do this example, so that if something went horribly wrong, I’d still have the originals.  Until you get comfortable with batch renaming you might consider doing the same.

There are lots of other uses for the Automator tool, check out “10 Awesome Uses for Automator Explained” by Matt Reich for more ideas, or do a search for Automator tutorials in your favorite search engine.

Windows – Notepad++ Column Editor

I started out hoping to accomplish this task the same way I did in the Mac OS X – with no outside tools.  However, the default renaming function in Windows lacks a few things for our purposes.  If you select a group of files, right-click and select “Rename”, you can rename all of the files at once.

However, the resulting file names do not conform to our earlier standards.  They contain spaces and special characters and the index number is not a consistent length, which can cause sorting headaches.

After some searching, I came across this stackoverflow page, which contained a very useful command:

dir /b *.jpg >file.bat

This command allows me to dump a directory’s files into a text file which I can edit into a series of rename commands to be run as a batch file.  The editing of the text file is the most time-consuming part, but using the Column Editor in Notepad++ speeds up the process considerably.  (This is where we break the “no third-party tool” convention.  Notepad++ is a free text editor I use frequently for writing code and highly recommend, though this process may work with other text editors.)

1.  Open a command prompt.

2.  Navigate to the directory which contains the files that need to be renamed.

3.  The command we found above is composed of several parts.  “dir” lists the directory contents, “/b” indicates to only list the filenames, “*.jpg” means to grab only the jpg files, and “>file.bat” directs the output to a file called file.bat.  We are going to keep everything the same except change the name of our output file.

dir /b *.jpg >rename.bat

4.  In Windows Explorer, navigate to the directory and find the file you just created.  Right click on it and select Edit with Notepad++ (or Open With > Your Text Editor).

5.  Put the cursor before the first letter in the first line, and open the Column Editor (Edit > Column Editor or Alt+C).

6.  This tool allows you to assign the same character to every line of text in the same space.  We want to insert the beginning of the Windows rename command for each line.  So, in the “text to insert” box, we type:

rename "

and click OK.

7.  Open the editor again to add the portion of the rename command which goes after the old filename.  Here is where we’ll designate our new name, again using the “text to insert” box.  I typed:

" "Beijing-OlympicStadium-

(Note, if you are using file names of varying length, move to the column after the longest file name, then use Find & Replace at the end of the process to remove the extra spaces.)

8.  Next, let’s append an index before the file extension.  Open the Column Editor again and this time, select the number option.  Start at 1, increment by 1, and check the leading zeros box. Click Ok.

9.  Last, append the file extension and end the command for each line.  Using the Column Editor’s “text to insert” box one more time, add:

.JPG"

10. The Column Editor adds one extra line at the bottom.  Scroll down and delete it before saving the file.

11. Save the file and go back to the command prompt. (If you closed it, re-open it and navigate back to the directory before proceeding.)

12.  Type in the full name of the batch file so it will execute, i.e.

rename.bat

You’ll see the rename commands go by, and the files will each have a new name.  Again, this doesn’t appear to affect the Date Modified on the file.

Windows – Batch File with Loop

It is possible to write your own batch file that will loop through the files in question and rename them.  I have never written my own batch file, so in the interest of researching this post, I decided to give it a shot.  There is lots of documentation available online to help in this effort.  I consulted Microsoft’s documentation, DOS help documentation, and batch file examples (such as this stackoverflow post and a page on OhioLINK’s Digital Resource Management Committee wiki, which focuses preparing files for DSpace batch upload).

A batch file just groups a number of Windows commands together in one file and executes them when the batch file is run, as we saw in our previous example. But, instead of writing the specific rename commands one by one using a text editor, a batch file can also be used to generate the commands on the fly.  Save the following code to a file, place it in the same directory with the set of files and then double click to run it.  Caveat: test this with sample files before you use it!  I have tested on a few directories, but not extensively.

First, we use @echo off to stop the batch commands from printing to the command line window.

@echo off

Then, we set EnableDelayedExpansion so that our index counter will work (has to do with evaluating the variable at execution).  This is why when you see i in the loops, it is written !i! instead of %i% used for other variables.

@setlocal enabledelayedexpansion

Next, I set three prompts to ask the user for some information about the renaming. What’s the root name we want to use? What’s the file extension? How many files are there? (Note, this will only work for under 1000 files).  The “/p” flag assigns the response to the prompt to a variable (r, e and n, respectively).  When we reference these variables later, we’ll use the syntax %r% %e% and %n%.

set /p r=Enter name root: 
set /p e=Enter file extension (ie .jpg .tif): 
set /p n=More than one hundred files? (y/n):

Next, we set the index counter, which allows to add an incrementing index to our filenames.

set /a "i = 1"

If there are less than 100 files, we only need one leading zero in the index for our first ten files, and none for the remaining. If there are more than 100, obviously we’ll want a three digit index. So, the following if statement allows us to fork to one of two loops – for two digits or three digits.

if %n%==y (GOTO three) else GOTO two

Our first segment handles three digit indexes for more than 100 files.  %%v is the temporary variable that holds each item as we iterate through the loop one time. *%e% represents a wildcard plus the extension given by the user. So, if the user enters .jpg, we want to select *.jpg, or all files with a .jpg extension. Everything that follows “do” is a command.

:three
for %%v in (*%e%) do (

First, we want to see if, based on the index counter i, we need leading zeros. If i is less than ten, we want two leading zeros. If it’s less than 100, we want one leading zero. This affects the renaming statement that gets applied. All of the rename statements will rename the file currently in %%v to the root name (represented by %r%), followed by a hyphen, the correct number of leading zeros, the index number (represented by !i!) and the file extension (represented by %e%).

if !i! lss 10 (
rename %%v %r%-00!i!%e%
) else (
if !i! lss 100 (
rename %%v %r%-0!i!%e%
) else (
rename %%v %r%-!i!%e%
)
)

Before we exit the loop, we want to increment the index to use with the next file. And, lastly, we need to add a “goto done” statement, so that we don’t execute the “two” segment.

set /a "i = i + 1"
)
goto done

The “two” section is the basically the same, except that we only need two digit indexes since there are less than 100 files.

:two
for %%v in (*%e%) do (
if !i! lss 10 (
rename %%v %r%-0!i!%e%
) else (
rename %%v %r%-!i!%e%
)
set /a "i = i + 1"
)

We end with our “done” label, which marks the exit point.

:done

Here is the code as a whole:

@echo off
@setlocal enabledelayedexpansion
set /p r=Enter name root: 
set /p e=Enter file extension (ie .jpg .tif): 
set /p n=More than one hundred files? (y/n): 
set /a "i = 1"
if %n%==y (GOTO three) else GOTO two
:three
for %%v in (*%e%) do ( 
 if !i! lss 10 (
 rename %%v %r%-00!i!%e%
 ) else (
 if !i! lss 100 (
 rename %%v %r%-0!i!%e%
 ) else (
 rename %%v %r%-!i!%e%
 )
 )
 set /a "i = i + 1"
)
goto done
:two
for %%v in (*%e%) do (
 if !i! lss 10 (
 rename %%v %r%-0!i!%e%
 ) else (
 rename %%v %r%-!i!%e%
 )
 set /a "i = i + 1"
 )
:done

I saved the file as BatchRename.bat, and then copied it to my test directory. Double click on the .bat file to open it. Enter the prompts and the batch file takes care of the rest.

The files are renamed and again, the Date Modified field was not changed by this action.

Conclusion

Of the three methods, I slightly prefer the Automator method, because of its simplicity and ability to be re-used: once the application is created it can be used over and over again with different sets of files.  The batch file for Windows is similar in that it can be re-used once created, but does require some knowledge of coding concepts.  With the Notepad++ method, we have simplicity, but you’ll need to step through the file editing with each new set.  I love the Column Editor, however; the Insert Number function is incredibly useful for indexing files in file names without the pesky Window parentheses.

All of the methods are quick and easy ways to rename a large set of files.  And from personal experience, I will attest that all are preferable to doing it manually.

I’m curious to hear our readers’ thoughts – feel free to leave questions and other recommendations in the Comments section below.