Following on my previous entry on adding an image Lightbox to Omeka, today I’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 your tweaking enjoyment. It’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.

Step One: Download and Install GalleryView (and edit the GalleryView CSS)

Download the GalleryView package and place it in your theme’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’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).

Step Two: Edit your Header (Scripts and Configurations)

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.

*** To save hours of confusion, watch out for typos and try using your browser’s “view source” feature to ensure that your links are reaching their destination.

<link rel="stylesheet" href="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/galleryview.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/berlin/common/galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript">
		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'
		});
	});
</script>

That final, multi-line script above initializes GalleryView and contains your configurations. You can change them however you like according to the GalleryView documentation, but here I’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 “featured-gallery” – 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’ve included the jQuery.noConflict() line and replaced $ with jQuery.

Step Three: Edit your Index Page (Looping Items and Calling GalleryView)

The code below uses a custom loop to retrieve the images. As noted, the outer div uses the id “featured-gallery”, as well as a required class, “galleryview” — #featured-gallery is the only id or class that you can change below!

	<h2>Featured Items</h2>
	<div id="featured-gallery" class="galleryview">
	<ul id="gallery">
		< ?php 
		//this loops the 5 most recent featured items
		$items = get_items(array('featured'=>true, 'recent'=>true), 5);
		set_items_for_loop($items);
		while(loop_items()):
		?>
			< ?php $index = 0; ?>
			< ?php while ($file = loop_files_for_item()): ?>
			    < ?php if ($file->hasThumbnail()): ?>
			    <!-- this makes sure the loop grabs only the first image for the item -->
			        < ?php if ($index == 0): ?>
		    	       < ?php echo /*Image URL*/'<li><img src="'.item_file('square thumbnail uri').'"/>'; ?>
		    	    < ?php endif; ?>
			    < ?php endif; ?>
			< ?php endwhile;?>
			< ?php
			echo '<div class="panel-overlay">';
			echo /*Item Title*/'<h3>'.item('Dublin Core', 'Title').'</h3>';
			echo /*Item Description Excerpt*/'<p>'.item('Dublin Core', 'Description',array('snippet'=>175));
			echo /*Link to Item*/ link_to_item(' ...more ').'</p></ul></div>';
			?>
			< ?php endwhile; ?>

I’ve added some comments inline with the code above to describe what it’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).

*** I’m using square thumbnails in my loop because they’re easy, but you may need to adjust the max thumbnail size in your Omeka settings to avoid blurry images.

Step Four: Season to Taste

Though the example above works pretty nicely “out of the box” in a two column homepage theme, the GalleryView documentation 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’s overall aesthetic. You might also want to customize the loop in Omeka (personally, I’m not a huge fan of the one used above, but haven’t figured out a better one just yet).

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’ll try to keep this updated as needed.

By the way, I’m planning to release a new Omeka theme that incorporates both Lightbox and GalleryView, as well as some other fun stuff, so stay tuned.

Step One: Get the Lightbox Package

The first step is to get the latest LightBox 2 package here, where you will find a quick explanation of how it works and how to get started.

Step Two: Modify and Upload the LightBox Package

Once you have the package, make sure it’s in a folder called “lightbox” and upload it to your Omeka theme directory inside the “common” directory where your header and footer files are located. Take the image files and copy them to your theme’s “images” directory.

Inside common/lightbox/js directory, find the file called “lightbox.js” 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’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. ‘../images/loading.gif’) does not work for you, try using the direct URL (e.g. ‘http://www.yoursite.com/omeka/themes/themename/images/loading.gif’). My impression is that Omeka requires the direct URL for some reason. You could probably leave the images in the “lightbox” directory and point to them there as well.

Step Three: Modify your Omeka Theme Header

Add the script to your theme header (be sure to modify with your actual theme name):

<!-- Start Lightbox includes -->
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/lightbox.js"></script>
<!-- End Lightbox includes -->

Pretty basic.

Also, you’ll want to either copy the LightBox CSS styles into your theme’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:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Step Four: Modify Your Omeka Items-Show Page

This is where I got hung up. The site I was working on has multiple file types — not just images, but also audio and video. I was lucky enough to find a starting point on the Omeka Dev Google Group as well as on the Omeka Forums, but the code was written for item pages with a single image file. Since I’m not great with arrays, it took me a while to come up with the imperfect code below.

	<!-- The following returns all of the files associated with an item. -->
	<div id="itemfiles" class="element">
	    <h3>Files</h3>
		<div class="element-text">
		    < ?php 
		    if (item_has_thumbnail()) 
					{
					echo '<p><em>Click the Image for Full Size</em>';
					echo display_files_for_item(array('linkAttributes'=>array('rel'=>'lightbox[group]'))); 
										}
			else
				{
				echo display_files_for_item();
				}
			?>
 
		</div>
 
	</div>

This script will test if the item has a thumbnail (i.e. “is it an image?”). If it does, it will display the files as square thumbnails and give them ‘rel=”lightbox[group]“‘ – clicking on images with the “lightbox” relation in the URL will prompt the light box; if there are two or more images associated with the file, the ‘[group]‘ 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.

A pretty easy process when you have it all right in front of you. Hope this will be helpful to someone out there.

NOTE: I’ll continue to update this post with any improvements. If you have a problem, fix, or improvement to share, please add it in the comments or catch me on Twitter (@ebellempire). I’ve also cross-posted this tutorial in the documentation wiki at Omeka.org, so feel free to contribute there as well.

I recently set up an installation of WordPress MultiUser (WPmu) + BuddyPress for the History Department where I work. We have a number of different user groups on the site, including Courses, Workshops, and Projects. Eventually we will also have Personal sites (for students, staff, and faculty in the dept.) and perhaps some small organizations and campus groups. Right now the site is small, so it would be reasonable to manually create and maintain a topical directory. As the site grows, however, this could become a burden to say the least. Nobody likes to do that kind of crap – not even graduate assistants. So with the help of an outdated plug-in and a couple of tiny hacks, I easily created a directory of Blogs by Topic so I never need to hand code the directory. Read on to find out how.

To begin with, I’m using Deanna Schneider’s very handy Blog Topics For WPMU. Basically, Blog Topics creates a field in the relevant Settings, Registration and BuddyPress areas in which your users choose from a drop-down of admin-defined topics. They cannot create new topics, they must use the ones you set, so keep that in mind. The Site Admin can manually set the Topic for any blog at any time; this might be necessary if you already have a handful of blogs on your site (or you could demand that your users do it themselves because this is all about being lazy). Some users might misfile their site in the wrong category, but you can always go in and edit any blog’s Topic; they probably won’t even notice.

You might be wondering why I would write a tutorial for installing a plug-in. Well, I’m not sure if the plug-in code has some deprecated elements or if it just doesn’t play nice with the new BuddyPress theme structure, but it’s actually a bit more complicated than just installing the plug-in. For whatever reason, the documentation for this plug-in is pretty weak and some of it just doesn’t seem to work without some tweaks. That’s where I come in to sum up my hours of frustration with what now seems like an obvious process.

Here’s the drill…

1. Install the plug-in in your wp-content/plugins folder and activate it on your parent site. The plug-in comes with a nice little widget for your MU child sites, but it won’t help you here so consider it optional.
2. Inside the wp-content/plugins/blog-topics directory, you will find the file cets_blog_topics_page.php (a WordPress page template). Copy this file to the root of your site’s parent theme file. If you are using BuddyPress 1.1, that means themes/bp-sn-parent.
3. Now, take that file and mess it all up according to the instructions below. Unfortunately, in the plug-in’s current state (v. 0.3.2), the default file just doesn’t work, but after digging around in the code, I found some functions that work quite nicely and can be easily integrated into your BuddyPress directories. Again, you will need to save this to the root of your theme.
4. Create a page called Blog Topics Directory (or whatever) and apply the Blog Topics Page template you just created.

< ?php
/*
Template Name: Blog Topics Page
*/
?>
< ?php get_header(); ?>
 
	<div id="content" class="narrowcolumn">
 
		< ?php do_action( 'bp_before_directory_blogs_content' ) ?>
 
		<div class="page" id="blog-page">
 
			< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
				<h2 class="pagetitle">< ?php the_title(); ?></h2>
 
                                <!--using anchors for long lists, or you could use something fancier to browse topics-->
 
					<ul id="topic-list">
					<li><a href="#topic1">Topic 1</a></li>
					<li><a href="#topic2">Topic 2</a></li>	
					<li><a href="#topic3">Topic 3</a></li>	
					<li><a href="#topic4">Topic 4</a></li>	
					<li><a href="#topic5">Topic 5</a></li>	
					</ul>					
 
<!--add the numeric Topic ID according to the models below-->	
 
<!--topic1-->
<a name="topic1"></a>
<h2 class="pagetitle">< ?php echo cets_get_topic_name('1') ?> Blogs</h2>  
< ?php echo cets_get_blogs_from_topic_id_html('1'); ?>
 
<!--topic2-->
<a name="topic2"></a>
<h2 class="pagetitle">< ?php echo cets_get_topic_name('2') ?> Blogs</h2>  
< ?php echo cets_get_blogs_from_topic_id_html('2'); ?>
 
<!--topic3-->
<a name="topic3"></a>
<h2 class="pagetitle">< ?php echo cets_get_topic_name('3') ?> Blogs</h2>  
< ?php echo cets_get_blogs_from_topic_id_html('3'); ?>
 
<!--topic4-->
<a name="topic4"></a>
<h2 class="pagetitle">< ?php echo cets_get_topic_name('4') ?> Blogs</h2>  
< ?php echo cets_get_blogs_from_topic_id_html('4'); ?>
 
<!--topic5-->
<a name="topic5"></a>
<h2 class="pagetitle">< ?php echo cets_get_topic_name('5') ?> Blogs</h2>  
< ?php echo cets_get_blogs_from_topic_id_html('5'); ?>
 
 
 
 
			< ?php endwhile; endif; ?>
 
		</div>
 
		< ?php do_action( 'bp_after_directory_blogs_content' ) ?>
 
	</div>
 
< ?php get_sidebar(); ?>
 
< ?php get_footer(); ?>

You could probably find any number of ways to integrate this into your theme’s Blog Directory. Although I might eventually change it, right now, I’ve just added a link to the Blog Directory sidebar which users can… use… to Browse Blogs by Topic. If it helps, here’s a link to the site where this code is being used. Again, it needs some tweaking but this should get you started. Hope this quick fix has helped.

If you’re wondering why this post has a giant image of Brak (among other notable “buddies”) at the top, or if you just need a break from all this BuddyPress nonsense, you might need to listen to this…

Brak sings Yeah Buddy (via brakbuddy.ytmnd.com)

1. The homepage needed to look “homepagey” (i.e. not “bloggy”)
2. Client needed room for a short introductory text, which could be edited/updated on the fly without disrupting the homepage layout
3. 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.

This quick tutorial will share some code for reproducing something that meets all or some of those criteria. You don’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.

The Basics of Creating a Homepage Template

This is pretty well-documented elsewhere, but here’s what you need to know on the most basic level. If you are using a prefab theme, find that theme’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):

< ?php
/*
Template Name: Home Page
*/
?>

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’t get you far. As is, this template just replicates the behavior of any page on your site. That’s not very exciting. Instead, let’s try adding some dynamic content to the template.

Note on custom theme_excerpt() function used below

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:

< ?php
function theme_excerpt($num) {
	global $more;
	$more = 1;
	$link = get_permalink();
	$limit = $num+1;
	$excerpt = explode(' ', strip_tags(get_the_content()), $limit);
	array_pop($excerpt);
	$excerpt = implode(" ",$excerpt).'...';
	$excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
	echo '<p>'.$excerpt.'';
	$more = 0;
}
?>

This will get you a more flexible excerpt function than the default WordPress one, the_excerpt(). I think I stole this from the Feed Me Seymour theme. You can call the function with theme_excerpt(n) where n is the number of words in the excerpt.

I’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.

Preserving the Page text
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 The Loop.

< ?php
/*
Template Name: Home Page
*/
?>
<!-- get the header and sidebar... though sometimes you might want to leave the sidebar out of a Home template.  It's here just for the sake of illustration--> 
< ?php get_header(); ?>
< ?php get_sidebar(); ?>
 
<div id="content">
 
<!-- Homepage text from the page editor using 'The Loop'-->
         < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="main-entry"><div id="in-border">
 
			<div class="entry">
				< ?php the_content(); ?>
			</div>
				  < ?php endwhile; endif; ?>
		</div></div>
</div>

An Internal Category Feed
Below we have the latest one post from the ‘News’ category. You can repeat this with other categories as needed. This is especially useful if you use the Category Visibility plug-in 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.

<!-- An internal feed.-->
<!-- The latest one post from the 'News' category -->
<!-- You can repeat this with other categories as needed.  -->
 
 
<li>
<h2>News</h2>
         < ?php $my_query = new WP_Query('category_name=news&showposts=1'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
 
                <!-- Link to the 'News' category -->
    		<div class="post">
    		<div id="link-contain">
                <p class="contread"><a href="<?php echo get_bloginfo('url'); ?>/news">All News &raquo;</a></p>  
                </div>
 
    		<h3>Latest News</h3>
 
                <!-- The post title -->
		<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to < ?php the_title(); ?>">< ?php the_title(); ?></a></h3>
			<div class="entry">
                <!-- The post excerpt using custom function from theme/function.php -->		
				< ?php echo theme_excerpt(30); ?> 
			</div>
		</div>
  < ?php endwhile; ?>
</li>

An External Feed
This code uses the WordPress core functionality that brings feeds into your Dashboard. I’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 (omeka.org), which I had tucked into my root directory, masquerading as a native section of the site.

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

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

<!-- An internal feed from the Simple:Press forum plugin (simplepressforum.com)-->
<li>
<h2>Discussions</h2>
    		<div class="post" id="forum-posts">
    		<div id="link-contain"><p class="contread"><a href="<?php echo get_bloginfo('url'); ?>/forum">View Forums &raquo;</a></p></div>
			<div class="entry">
			<h3>Latest Topics</h3>
				<ul>
				< ?php sf_recent_posts_tag(3, false, true, true, true, 0, false); ?>
				</ul>
 
			</div>
 
		</div>
 
</li>

Listing all Pages
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’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 wp_list_pages() here.

<!-- List all parent pages and first level of child pages -->
<li>
<h2>More</h2>
 
    	<div class="post" id="more-list">
			<ul>
			<h3>< ?php wp_list_pages('title_li=&depth=2exclude=1,2,3,4,5,6') ;?></h3>
			</ul>
	</div>
</li>

If you are copy-pasting, don’t forget to add the footer to end your page

< ?php get_footer(); ?>

Of course, there are plenty more tricks out there. Frankly, these aren’t that special, but they seem fundamental. If this helps you, let us know in the comments.

BackStory:  BackStory is one of my favorite podcasts in any genre.  “On each show, renowned U.S. historians Ed Ayers, Peter Onuf, and Brian Balogh tear a topic from the headlines and plumb its historical depths.”  In addition to the hosts’ impressive knowledge, the show has NPR quality production values and a great sense of humor and relevance. The show is a product of the Virginia Foundation for the Humanities, who produce a couple other shows (which I’ve yet to hear) through their VFH Radio project.

StuffYouMissedInHistoryClass: This one is produced by HowStuffWorks.com, which initially made me a bit skeptical.  I was quickly won over though.  Historians Candace Gibson and Jane McGrath investigate “the stories behind the lines of your textbooks.”  The topics range from esoteric (e.g. the history of happiness) to  topical (“Historically inaccurate movies”) to explanations (“How the Marshall Plan worked”) and conversations appropriate for younger students (“Did Betsy Ross really make the first American Flag?”).

BingeThinkingHistory:  While the previous two podcasts are conversational and focus on American history, this project – a one man show by Tony Cocks -  is oriented toward British and European history.  Since I know very little about European history, I am both intrigued and confounded by the subject matter.   Luckily the host has a dignified English voice and a knack for telling history in a narrative, documentary style that makes good use of music and background audio (e.g. the sounds of battlefield artillery).  So I like it, even though I don’t really know what he’s talking about.

The Gilder Lehrman Institute of American History has a wide selection of “eminent historians discussing major topics in American history”, which they release as audio podcasts.  My first impression of the project site was that this would be a stuffy, old-school academic series wherein pokey old coots discussed their own greatness by way of displaying their mad lecture skillz.  I also thought it would cater primarily to college students and other academics.  In fact, there are some really interesting and informative lectures here, and it serves as a really great resource for pretty much any group above maybe middle school.  I noticed a handful of  high school teacher comments on the project site, reminding me that some teachers actually challenge their students to do real historical thinking.  Imagine that.

HistoryPodcast/HistoryOnAir … “Jason Watts is the host of History Podcast and an amateur historian. It should be noted that he is not a professional.”  That’s what it says on the site, but ignore that (or sit and quietly appreciate it).  Jason does a good job of documenting his sources and telling historical stories, and has been doing it since 2005.  This is actually a nice little operation, and it looks like Jason is beginning to use video and visualization tools so this is one to watch.  Users can submit topics, ideas, and even scripts for new episodes.  Also of note is the provision of transcripts and citations for each episode, which is handy for students who might want to explore a topic in more detail.  There’s also a big list of additional podcasts you might want to check out.

So there’s a brief list.  I actually have a backlog of additional podcasts in my iTunes library that I haven’t had time to review, so I may add more to this post or continue the topic in a new post as I find more quality podcasts.   Please use the comments section to suggest some others you like.

The inaugural Jefferson’s Newspaper Reference question was submitted by the curious 13 year old Latino boy that lives in my subconscious.  His name is Martin.  Martin asks, “What’s the deal with the word maricón?  Why does it mean gay?”

Martin, let me tell you right now, I will be using Wiktionary.  Deal with it.

Maricón is derived from marica, the Spanish language word for magpie – an Australian bird.  The base of the word is Maria or Mary (the English word magpie is derived from another variation of Mary, Margaret), with the addition of the suffix -ica, which is diminutive and often derogotory.  In other words, maricón translates into both “littly Mary” and “little bird.”

If you’re into gay bashing and/or Spanish language insults, this may come as no surprise.  Mary is another slang word used to describe gay men — most often used by gay men.  Gay men are also often referred to in terms that suggest aviation — fairy, for example, or another Spanish language word, pajarito, which has a couple connotations.  Pajarito is a diminutive form of pájaro, meaning bird or sometimes parrot.  In Spain, Guatemala, Mexico, and Venezuela, pájaro also means penis.  Thus, pajarito means both little bird and little penis.  Another double whammy.

Now, why are homosexuals so often equated to tiny virginal flying peckers?  I have no idea.  It’s very uncool and someone should get to the bottom of it.

But back to the question.  I promised a solid source to Martin, and my Wiktionary-gleamed musings are not going to cut it.

In Marginalization of alternative gender and sexual identities: The role of normative discursive practices in Chilean society (2005), linguist Sara Balder describes use of the term as such:

A diachronic approach shows that maricón is derived from the proper name Maria. Accordingly, this female origin qualifies the term to connotatively recall feminine gender attributes such as weakness and submissiveness.  Another parallel is that the term indicates submission not only in the social sense, but also in the sense of sexual passivity.  In practice, this term is polysemous, and is primarily used to denote an effeminate and/or homosexual male, making it roughly synonymous with ‘effeminate sodomite’.  I will refer to this primary meaning as (maricón 1).

Additionally, this term can also be used secondarily in reference to a bad, wretched, or harmful person (maricón 2).    The relationship between these two senses can be best explained by the chaining approach (see Lakoff 1987), whereby maricón2  developed as a derivative of some of the characteristics of maricón 1.  The characteristics, specifically, are those that give maricón 1 its negative connotation: maricón 1, which denotes an effeminate homosexual male, is connotatively negative in that homosexuals are considered bad, wrong, weak, deviant, and contemptible by dominant society.  The chaining involved in the relationship of maricón 1 to
maricón 2 can be conceptualized as such:

maricón 1: effeminate passive
homosexual male
↓
effeminacy, passivity, and homosexuality
are bad, deviant, and wrong
↓
a maricón is a bad, deviant person
who commits wrongful acts
↓
maricón 2: a bad, wretched,
or harmful person

The resultant polysemous outcome is that a term used for homosexuals can also be used for other people who are disreputable, odious wrongdoers (maricón 2), even if they have normative gender and sexual orientation.

Read the full text here [PDF].  No mention of magpies, though.

Maricón In the News:  Bill Richardson uses the term on the Don Imus Show, hampering his presidential bid and dampening his reputation as a strong supporter of gay and lesbian rights (2007): link

Maricón In the History: Fidel Castro, preeminent among gay-bashing jerks, allegedley sent his pal, writer Gabriel Garcia Marquez, to leaders of both Panama and Spain with one brief spoken message: “Dice Fidel que usted es un maricón” (“Fidel says you are a faggot”): link (hover for citation)