Integrating WordPress media with TNG
Introduction
One of the drawbacks of using a WordPress-TNG integration has been the inability to share media between the two applications. This has meant that if you wished to use the same media, an image for instance, in both applications, you had to store it twice on the server. If you have a lot of media, that can use up existing space unnecessarily. I recently began experimenting and using a suggestion from Rick Bisbee, I was able to come up with a successful method for setting up TNG to recognize media folders in the WordPress uploads directory. Following are step-by-step instructions on how to do this.
Instructions
Creating WordPress Media Folders
In order for media integration to work efficiently, you will need to have the same folder structure in WordPress that is used in TNG. WordPress does not natively recognize any folder structure other than /year/month/day, so you will need to install a plugin. There are a number of really good premium plugins, but the one I recommend as a free version is WordPress Media Library Folders. This is a fairly straightforward plugin that is easy to use and you don't need the pro/paid version to get the functionality you need.
Once you have installed and activated the plugin, click on the "Media Library Folders" link in the Dashboard menu and create your new media folders (see image).
Once you have created your folders, you can use the "Add File" link from within each folder to add media.
Cautionary Note: By default WordPress creates multiple sizes of each image. You can turn off this feature to simplify media selection by going to Settings --> Media and under Image Sizes, set the medium and large sizes to 0,0. If you want proportional thumbnails, do NOT check the box under "Thumbnail".
Setting up TNG
For TNG to recognize the folders in WordPress, you will need to create a symbolic link to those folders. (See Symbolic Links Quick Reference for explanation.) The folders can't already exist in your TNG directory for this to work, so you will need to download them to your local computer and delete the folders from the server via FTP or your Control Panel File Manager.
Using a text editor program (NOT a word processor like Office), create a new file called something like media_symlinks.php. In that file you are going to add the following lines (just copy and paste):
<?php
symlink( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/documents', $_SERVER['DOCUMENT_ROOT'].'/genealogy/documents');
symlink( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/headstones', $_SERVER['DOCUMENT_ROOT'].'/genealogy/headstones');
symlink( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/histories', $_SERVER['DOCUMENT_ROOT'].'/genealogy/histories');
symlink( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/media', $_SERVER['DOCUMENT_ROOT'].'/genealogy/media');
symlink( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/photos', $_SERVER['DOCUMENT_ROOT'].'/genealogy/photos');
?>
This assumes that you have named your TNG directory "genealogy." If you used something different, change it in the code above. Save that file and upload it to your web root (i.e., public_html, public, www). Then in your browser, navigate to your homepage and run that script. In my case, that might be larleegenealogy.org/media_symlinks.php. If the script ran correctly, you will see a blank page. If you get a message like "directory already exists," did you remember to delete the existing folders in your TNG directory?
Once you have created the symbolic links, you can navigate to Media in TNG Admin and use the File Picker to either upload or find on the server the media. If you upload, you will need to go to the Media Library Folders tab in WordPress and sync the folder to the server so WordPress can find the file you uploaded. Once the file has been synced, you can find the thumbnail.
Now you can have all your media stored in one location for use by both WordPress and TNG.
Related Links
- Symbolic Links Quick Reference a quick how to
- Symbolic Links an in depth discussion of symbolic links
- The Complete Guide to Creating Symbolic Links (aka Symlinks) on Windows
- How to Create and Use Symbolic Links (aka Symlinks) on a Mac