<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jefferson&#039;s Newspaper &#187; omeka</title>
	<atom:link href="http://jeffersonsnewspaper.org/tags/omeka/feed/" rel="self" type="application/rss+xml" />
	<link>http://jeffersonsnewspaper.org</link>
	<description>A blog about information, education, and the (digital) humanities...</description>
	<lastBuildDate>Thu, 02 Feb 2012 16:01:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Migrating from ContentDM to Omeka</title>
		<link>http://jeffersonsnewspaper.org/2011/migrating-from-contentdm-to-omeka/</link>
		<comments>http://jeffersonsnewspaper.org/2011/migrating-from-contentdm-to-omeka/#comments</comments>
		<pubDate>Wed, 14 Sep 2011 13:47:46 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Reference]]></category>
		<category><![CDATA[contentDM]]></category>
		<category><![CDATA[csv import]]></category>
		<category><![CDATA[digital humanities]]></category>
		<category><![CDATA[library stuff]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[tab delimited export]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=423</guid>
		<description><![CDATA[Seems like the Omeka forums get a lot of traffic from people looking to migrate from ContentDM to Omeka. I, personally, get inquiries about this all the time (for some unknown reason). So I figured I may as well share what I know about the process here so I can just send a link or you can find it on Google or whatever. It&#8217;s worth noting at the outset that I don&#8217;t know anything about...]]></description>
			<content:encoded><![CDATA[<p><img src="http://jeffersonsnewspaper.org/wp-content/uploads/2009/08/box.png" alt="" title="box" width="630" height="auto" class="aligncenter size-full wp-image-1128" /><br />
Seems like the Omeka forums get a lot of traffic from people looking to migrate from ContentDM to Omeka. I, personally, get inquiries about this all the time (for some unknown reason). So I figured I may as well share what I know about the process here so I can just send a link or you can find it on Google or whatever. </p>
<p><span id="more-423"></span></p>
<p>It&#8217;s worth noting at the outset that I don&#8217;t know anything about generating ContentDM export files <del datetime="2011-09-23T13:48:55+00:00">(partially because even the ContentDM <em><a href="http://www.oclc.org/us/en/contentdm/support/default.htm" title="Good luck with this...">documentation</a></em> is proprietary, or at least hidden behind a login)</del>. But I do know that every time someone has sent me a cDM export file, it is in tab-delimited format (<strong>UPDATE:</strong> here is the <a href="http://www.contentdm.org/help6/collection-admin/exporting2.asp" title="Exporting to Tab-delimited Text Files @ ContentDM">Tab-delimited export documentation</a>), which is basically a plain text spreadsheet. I gather these spreadsheets can be produced pretty easily so I think we can start by assuming you already have the spreadsheet and need to prep it for import into Omeka, which will be done in this tutorial using the CSV Import plugin. If you are not already familiar with how that plugin works, check out the <a href="http://omeka.org/codex/Plugins/CsvImport" title="CSV Import plugin @ Omeka.org">documentation page at Omeka.org</a> before continuing.</p>
<h4>You probably need to use Excel</h4>
<p>First, open the tab-delimited spreadsheet in Microsoft Excel. You will later save this file in CSV format. If you prefer using non-MS spreadsheet software, you are probably out of luck. As far as I know, neither OpenOffice/LibreOffice nor Apple&#8217;s Numbers have an equivalent &#8216;Text-to-Columns&#8230;&#8217; functionality, which will be used in this process. </p>
<h4>Remove unwanted and problematic rows/columns, Rename column headers</h4>
<p>Once you have your spreadsheet open in Excel, go ahead and remove any ContentDM-specific administrative metadata, or anything else you don&#8217;t wish to carry over to Omeka during the migration. At this point, you should probably rename the column headings to something meaningful. This will help with the crosswalk step later.</p>
<h4>Breaking out semicolon-delimited values</h4>
<p>Next, you will want to check for columns having multiple entries within a single cell. At the very least, this will probably include the Subjects column (because archivists/librarians are <em>never</em> satisfied with assigning just one subject term&#8230; subject classification being the <a href="http://youtu.be/QRzcjw9l6xo" title="Lay's 'Betcha Can't Eat Just One' commercial, circa 1980s">Lay&#8217;s potato chip</a> of librarianship). By default, these multiple subjects will be separated by a semicolon (e.g. &#8220;Librarianship &#8212; Potato Chip Analogies; Librarianship &#8212; Puns; Librarianship &#8212; Personality Disorders;&#8221; ). Instead of copying each one of these entries into a new Subjects column, you can just use the &#8220;Data > Text to Columns&#8230;&#8221; feature in Excel. I recommend using a separate worksheet for this step as the new columns will overwrite your existing ones if you are not careful.</p>
<h4>Getting the File Path URLs</h4>
<p>So you&#8217;ve shaped up all the metadata on the spreadsheet. Now you need to define the path to the item file in ContentDM. This is probably the trickiest part to come up with on your own, especially if you are not so familiar with ContentDM. Basically, our starting point will be the cDM &#8220;Reference URL.&#8221; Those look something like this: <a href="http://images.ulib.csuohio.edu/u?/press,59" title="example of a ContentDM reference URL from the Cleveland Memory Project">http://images.ulib.csuohio.edu/u?/press,59</a>. Assuming you have a whole column of Reference URLs, you need to run a Find and Replace to create your file path (again, I recommend doing this in a separate worksheet so you don&#8217;t accidentally overwrite important data). Let&#8217;s begin.</p>
<p><strong>UPDATE:</strong> in ContentDM version 6+, <a href="http://www.contentdm.org/help6/custom/customize2ai.asp" title="GetFile @ ContentDM">ShowFile is replaced by GetFile</a>. Adjust the following instructions as needed (i.e. in the first Find and Replace, swap out showfile.exe with getfile.exe).</p>
<p>Start with something like:<br />
<code>http://images.ulib.csuohio.edu/u?/press,59</code></p>
<p>FIND this:<br />
<code>u?/</code><br />
&#8230; and REPLACE with this:<br />
<code>cgi-bin/showfile.exe?CISOROOT=/</code></p>
<p>Next, FIND this:<br />
<code>,</code><br />
&#8230;and REPLACE with:<br />
<code>&#038;CISOPTR=</code></p>
<p>So now we have something that looks like:<br />
<code>http://images.ulib.csuohio.edu/cgi-bin/showfile.exe?CISOROOT=/press&#038;CISOPTR=59</code></p>
<p>This is a working file path that can be used by the CSV Import plugin to ingest the item file along with the metadata record. </p>
<p>In some instances, you might need to tweak this process. For example, if your ContentDM installation includes JP2 or TIF files (or some other unfriendly image format) but you don&#8217;t want the hassle of building a custom display wrapper into your Omeka theme, you can append some additional query string parameters to your file URL. </p>
<p>So if you want ContentDM to serve up a JPG instead of a JP2 (or other&#8230;) file, add this to your file column<br />
<code>&#038;DMSCALE=100.00000&#038;DMWIDTH=1600&#038;DMHEIGHT=1600&#038;DMX=0&#038;DMY=0&#038;DMTEXT=&#038;REC=1&#038;DMTHUMB=0&#038;DMROTATE=0</code><br />
&#8230;using this Excel function (where A2 is the first column/cell in need of appending):<br />
<code>=CONCATENATE(A2,"&#038;DMSCALE=100.00000&#038;DMWIDTH=1600&#038;DMHEIGHT=1600&#038;DMX=0&#038;DMY=0&#038;DMTEXT=&#038;REC=1&#038;DMTHUMB=0&#038;DMROTATE=0")</code></p>
<p>Finally, you need to swap <em>showfile</em> with <em>getimage</em> in the file URL above by running one more find and replace in Excel.</p>
<p>So now, your file path looks like:<br />
<code>http://images.ulib.csuohio.edu/cgi-bin/getimage.exe?CISOROOT=/press&#038;CISOPTR=59&#038;DMSCALE=100.00000&#038;DMWIDTH=1600&#038;DMHEIGHT=1600&#038;DMX=0&#038;DMY=0&#038;DMTEXT=&#038;REC=1&#038;DMTHUMB=0&#038;DMROTATE=0</code></p>
<p>This will return a JPG file, which is pretty handy. <del datetime="2011-09-23T13:48:55+00:00">These additional parameters will vary by installation and file type. I don&#8217;t know what all of the parameters are or even what each one does; only that this usually works. Again, this is a case where actual ContentDM documentation would be really handy.</del> <strong>UPDATE: </strong>Keep in mind that this only works with image file types. For more details, check out the <a href="http://www.contentdm.org/help6/custom/customize2aj.asp" title="GetImage @ ContentDM">GetImage documentation</a>.</p>
<h4>Metadata Crosswalk</h4>
<p>It&#8217;s usually a good idea to plan out your <a href="http://en.wikipedia.org/wiki/Schema_crosswalk" title="Schema Crosswalk @ Wikipedia">metadata crosswalk</a> in advance, especially if you have multiple export files (and you should if your collection is bigger than a few hundred items; more on that later).  Remember that Omeka – out of the box – only uses the <a href="http://omeka.org/codex/Working_with_Dublin_Core" title="Working with Dublin Core @ Omeka Codex">first 15 Dublin Core elements</a>.  You may need to <a href="http://omeka.org/codex/Managing_Item_Types" title="Managing Item Types @ Omeka Codex">add a new Item Type</a> or install <a href="http://omeka.org/codex/Plugins/DublinCoreExtended" title="DublinCoreExtended @ Omeka Codex ">Dublin Core Extended</a> in order to find/create an appropriate home for your legacy/custom metadata in Omeka. </p>
<h4>Batching</h4>
<p>To avoid server timeouts, you should consider breaking your spreadsheets into manageable batches. I try not to import more than a few hundred items at a time, and even then one of the two servers involved is likely to timeout or throw an error or something. Keeping the batches small makes it easier to isolate problems, avoid import errors, and undo problematic imports.</p>
<h4>Using the CSV Import Plugin</h4>
<p>From here, just follow the standard instructions for using the <a href="http://omeka.org/codex/Plugins/CsvImport" title="CSV Import plugin @ Omeka.org">CSV Import plugin</a>.</p>
<h4>Bugs, Known Issues, and Limitations</h4>
<p>As of version 1.3, there are still some quirks. For example, your file path – that hideous long URL you worked so hard to create – will become the actual name of your imported/migrated file. In some instances, your files may be ingested sans file extension (e.g. .pdf, .jpg, .mp3), which can cause various headaches (though it&#8217;s worth noting that these files will generally display inline on your site, due to the way most Omeka themes handle media files, and will only break down when someone tries to download the file, in which case they would need to manually add the file extension). From time to time, you could have an import that hangs indefinitely, never finishing and never failing &#8212; and thus not easily &#8220;undo-able&#8221; (at least, the &#8220;Undo Import&#8221; button will not be visible). In such a case, you can manually create that button by entering the following URL pattern into your address bar: </p>
<p><code>http://[PATH TO YOUR OMEKA INSTALLATION]/admin/csv-import/index/undo-import/id/[IMPORT ID]</code> </p>
<p>&#8211; this is on the plugin documentation page by the way, as are several other points in this tutorial. </p>
<p>One of the biggest limitations of the CSV import strategy is that you will probably have issues migrating compound objects and other multi-file items, primarily because of the way ContentDM formats the export file and serves compound objects online and partially due to limitations in the way the plugin works with Omeka. Basically, you need all the files for an item to be in the same row as all of the other item-level metadata (e.g. in columns like &#8220;File 1,&#8221; &#8220;File 2,&#8221; &#8220;File 3,&#8221; etc). And there is currently no way to use the CSV Import plugin to assign file-level metadata. For example, if you had a postcard in your ContentDM collection and it had distinct metadata for each side (say, for front.jpg and verso.jpg), along with general metadata for the object as whole, something is going to be lost in the migration without some serious elbow grease.</p>
<p>The <a href="https://groups.google.com/forum/#!searchin/omeka-dev/csv" title="CSV search results @ Omeka Dev">Omeka Dev forums</a> are the best place to report bugs, inquire about error messages, discuss workarounds, and submit patches. The general <a href="http://omeka.org/forums/" title="Omeka Forums">Omeka Forums</a> are also great for more basic questions; happily, most questions get answered in fairly short order. <em>Please do not post support questions here.</em> Please <em>do</em>, however, feel free to leave general comments, suggestions for improvement, requests for clarification, etc.</p>
<p>IMAGE NOTE: poorly Photoshopped post image contains assets by multiple artists and designers, including the amazing &#8220;Bob&#8221; sketch from <a href="http://twinpeaksarchive.blogspot.com/2007/07/exclusive-matt-haley-interview.html" title="Matt Haley interview @ Twin Peaks Archive">Matt Haley&#8217;s unreleased but totally awesome sounding <em>Twin Peaks: Season 3</em> graphic novel</a>. </p>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2011/migrating-from-contentdm-to-omeka/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Deco, an Omeka Theme</title>
		<link>http://jeffersonsnewspaper.org/2010/deco-an-omeka-theme/</link>
		<comments>http://jeffersonsnewspaper.org/2010/deco-an-omeka-theme/#comments</comments>
		<pubDate>Mon, 06 Dec 2010 04:38:59 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Education]]></category>
		<category><![CDATA[Themes]]></category>
		<category><![CDATA[deco]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[edtech]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[themes]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=813</guid>
		<description><![CDATA[Deco is a free theme for Omeka. Though I started working on an Omeka theme for use by a more general audience and without any particular motivation beyond having a lame sense of fun, as I got going, I realized it might be really useful for the group of social studies teachers with whom I&#8217;ve been working this past week. As part of a grant-funded workshop, the teachers needed to start their own WordPress- and...]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter size-large wp-image-974" title="Deco screen: smoothbrown.css" src="http://jeffersonsnewspaper.org/wp-content/uploads/2010/07/Screen-shot-2010-12-06-at-3.31.13-AM-1024x541.png" alt="" width="620" height="327" /></p>
<p>Deco is a free theme for <a title="Omeka.org" href="http://omeka.org/">Omeka</a>.  Though I started working on an Omeka theme for use by a more general audience and without any particular motivation beyond having a lame sense of fun, as I got going, I realized it might be really useful for the group of social studies teachers with whom I&#8217;ve been working this past week.  As part of a grant-funded workshop, the teachers needed to start their own WordPress- and Omeka-based websites (for use in their classrooms).  As you might expect, none of the teachers had experience with such things.  After an arduous 4 hour workshop in which the group got all of their hosting plans purchased and sites installed and configured, we kind of slowly came to a realization that there was still foundational work to be done.  Though Omeka is quite user friendly, it&#8217;s still best managed (in a self-hosted environment that is), by users having at least some experience with and understanding of web publishing.  (<a href="http://omeka.net/">omeka.net</a> is a great hosted alternative by the way, and works much like <a title="wordpress.com" href="http://wordpress.com/">wordpress.com</a>, but for various reasons was not right for our project).  And so the scope of this little side project grew as I tried to anticipate some of the problems novice users might encounter.</p>
<p><span id="more-813"></span></p>
<p>For one, <a title="Omeka themes directory" href="http://omeka.org/add-ons/themes/">Omeka&#8217;s publicly available themes</a> sometimes seem lacking when combined with certain plugins.  Each of the available themes is quite nice on its own terms and perfect for building out by experienced users (in fact, this theme is built on the very excellent Berlin theme by Jeremy Boggs and Ken Albers), but even for those with a moderate amount of design and coding knowledge, changing things up can be daunting, requiring a lot of time querying the forums, and browsing the documentation.  I knew that most of the teachers would be using a set of plugins that require additional styling and code insertion and so I tried to prepare the theme with as much plugin-specific styling and conditional templating I could so that they would not have to fool around too much.  The most common needs should hopefully be addressed by the core templates and through the many configurable theme options</p>
<p>This is my first public theme and it&#8217;s been quite an experience thinking   through all the possible use cases.  I think I have accounted for the most   common possibilities, but it&#8217;s possible something could still come up and   present a problem: there could be errors to debug, display problems in older browsers, poorly formed functions, etc..  Thus, I&#8217;m calling this version 0.9, just to be safe, but I think it is certainly usable at this point.  Nevertheless, the usual &#8220;no warranty&#8221; caveat applies.</p>
<h3>Deco theme for Omeka</h3>
<p><strong>Designed for: </strong>Omeka Version: 1.3</p>
<p><strong>Browser tested in: </strong>Internet Explorer 8+, and current versions of Firefox, Chrome, Safari, and Opera</p>
<p><strong>License: </strong>GPL</p>
<p><strong>Changelog</strong>:</p>
<ul>
<li>Dec 06 2010 &#8212; v. 0.9: initial release</li>
<li>Jan 15 2011 &#8212; v. 0.9.5: updated for compatibility with Omeka 1.3 and new plugin releases, various bug fixes</li>
<li>March 06 2011 &#8212; v. 0.9.6: added html5/flash video support, improved image gallery on homepage (now uses any featured item that has an image attached, randomized display), started cleaning up ugly code, various bug fixes and layout tweaks</li>
<li>April 27 2011 &#8212; v. 0.9.6.1: added deco_display_rss() function to custom.php, fixed bug in Featured Exhibit function on homepage to detect if Exhibit Builder plugin was installed/activated, minor layout tweaks</li>
<li>June 26 2011 &#8212; v. 0.9.6.2: removed show_untitled_items() function due to incompatibility with Omeka 1.4</li>
<li>August 30, 2011 &#8212; v. 0.9.6.3: fixed minor bug in config.ini that was affecting some users</li>
</ul>
<p><strong>Unique Features:</strong></p>
<ul>
<li>Featured Item slideshow on homepage (jQuery, <a title="Awkward Showcase" href="http://www.awkward.se/sandbox/awkward-showcase-a-jquery-plugin/">Awkward Showcase</a>)</li>
<li>Lightbox effect for images on items/show (jQuery, <a title="FancyBox" href="http://fancybox.net/">FancyBox</a>)</li>
<li>Built in support for HTML 5 Video with Flash fallback (<a title="VideoJS" href="http://videojs.com/">VideoJS</a>, <a title="FlowPlayer" href="http://flowplayer.org/">Flowplayer</a>)</li>
<li>&#8220;Edit this Item&#8221; button on items/show</li>
<li>Add an RSS feed anywhere on your site using the deco_display_rss($feedUrl,$num) function (uses <a title="Zend RSS" href="http://framework.zend.com/manual/en/zend.feed.consuming-rss.html">Zend RSS</a>, note that using this function may lead to slower load times)</li>
<li>Configurable theme options
<ul>
<li>stylesheet-switching with 4 designs in the initial version (plus a custom.css option for advanced users)</li>
<li>user-defined tagline</li>
<li>user-defined &#8220;About&#8221; text on the homepage</li>
<li>user-defined number of recent items to display on the homepage</li>
<li>toggle lightbox on items/show</li>
<li>toggle slideshow on homepage</li>
<li>toggle &#8220;Random Featured Collection&#8221; on homepage</li>
<li>toggle images with &#8220;Random Featured Collection&#8221; on homepage</li>
<li>toggle &#8220;Related Exhibits&#8221; on items/show</li>
<li>toggle theme credits in footer</li>
</ul>
</li>
<li>Built in support for common plugins
<ul>
<li>MyOmeka (user status in footer, CSS styles)</li>
<li>Exhibit Builder (CSS styles)</li>
<li>DocsViewer (ideal placement in items/show if user does not choose the default embed on items/show option)</li>
</ul>
</li>
</ul>
<p><strong>Known Issues and Planned Improvements</strong></p>
<ul>
<li>ISSUE: Conflict with Image Annotation plugin breaks the gallery and fancybox scripts.</li>
<li>PLANNED IMPROVEMENT: Additional stylesheet choices (better, more varied)</li>
<li>PLANNED IMPROVEMENT: L<span style="color: #000000;"><del></del>et users configure or at least turn off HTML5 video options in theme settings.</span></li>
</ul>
<h3 style="text-align: center;"><a title="Deco (beta), version 0.9.6.4" href="http://github.com/ebellempire/Deco">Download Deco, version 0.9.6.4 [GitHub]</a></h3>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2010/deco-an-omeka-theme/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Adding a Featured Image Gallery to Omeka Using GalleryView</title>
		<link>http://jeffersonsnewspaper.org/2010/adding-a-featured-image-gallery-to-omeka-using-galleryview/</link>
		<comments>http://jeffersonsnewspaper.org/2010/adding-a-featured-image-gallery-to-omeka-using-galleryview/#comments</comments>
		<pubDate>Thu, 15 Jul 2010 03:39:39 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Reference]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[galleryview]]></category>
		<category><![CDATA[homepage]]></category>
		<category><![CDATA[image galleries]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[open source]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=814</guid>
		<description><![CDATA[Following on my previous entry on adding an image Lightbox to Omeka, today I&#8217;ll run through the steps it takes to get a featured image gallery running on your Omeka homepage. I searched for awhile to find a gallery plugin that a.) looks good, b.) works well and c.) is not too complicated for me to figure out. Fitting the bill nicely, I found GalleryView, a fairly lightweight jQuery plugin with lots of options for...]]></description>
			<content:encoded><![CDATA[<p><img src="http://jeffersonsnewspaper.org/wp-content/uploads/2010/07/screen-capture-1.png" alt="" title="GalleryView Demo Image (via SpaceForAName)" width="817" height="430" class="aligncenter size-full wp-image-849" /></p>
<p>Following on my previous entry on <a title="Adding an Image Lightbox to Omeka" href="http://jeffersonsnewspaper.org/2009/adding-an-image-lightbox-in-omeka/">adding an image Lightbox to Omeka</a>, today I&#8217;ll run through the steps it takes to get a featured image gallery running on your Omeka homepage. I searched for awhile to find a gallery plugin that a.) looks good, b.) works well and c.) is not too complicated for me to figure out.  Fitting the bill nicely, I found <a title="GalleryView @ SpaceForAName" href="http://spaceforaname.com/galleryview">GalleryView</a>, a fairly lightweight jQuery plugin with lots of options for your tweaking enjoyment.  It&#8217;s a bit more challenging to implement than Lightbox and requires a fair amount of CSS knowledge to prettify, but this should help you get started.</p>
<p><span id="more-814"></span></p>
<p><strong>Step One: Download and Install GalleryView (and edit the GalleryView CSS)</strong></p>
<p><a title="GalleryView @ SpaceForAName" href="http://spaceforaname.com/galleryview">Download the GalleryView package</a> and place it in your theme&#8217;s /common/ directory.  Be sure that you have placed the whole shebang directly inside the /common/ directory and renamed the outer folder galleryview (if you use the default galleryview-2.1.1 name, you&#8217;ll need to adjust the scripts below to match).  Go into your theme to common/galleryview/galleryview.css and edit the first id, changing it from #photos to #featured-gallery (or something else if you prefer, see below for details).</p>
<p><strong>Step Two: Edit your Header (Scripts and Configurations)</strong></p>
<p>The code below will work as is if you are using the popular Berlin theme, but if not simply replace the word berlin below with the name of your Omeka theme.  Be sure the paths below match with where you actually placed your files in the previous step. </p>
<p><em>*** To save hours of confusion, watch out for typos and try using your browser&#8217;s &#8220;view source&#8221; feature to ensure that your links are reaching their destination.</em></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;link rel=&quot;stylesheet&quot; href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/berlin/common/galleryview/galleryview.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/berlin/common/galleryview/jquery.galleryview-2.1.1-pack.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/berlin/common/galleryview/jquery.timers-1.2.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/berlin/common/galleryview/jquery.easing.1.3.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
		jQuery.noConflict();  
		jQuery(document).ready(function(){
		jQuery('#featured-gallery').galleryView({
			panel_width: 425,
			panel_height:430,
			filmstrip_position:'bottom',
			show_captions: true,
			pause_on_hover:true,
			transition_interval:5000,
			nav_theme:'light'
		});
	});
&lt;/script&gt;</pre></div></div>

<p>That final, multi-line script above initializes GalleryView and contains your configurations.  You can change them however you like according to the <a href="http://spaceforaname.com/galleryview">GalleryView documentation</a>, but here I&#8217;m setting the dimensions, timing, theme, etc.  There are a couple other things worth highlighting here if you are not familiar with JavaScript.  First of all, the string containing #featured-gallery is setting up the gallery to run automatically on images displayed in the html div with the id of &#8220;featured-gallery&#8221; &#8211; you can change this to whatever you like, but remember that it needs to match the outer div on your index page in the next step. Also worth noting, the script generally runs on a generic placeholder function called $, but in order to get around the conflict with the Prototype library (which also uses $ as a generic placeholder), I&#8217;ve included the jQuery.noConflict() line and replaced $ with jQuery.</p>
<p><strong>Step Three: Edit your Index Page (Looping Items and Calling GalleryView)</strong></p>
<p>The code below uses a custom loop to retrieve the images.  As noted, the outer div uses the id &#8220;featured-gallery&#8221;, as well as a required class, &#8220;galleryview&#8221; &#8212; #featured-gallery <em>is the only</em> id or class that you can change below!</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">	<span style="color: #339933;">&lt;</span>h2<span style="color: #339933;">&gt;</span>Featured Items<span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;featured-gallery&quot;</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;galleryview&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>ul id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;gallery&quot;</span><span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span> ?php 
		<span style="color: #666666; font-style: italic;">//this loops the 5 most recent featured items</span>
		<span style="color: #000088;">$items</span> <span style="color: #339933;">=</span> get_items<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'featured'</span><span style="color: #339933;">=&gt;</span>true<span style="color: #339933;">,</span> <span style="color: #0000ff;">'recent'</span><span style="color: #339933;">=&gt;</span>true<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		set_items_for_loop<span style="color: #009900;">&#40;</span><span style="color: #000088;">$items</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">while</span><span style="color: #009900;">&#40;</span>loop_items<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span>
		<span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #339933;">&lt;</span> ?php <span style="color: #000088;">$index</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$file</span> <span style="color: #339933;">=</span> loop_files_for_item<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			    <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$file</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">hasThumbnail</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			    <span style="color: #339933;">&lt;!--</span> this makes sure the loop grabs only the first image <span style="color: #b1b100;">for</span> the item <span style="color: #339933;">--&gt;</span>
			        <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$index</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		    	       <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #666666; font-style: italic;">/*Image URL*/</span><span style="color: #0000ff;">'&lt;li&gt;&lt;img src=&quot;'</span><span style="color: #339933;">.</span>item_file<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'square thumbnail uri'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;/&gt;'</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		    	    <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			    <span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #339933;">&lt;</span> ?php
			<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;div class=&quot;panel-overlay&quot;&gt;'</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">echo</span> <span style="color: #666666; font-style: italic;">/*Item Title*/</span><span style="color: #0000ff;">'&lt;h3&gt;'</span><span style="color: #339933;">.</span>item<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Dublin Core'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'Title'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/h3&gt;'</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">echo</span> <span style="color: #666666; font-style: italic;">/*Item Description Excerpt*/</span><span style="color: #0000ff;">'&lt;p&gt;'</span><span style="color: #339933;">.</span>item<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Dublin Core'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'Description'</span><span style="color: #339933;">,</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'snippet'</span><span style="color: #339933;">=&gt;</span><span style="color: #cc66cc;">175</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">echo</span> <span style="color: #666666; font-style: italic;">/*Link to Item*/</span> link_to_item<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' ...more '</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/p&gt;&lt;/ul&gt;&lt;/div&gt;'</span><span style="color: #339933;">;</span>
			<span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>I&#8217;ve added some comments inline with the code above to describe what it&#8217;s doing, so if they make sense to you, you can probably figure out any changes you might need (for example, looping more or fewer images meeting whatever Omeka-friendly criteria you like).  </p>
<p><em>*** I&#8217;m using square thumbnails in my loop because they&#8217;re easy, but you may need to adjust the max thumbnail size in your Omeka settings to avoid blurry images.</em></p>
<p><strong>Step Four: Season to Taste</strong></p>
<p>Though the example above works pretty nicely &#8220;out of the box&#8221; in a two column homepage theme, the <a href="http://spaceforaname.com/galleryview">GalleryView documentation</a> contains a list of configuration options, so you will probably want to fool around with those, as well as your CSS, to integrate GalleryView properly into your theme&#8217;s overall aesthetic.  You might also want to <a href="http://omeka.org/codex/Create_a_Custom_Loop_of_Items">customize the loop in Omeka</a> (personally, I&#8217;m not a huge fan of the one used above, but haven&#8217;t figured out a better one just yet).</p>
<p>Hope this has helped a few folks out there who, like me, are working near the edges of their skill set.  As always, feel free to share your comments, questions, suggestions, critiques, etc.  I&#8217;ll try to keep this updated as needed.</p>
<p>By the way, I&#8217;m planning to release a new Omeka theme that incorporates both Lightbox and GalleryView, as well as some other fun stuff, so stay tuned.</p>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2010/adding-a-featured-image-gallery-to-omeka-using-galleryview/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Adding an Image Lightbox in Omeka</title>
		<link>http://jeffersonsnewspaper.org/2009/adding-an-image-lightbox-in-omeka/</link>
		<comments>http://jeffersonsnewspaper.org/2009/adding-an-image-lightbox-in-omeka/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 15:03:21 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Reference]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[LightBox]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[open source]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=591</guid>
		<description><![CDATA[Maybe it&#8217;s just me, but I had a heckuva time trying to figure out how to implement Lightbox 2 in Omeka. After piecing together info and code from here and there, then adding my own little improvements, I&#8217;ve constructed a simple little 4-step guide to document the process and, hopefully, help make this process a little less vexing for others out there who aren&#8217;t PHP and Java Script pros. Step One: Get the Lightbox Package...]]></description>
			<content:encoded><![CDATA[<p><img src="http://jeffersonsnewspaper.org/wp-content/uploads/2009/11/Untitled-11.jpg" alt="LightBox-example_OCW150" title="LightBox-example_OCW150" width="630" height="auto" class="aligncenter size-full wp-image-609" />Maybe it&#8217;s just me, but I had a heckuva time trying to figure out how to implement <a title="LightBox2 by Lokesh Dhakar" href="http://www.huddletogether.com/projects/lightbox2/">Lightbox 2</a> in <a title="Omeka" href="http://omeka.org/">Omeka</a>.  After piecing together info and code from here and there, then adding my own little improvements, I&#8217;ve constructed a simple little 4-step guide to document the process and, hopefully, help make this process a little less vexing for others out there who aren&#8217;t PHP and Java Script pros.</p>
<p><span id="more-591"></span></p>
<p><strong>Step One: Get the Lightbox Package</strong></p>
<p>The first step is to get the latest LightBox 2 package <a title="LightBox2 by Lokesh Dhakar" href="http://www.huddletogether.com/projects/lightbox2/">here</a>, where you will find a quick explanation of how it works and how to get started.</p>
<p><strong>Step Two: Modify and Upload the LightBox Package</strong></p>
<p>Once you have the package, make sure it&#8217;s in a folder called &#8220;lightbox&#8221; and upload it to your Omeka theme directory inside the &#8220;common&#8221; directory where your header and footer files are located.  Take the image files and copy them to your theme&#8217;s &#8220;images&#8221; directory.</p>
<p>Inside common/lightbox/js directory, find the file called &#8220;lightbox.js&#8221; and set your configurations.  This is where you set your lightbox behaviors (overlayOpacity, animate, resizeSpeed, borderSize, etc.) and also where you tell LightBox how to find the images and labels to display Close and Loading.  When setting the former, you can fiddle with the defaults to get the style you need, it&#8217;s pretty easy to understand.  For the latter (image locations), you can use either a relative or a direct URL.  If a relative location (e.g. &#8216;../images/loading.gif&#8217;) does not work for you, try using the direct URL (e.g. &#8216;http://www.yoursite.com/omeka/themes/themename/images/loading.gif&#8217;).  My impression is that Omeka requires the direct URL for some reason.  You could probably leave the images in the &#8220;lightbox&#8221; directory and point to them there as well.</p>
<p><strong>Step Three: Modify your Omeka Theme Header</strong></p>
<p>Add the script to your theme header (be sure to modify with your actual theme name):</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- Start Lightbox includes --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/themename/common/lightbox/js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/themename/common/lightbox/js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> WEB_ROOT<span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>/themes/themename/common/lightbox/js/lightbox.js&quot;&gt;&lt;/script&gt;
&lt;!-- End Lightbox includes --&gt;</pre></div></div>

<p>Pretty basic.</p>
<p>Also, you&#8217;ll want to either copy the LightBox CSS styles into your theme&#8217;s stylesheet or move it to the theme styles directory and link to it in your header.  Either way, be sure to double check that your images are properly linked.  I find that having the LightBox styles included in a single stylesheet is preferable, but if you want, you can use something like this after moving lightbox.css to your theme directory:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>link rel<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;stylesheet&quot;</span> href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;css/lightbox.css&quot;</span> type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/css&quot;</span> media<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;screen&quot;</span> <span style="color: #339933;">/&gt;</span></pre></div></div>

<p><strong>Step Four: Modify Your Omeka Items-Show Page</strong></p>
<p>This is where I got hung up.  The site I was working on has multiple file types &#8212; not just images, but also audio and video.  I was lucky enough to find a starting point on the <a title="Lightbox | Omeka Dev Google Group" href="http://groups.google.com/group/omeka-dev/browse_thread/thread/db7e65096a08b26f">Omeka Dev Google Group</a> as well as on the <a title="Lightbox | Omeka Forums" href="http://omeka.org/forums/topic/what-handle-to-access-mediaphp-for-a-new-plugin">Omeka Forums</a>, but the code was written for item pages with a single image file.  Since I&#8217;m not great with arrays, it took me a while to come up with the imperfect code below.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">	<span style="color: #339933;">&lt;!--</span> The following returns all of the files associated with an item<span style="color: #339933;">.</span> <span style="color: #339933;">--&gt;</span>
	<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;itemfiles&quot;</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;element&quot;</span><span style="color: #339933;">&gt;</span>
	    <span style="color: #339933;">&lt;</span>h3<span style="color: #339933;">&gt;</span>Files<span style="color: #339933;">&lt;/</span>h3<span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;element-text&quot;</span><span style="color: #339933;">&gt;</span>
		    <span style="color: #339933;">&lt;</span> ?php 
		    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>item_has_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> 
					<span style="color: #009900;">&#123;</span>
					<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;p&gt;&lt;em&gt;Click the Image for Full Size&lt;/em&gt;'</span><span style="color: #339933;">;</span>
					<span style="color: #b1b100;">echo</span> display_files_for_item<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'linkAttributes'</span><span style="color: #339933;">=&gt;</span>array<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'rel'</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">'lightbox[group]'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
										<span style="color: #009900;">&#125;</span>
			<span style="color: #b1b100;">else</span>
				<span style="color: #009900;">&#123;</span>
				<span style="color: #b1b100;">echo</span> display_files_for_item<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
		<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
&nbsp;
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

<p>This script will test if the item has a thumbnail (i.e. &#8220;is it an image?&#8221;).  If it does, it will display the files as square thumbnails and give them &#8216;rel=&#8221;lightbox[group]&#8220;&#8216; &#8211; clicking on images with the &#8220;lightbox&#8221; relation in the URL will prompt the light box; if there are two or more images associated with the file, the &#8216;[group]&#8216; part will kick in to add the Next and Previous buttons.  If the item file is not an image, the script calls the generic Omeka function display_files_for_item(), which will automatically call the media player (for audio and video) if needed.</p>
<p>A pretty easy process when you have it all right in front of you.  Hope this will be helpful to someone out there.</p>
<p>NOTE: I&#8217;ll continue to update this post with any improvements.  If <em>you</em> have a problem, fix, or improvement to share, please add it in the comments or catch me on Twitter (<a href="http://twitter.com/ebellempire">@ebellempire</a>).  I&#8217;ve also cross-posted this tutorial in the documentation wiki at <a href="http://omeka.org/codex/Adding_LightBox_to_Omeka">Omeka.org</a>, so feel free to contribute there as well.</p>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2009/adding-an-image-lightbox-in-omeka/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Building a WordPress Static Homepage with Dynamic Elements</title>
		<link>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/</link>
		<comments>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 18:07:30 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Reference]]></category>
		<category><![CDATA[category feeds]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[dummyproofing]]></category>
		<category><![CDATA[excerpt]]></category>
		<category><![CDATA[external feeds]]></category>
		<category><![CDATA[feeds]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[static homepages]]></category>
		<category><![CDATA[theme functions]]></category>
		<category><![CDATA[themes]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=421</guid>
		<description><![CDATA[One of the nice features of WordPress is the ability to create static homepages. While most blogs use the standard configuration, where users scroll vertically from the most recent to older blog posts, it often makes sense to use a static homepage instead &#8212; especially if you are looking to create a more professional looking site, or are using WordPress as a Content Management System. I recently tackled a project where we needed to create...]]></description>
			<content:encoded><![CDATA[<p><img src="http://jeffersonsnewspaper.org/wp-content/uploads/2009/09/Manhattan_Bridge_Construction_19091.jpg" width="620px" height="auto"/>One of the nice features of WordPress is the ability to create <a title="Static Homepages @ WP" href="http://codex.wordpress.org/Creating_a_Static_Front_Page">static homepages</a>.  While most blogs use the standard configuration, where users scroll vertically from the most recent to older blog posts, it often makes sense to use a static homepage instead &#8212; especially if you are looking to create a more professional looking site, or are using <a title="WP as CMS @ DevLounge.net" href="http://www.devlounge.net/publishing/things-to-consider-when-using-wordpress-as-a-cms">WordPress as a Content Management System</a>.  I recently tackled a project where we needed to create a static homepage with the following features</p>
<ol>
<li>The homepage needed to look &#8220;homepagey&#8221; (i.e. not &#8220;bloggy&#8221;)</li>
<li>Client needed room for a short introductory text, which could be edited/updated on the fly without disrupting the homepage layout</li>
<li>The homepage needed to highlight the many features on the site, so that users could quickly scan the page, see what the site had to offer, and quickly find the latest update in each area.</li>
</ol>
<p>This quick tutorial will share some code for reproducing something that meets all or some of those criteria.  You don&#8217;t need to know much code to complete this tutorial, but a little helps.  Once you create and implement your homepage template, you will need to use CSS to add styles and adjust the layout.</p>
<p><span id="more-421"></span></p>
<p><strong>The Basics of Creating a Homepage Template</strong></p>
<p>This is pretty well-documented elsewhere, but here&#8217;s what you need to know on the most basic level.  If you are using a prefab theme, find that theme&#8217;s page.php file.  Now take that file and make a copy called homepage.php (or really, whatever you like).  Next, add the five lines below to the very top of the page (before the header and sidebar calls):</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #666666; font-style: italic;">/*
Template Name: Home Page
*/</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Now, when you edit or create the page you want to use as Home, you can choose the Home Page template and set it as the static homepage for your site in Settings >> Reading.  But this won&#8217;t get you far.  As is, this template just replicates the behavior of any page on your site.  That&#8217;s not very exciting.  Instead, let&#8217;s try adding some dynamic content to the template.</p>
<p><strong>Note on custom theme_excerpt() function used below</strong></p>
<p>Before you get all crazy and just copy-paste from the homepage code below, note that I am using a custom function to generate post excerpts. To use that function you must first create a file called functions.php and add the following code:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #000000; font-weight: bold;">function</span> theme_excerpt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$num</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$more</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$link</span> <span style="color: #339933;">=</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$limit</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$num</span><span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' '</span><span style="color: #339933;">,</span> <span style="color: #990000;">strip_tags</span><span style="color: #009900;">&#40;</span>get_the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$limit</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">array_pop</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">implode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'...'</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'`\[[^\]]*\]`'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</span><span style="color: #339933;">,</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;p&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$excerpt</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>This will get you a more flexible excerpt function than the default WordPress one, <code>the_excerpt()</code>.  I think I stole this from the <a href="http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/" title="FMS theme">Feed Me Seymour theme</a>. You can call the function with <code>theme_excerpt(n)</code> where <em>n</em> is the number of words in the excerpt.</p>
<p><em>I&#8217;m going to break this up into sections, so if you are copy-pasting, you will need to copy all the sections below or pick and choose carefully, otherwise you might end up with some unclosed tags.</em></p>
<p><strong>Preserving the Page text</strong><br />
Most of the text in a dynamic homepage is generated from feeds, posts, and database queries (i.e. not by adding it manually to the page called Home in your WordPress page list).  In some cases, your Home page could be totally blank when accessed from the default page editor.  However, you may want to give yourself the option of manually adding and updating text somewhere on your homepage.  In the example below, we keep the WordPress page text intact by calling <a href="http://codex.wordpress.org/The_Loop" title="The Loop @ WP">The Loop</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #666666; font-style: italic;">/*
Template Name: Home Page
*/</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;!--</span> get the <span style="color: #990000;">header</span> and sidebar<span style="color: #339933;">...</span> though sometimes you might want to leave the sidebar out of a Home template<span style="color: #339933;">.</span>  It<span style="color: #0000ff;">'s here just for the sake of illustration--&gt; 
&lt; ?php get_header(); ?&gt;
&lt; ?php get_sidebar(); ?&gt;
&nbsp;
&lt;div id=&quot;content&quot;&gt;
&nbsp;
&lt;!-- Homepage text from the page editor using '</span>The Loop<span style="color: #0000ff;">'--&gt;
         &lt; ?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
		&lt;div class=&quot;post&quot; id=&quot;main-entry&quot;&gt;&lt;div id=&quot;in-border&quot;&gt;
&nbsp;
			&lt;div class=&quot;entry&quot;&gt;
				&lt; ?php the_content(); ?&gt;
			&lt;/div&gt;
				  &lt; ?php endwhile; endif; ?&gt;
		&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;</span></pre></div></div>

<p><strong>An Internal Category Feed</strong><br />
Below we have the latest one post from the &#8216;News&#8217; category.  You can repeat this with other categories as needed.  This is especially useful if you use the <a href="http://http://wordpress.org/extend/plugins/category-visibility-ipeat/" title="Category Visibility plug-in">Category Visibility plug-in</a> or some other means to hide/show certain category posts in certain areas of your site.  In a recent project, for example, we created additional page templates for displaying posts in certain categories (Calendar Events, Timeline Events, Lesson Plans), but excluded them from the blog loop.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An internal feed.--&gt;
&lt;!-- The latest one post from the 'News' category --&gt;
&lt;!-- You can repeat this with other categories as needed.  --&gt;
&nbsp;
&nbsp;
&lt;li&gt;
&lt;h2&gt;News&lt;/h2&gt;
         &lt; ?php $my_query = new WP_Query('category_name=news&amp;showposts=1'); while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); $do_not_duplicate = $post-&gt;ID; ?&gt;
&nbsp;
                &lt;!-- Link to the 'News' category --&gt;
    		&lt;div class=&quot;post&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;
                &lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/news&quot;&gt;All News &amp;raquo;&lt;/a&gt;&lt;/p&gt;  
                &lt;/div&gt;
&nbsp;
    		&lt;h3&gt;Latest News&lt;/h3&gt;
&nbsp;
                &lt;!-- The post title --&gt;
		&lt;h3&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to &lt; ?php the_title(); ?&gt;&quot;&gt;&lt; ?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
			&lt;div class=&quot;entry&quot;&gt;
                &lt;!-- The post excerpt using custom function from theme/function.php --&gt;		
				&lt; ?php echo theme_excerpt(30); ?&gt; 
			&lt;/div&gt;
		&lt;/div&gt;
  &lt; ?php endwhile; ?&gt;
&lt;/li&gt;</pre></div></div>

<p><strong>An External Feed</strong><br />
This code uses the WordPress core functionality that brings feeds into your Dashboard.   I&#8217;m just pulling the title and link here, but you can do more.  This is especially useful if your site incorporates another platform besides WordPress.  In the example below, I use a feed from the Omeka platform (<a href="http://omeka.org">omeka.org</a>), which I had tucked into my root directory, masquerading as a native section of the site.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An External Feed  --&gt;
&lt;!-- This is especially useful if your site incorporates another platform besides WordPress.--&gt;
&nbsp;
&lt;li&gt;
&lt;h2&gt;Collections &amp;amp; Exhibits &lt;/h2&gt;
    		&lt;div class=&quot;post&quot; id=&quot;omeka-feed&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;&lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/omeka&quot;&gt;View the Archive &amp;raquo;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
			&lt;div class=&quot;entry&quot;&gt;
             &lt;!-- This code uses the WordPress core functionality that brings feeds into your Dashboard--&gt;
             &lt;!-- I'm just pulling the title and link here, but you can do more--&gt;
			&lt; ?php  
			require_once (ABSPATH . WPINC . '/rss.php');  
			$rss = @fetch_rss('http://www.myurl.org/omeka/items/browse?output=rss2');  
			if ( isset($rss-&gt;items) &amp;&amp; 0 != count($rss-&gt;items) ) {  
			?&gt;  
			&lt;h3&gt;Latest Additions&lt;/h3&gt;
			&lt;ul&gt;  
			&lt; ?php  
			$rss-&gt;items = array_slice($rss-&gt;items, 0,7);  
			foreach ($rss-&gt;items as $item ) {  
 			?&gt;  
			&lt;li&gt; 
			&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> wp_filter_kses<span style="color: #009900;">&#40;</span><span style="color: #000088;">$item</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'link'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
			&lt; ?php echo wp_specialchars($item['title']); ?&gt;  
			&lt;/a&gt;  
			&lt;/li&gt;  
			&lt; ?php } ?&gt;  
			&lt;/ul&gt;  
			&lt; ?php } ?&gt;  
			&lt;/div&gt;
&nbsp;
		&lt;/div&gt;
  &lt; ?php endwhile; ?&gt;
&lt;/li&gt;</pre></div></div>

<p><strong>A Special Plugin Feed (Simple:Press)</strong><br />
Lots of plugins generate their own feed.  Here we have an internal feed from the Simple:Press forum plugin (<a href="http://simplepressforum.com">simplepressforum.com</a>).  Such plug-ins generally use custom functions, such as the one below, the rules for which are defined in the plug-in documentation.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An internal feed from the Simple:Press forum plugin (simplepressforum.com)--&gt;
&lt;li&gt;
&lt;h2&gt;Discussions&lt;/h2&gt;
    		&lt;div class=&quot;post&quot; id=&quot;forum-posts&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;&lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/forum&quot;&gt;View Forums &amp;raquo;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
			&lt;div class=&quot;entry&quot;&gt;
			&lt;h3&gt;Latest Topics&lt;/h3&gt;
				&lt;ul&gt;
				&lt; ?php sf_recent_posts_tag(3, false, true, true, true, 0, false); ?&gt;
				&lt;/ul&gt;
&nbsp;
			&lt;/div&gt;
&nbsp;
		&lt;/div&gt;
&nbsp;
&lt;/li&gt;</pre></div></div>

<p><strong>Listing all Pages</strong><br />
Normally, you should list all your pages in the header navigation, but in this case I had too many pages to list there, some of which didn&#8217;t belong in the navigation.  I listed only the pages that were not part of the header navigation or the footer (About, Contact) in this section.  You can find more info about <code>wp_list_pages()</code> <a href="http://codex.wordpress.org/Template_Tags/wp_list_pages" title="wp_list_pages() @ WP">here</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;!--</span> <span style="color: #990000;">List</span> all parent pages and first level of child pages <span style="color: #339933;">--&gt;</span>
<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>h2<span style="color: #339933;">&gt;</span>More<span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;</span>
&nbsp;
    	<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post&quot;</span> id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;more-list&quot;</span><span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;</span>ul<span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;</span>h3<span style="color: #339933;">&gt;&lt;</span> ?php wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title_li=&amp;depth=2exclude=1,2,3,4,5,6'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>h3<span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span></pre></div></div>

<p>If you are copy-pasting, don&#8217;t forget to add the footer to end your page</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php get_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Of course, there are plenty more tricks out there.  Frankly, these aren&#8217;t that special, but they seem fundamental.  If this helps you, let us know in the comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

