Here’s a neat way to present multiple YouTube videos in a responsive “gallery” in OU Campus. This example uses a mix of Bootstrap CSS and CSS specific to the gallery. Thanks to Wooster Web Design for the HTML/CSS/JS.

With the YouTube Gallery snippet and XSL transform, you can create a video gallery of multiple YouTube videos, selectable by clicking thumbnail images.

Here’s the table transform snippet (add HTML to /_resources/ou/snippets, then create new item in Content > Snippets).

<table class="ou-youtube-gallery transform" style="width: 100%;">
	<caption>YouTube Gallery Table</caption>
	<thead>
		<tr>
			<th width="30%">Title</th>
			<th>YouTube ID (code after "watch?v=" e.g. G4RT-prDbIw in youtube.com/watch?v=G4RT-prDbIw or youtu.be/G4RT-prDbIw)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
			My YouTube Video
			</td>
			<td>
			G4RT-prDbIw
			</td>
		</tr>
		<tr>
			<td>
			Another YouTube Video
			</td>
			<td>
			o5ZymO9UgjM
			</td>
		</tr>
	</tbody>
</table>
<br />

Here’s the XSL template match; this belongs in an XSL file such as common.xsl or interior.xsl.

<!-- transform YouTube Gallery -->
<xsl:template match="table[contains(@class, 'ou-youtube-gallery')]">
	<xsl:variable name="id" select="position()" />
  	<style type="text/css">
		@import url(//www.yourdomain.edu/_resources/css/youtube-gallery.css);
  	</style>
	<script type="text/javascript" src="/_resources/js/youtube-gallery.js?x25141" />

	<div class="well">
		<!-- THE YOUTUBE PLAYER -->
		<div class="vid-container">
			<iframe id="vid_frame{$id}" frameborder="0" width="560" height="315">
				<xsl:attribute name="src">https://www.youtube.com/embed/<xsl:value-of select="./tbody/tr[1]/td[2]//text()"/>?rel=0&amp;showinfo=0&amp;autohide=1</xsl:attribute>
			</iframe>
		</div>

		<!-- THE PLAYLIST -->
		<div class="vid-list-container">
			<div class="vid-list">

				<xsl:for-each select="./tbody/tr">
					<div class="vid-item" onclick="document.getElementById('vid_frame{$id}').src='https://youtube.com/embed/{td[2]//text()}?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'">

						<div class="thumb"><img alt="video thumbnail" src="https://img.youtube.com/vi/{td[2]//text()}/0.jpg" /></div>

						<div class="desc"><xsl:value-of select="td[1]//text()" /></div>

					</div>
				</xsl:for-each>

			</div><!--/vid-list-->
		</div><!--/vid-container-->

		<!-- LEFT AND RIGHT ARROWS -->
		<div class="arrows">
			<div class="arrow-left"><i class="icon-chevron-left icon-large"><!--scroll left--></i></div>
			<div class="arrow-right"><i class="icon-chevron-right icon-large"><!--scroll right--></i></div>
		</div>

	</div>
</xsl:template>

And here are the .js for scrolling and .css for styling

//www.woosterwebdesign.com/responsive-youtube-player-with-playlist/

$(document).ready(function () {
		    $(".arrow-right").bind("click", function (event) {
		        event.preventDefault();
		        $(".vid-list-container").stop().animate({
		            scrollLeft: "+=336"
		        }, 750);
		    });
		    $(".arrow-left").bind("click", function (event) {
		        event.preventDefault();
		        $(".vid-list-container").stop().animate({
		            scrollLeft: "-=336"
		        }, 750);
		    });
		});

/* styles responsive YouTube Gallery with scrolling thumbnails */
/** /www.woosterwebdesign.com/responsive-youtube-player-with-playlist/ **/

/*  VIDEO PLAYER CONTAINER
############################### */
.vid-container {
	position: relative;
	padding-bottom: 52%;
	padding-top: 30px; 
	height: 0; 
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*  VIDEOS PLAYLIST 
############################### */
.vid-list-container {
	width: 92%;
	overflow: hidden;
	margin-top: 20px;
	margin-left:4%;
	padding-bottom: 20px;
}

.vid-list {
	width: 3680px;
	position: relative;
	top:0;
	left: 0;
}

.vid-item {
	display: block;
	width: 148px;
	height: 148px;
	float: left;
	margin: 0;
	padding: 10px;
}

.thumb {
	/*position: relative;*/
	overflow:hidden;
	height: 84px;
}

.thumb img {
	width: 100%;
	position: relative;
	top: -13px;
}

.vid-item .desc {
	color: #21A1D2;
	font-size: 15px;
	margin-top:5px;
}

.vid-item:hover {
	background: #eee;
	cursor: pointer;
}

.arrows {
	position:relative;
	width: 100%;
}

.arrow-left {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	left: -25px;
	top: -130px;
	z-index: 99;
	cursor: pointer;
}

.arrow-right {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	right: -25px;
	top: -130px;
	z-index:100;
	cursor: pointer;
}

.arrow-left:hover {
	background: #CC181E;
}

.arrow-right:hover {
	background: #CC181E;
}


@media (max-width: 624px) {
	body {
		margin: 15px;
	}
	.caption {
		margin-top: 40px;
	}
	.vid-list-container {
		padding-bottom: 20px;
	}

	/* reposition left/right arrows */
	.arrows {
		position:relative;
		margin: 0 auto;
		width:96px;
	}
	.arrow-left {
		left: 0;
		top: -17px;
	}

	.arrow-right {
		right: 0;
		top: -17px;
	}
}

…and, finally, some instructions for use:

Click the Insert Snippet button, then choose category Video/Embedded Media > YouTube Gallery

This will insert a table in which you enter Title and YouTube ID for each video. This creates a gallery as shown below. To insert additional videos, click the cursor on a table row, then click the Table button, and choose Row > Insert Row Before (or after), then enter the additional title and ID.

The post YouTube Gallery snippet & table transform for OU Campus appeared first on Chris Gilligan » new media.

The web team of the University of Tennessee at Chattanooga uses PHP and RSS to syndicate blog content, news releases, and calendar events into their main website.

PHP SimpleXML is used to parse the XML of the RSS feeds. We import a variety of feeds, from WordPress, from Master Calendar, and from other sites such as an external athletics CMS. WordPress provides some RSS features, including RSS from categories, tags and search strings, but we have added media attachments and a customized template to output a more complicated RSS feed on the University home page.

• this is a companion blog post for a presentation given at
  OmniUpdate OU Campus User Training Conference 2016
• shortcut to this blog post: utc.edu/outc16
• links below are production examples of the concepts outlined in this post

News releases, events and content from WordPress via RSS

Example web pages:

• OU Campus PHP page with news feed and events feed from WordPress
• OU Campus PHP page with news feed from SideArm Sports

WordPress plugin & PHP to add media attachments to RSS feed

Example RSS feeds (view XML/XSL styled page in FireFox; View Source to see XML structure, namespaces, node names and structure):

• normal WordPress RSS feed
• customized WordPress feed with additional namespace and media attachments
  • headlines-customfeed.php (custom feed template)
  • functions.php: load_template (registers and loads the custom feed template)
• RSS feed with inline images (open in Firefox to see XML & XSL)

Custom WordPress RSS feed template, followed by the functions call to load and create it:

<?php
/*
Template Name: Custom Current Headlines Feed

*/

$numposts = 10;
$category_id = get_cat_ID('Current Headlines');

function custom_rss_date( $timestamp = null ) {
  $timestamp = ($timestamp==null) ? time() : $timestamp;
  echo date(DATE_RSS, $timestamp);
}

function custom_rss_text_limit($string, $length, $replacer = '&hellip;') { 
  $string = strip_tags($string);
  if(strlen($string) > $length) 
    return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;   
  return $string; 
}

$posts = query_posts('cat='.$category_id.'&showposts='.$numposts);

$lastpost = $numposts - 1;



header('Content-Type: ' . feed_content_type('rss-http') . '; charset=' . get_option('blog_charset'), true);
$more = 1;

echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>

<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/"
	<?php do_action('rss2_ns'); ?>
>

<channel>
	<title><?php bloginfo_rss('name'); wp_title_rss(); ?></title>
	<atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
	<link><?php bloginfo_rss('url') ?></link>
	<description><?php bloginfo_rss("description") ?></description>
	<lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
	<language><?php bloginfo_rss( 'language' ); ?></language>
	<sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
	<sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
	<?php do_action('rss2_head'); ?>
	<?php while( have_posts()) : the_post(); ?>
	<item>
		<title><?php the_title_rss() ?></title>
		<link><?php the_permalink_rss() ?></link>
		<comments><?php comments_link_feed(); ?></comments>
		<pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
		<dc:creator><?php the_author() ?></dc:creator>
<?php the_category_rss('rss2') ?>
		<guid isPermaLink="false"><?php the_guid(); ?></guid>
<?php if (get_option('rss_use_excerpt')) : ?>
		<description><![CDATA[<?php get_the_excerpt(); ?>]]></description>
<?php else : ?>
		<description><?php echo '<![CDATA['.custom_rss_text_limit($post->post_content, 256).']]>';  ?></description>
<?php $content = get_the_content_feed('rss2'); ?>
	<?php if ( strlen( $content ) > 0 ) : ?>
		<content:encoded><![CDATA[<?php echo $content; ?>]]></content:encoded>
	<?php else : ?>
		<content:encoded><![CDATA[<?php the_excerpt(); ?>]]></content:encoded>
	<?php endif; ?>
<?php endif; ?>
		<wfw:commentRss><?php echo esc_url( get_post_comments_feed_link(null, 'rss2') ); ?></wfw:commentRss>
		<slash:comments><?php echo get_comments_number(); ?></slash:comments>
<?php rss_enclosure(); ?>
<?php do_action('rss2_item'); ?>
		</item>
	<?php endwhile; ?>
</channel>
</rss>

/* Custom RSS Feed for Home Page headlines */

function create_my_customfeed() {
load_template( get_stylesheet_directory() . '/headlines-customfeed.php');
}
add_action('do_feed_headlines', 'create_my_customfeed', 10, 1);

OU Campus PHP helper file and code asset

To parse an existing external RSS feed, such as a standard or custom WordPress feed, we use a helper file that employs PHP’s simplexml_load_string to load the targeted RSS feed, traverse the XML document, select node content, then echo out a block of styled html for each set of targeted XML nodes. The helper file accepts the $feed variable to specify the location of the targeted feed, and the $maxitems variable to specify the number of items to select from the top of the that feed.

On its own, the PHP helper file can be hit in a browser, to verify the targeted feed type exists and is parsed correctly. The browser will return an un-styled html page from the helper file URL.

The OU Campus Code Asset includes the helper file, over-rides the helper’s default variables, is and is very simple to copy and modify, according to the intended target feed and desired number of items to be presented on the final page. Many different Assets can include a single helper file.

(Vinit from OmniUpdate outlined a much better way to handle the feed URL and number of items in his Server Side Scripting class: via PCF Page Parameters.)

PHP file

• parses feed and displays HTML
  • variables set to defaults for testing
    • may need to verify feed access and XML structure
• various types of display html
  • title, excerpt, thumbnail from WordPress
  • title only from WordPress
  • RSS feed with formatting or namespaces different from WordPress

<?php

$input = $_SERVER['QUERY_STRING'];
parse_str($input);

if (!isset($feed))//script or page property will choose which feed to display
	$feed = "http://blog.utc.edu/news/headlines.xml/";

if(!isset($maxitems))
	$maxitems = 3;

$file = file_get_contents($feed);
$file = str_ireplace('src="http://', 'src="//', $file);
$file = str_ireplace('media:content url="http://', 'media:content url="//', $file);
$file = str_ireplace('media:thumbnail url="http://', 'media:thumbnail url="//', $file);

$sxml = simplexml_load_string($file);

$i = 0;
	foreach ($sxml->channel->item as $item) {
		if (++$i > $maxitems) {
				break;
			}
		$namespaces      = $item->getNameSpaces( true );
		$content         = isset($namespaces['content']) ? $item->children( $namespaces['content'] ) : '';
		$content_encoded = isset($content->encoded)      ? $content->encoded                         : '';
		$media           = isset($namespaces['media'])   ? $item->children( $namespaces['media'] )   : '';
		$html       = "<div class=\"row-fluid\">"
					.     "<h3><a href=\"{$item->link}\">{$item->title}</a></h3>"
					.     "{$content_encoded}"
					.  "</div>";
	echo($html);
}
?>
<script>
	$(document).ready(function(){
		$('.sidebar img').removeClass().addClass('thumbnail pull-right span5');
		$('aside.well img').removeClass().addClass('thumbnail pull-right span5');
	});
</script>

OU Campus Assets

• simple structure
  • specify RSS source
  • number of posts to display

<?php
$feed = "//blog.utc.edu/hr/category/benefits/feed/";
include($_SERVER['DOCUMENT_ROOT']. '/_resources/php/get-headlines-sidebar.php');
$maxitems = 5;
?>

(Vinit from OmniUpdate outlined a much better way to handle the feed URL and number of items in his Server Side Scripting class: via PCF Page Parameters.)

More Speed

After you verify the final production page, you should set up cron jobs for any external feeds that are created via database calls on the external servers. A WordPress feed will require a bit of PHP and MySQL work to generate the RSS feed. This requires some processing, and will introduce a delay in service of the OU Campus PHP page. To avoid this latency, we create cron jobs on the production server to periodically fetch the feeds and cache them locally on the production server. The speed increase for the final page product is noticeable.

If your OU Campus Sites include development, test, training, or mobile Sites, you will want to duplicate the local static feeds on all of the OU Sites.

If you control an external WordPress site, you can employ caching mechanisms or plugins to more efficiently serve RSS feeds.

• cache RSS feeds via WordPress plugin, e.g. W3  Total Cache
• cron job to fetch feeds to local production servers
• minimize external requests for faster page load

This cron job can be placed in /etc/cron.hourly to fetch WordPress feeds, check lastBuildDate, and compare that to the existing build date, and create a cached RSS xml file.

#!/bin/bash

# Preload WordPress Feeds for Website

# UTC News
wget http://blog.utc.edu/news/headlines.xml/ -O /data/web/prod/www/_resources/rss/wp-news.tmp >/dev/null 2>&1
TMP_LASTBUILD="$(xml_grep '/rss/channel/lastBuildDate' --text_only /data/web/prod/www/_resources/rss/wp-news.tmp)"
XML_LASTBUILD="$(xml_grep '/rss/channel/lastBuildDate' --text_only /data/web/prod/www/_resources/rss/wp-news.xml)"
MIMETYPE=`file -b --mime-type /data/web/prod/www/_resources/rss/wp-news.tmp`
if [ "$MIMETYPE" == "application/xml" -a  "$TMP_LASTBUILD" != "$XML_LASTBUILD" ] ; then
    mv /data/web/prod/www/_resources/rss/wp-news.tmp /data/web/prod/www/_resources/rss/wp-news.xml
fi

# Duplicate for development, test & training environments
cp -p /data/web/prod/www/_resources/rss/wp*.xml /data/web/test/www/_resources/rss/
cp -p /data/web/prod/www/_resources/rss/wp*.xml /data/web/test/train/_resources/rss/
cp -p /data/web/prod/www/_resources/rss/wp*.xml /data/web/dev/www/_resources/rss/

For other RSS sources, the structure may be different; maybe we can’t do a lastBuildDate check. And… some servers may not respond to a default wget request from a shell script. No problem: just specify --header and --user-agent, don’t do the lastBuildDate check, and just write the RSS XML file.

#!/bin/bash

# Preload GoMocs Feeds for Website


# Gomocs.com News
wget  --header="Accept: text/html" --user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:21.0) Gecko/20100101 Firefox/21.0" http://www.gomocs.com/rss.aspx -O /data/web/prod/www/_resources/gomocs-news.xml

# Duplicate for development, test & training environments
cp -p /data/web/prod/www/_resources/rss/gomocs*.xml /data/web/test/www/_resources/rss/
cp -p /data/web/prod/www/_resources/rss/gomocs*.xml /data/web/test/train/_resources/rss/
cp -p /data/web/prod/www/_resources/rss/gomocs*.xml /data/web/dev/www/_resources/rss/

Event Calendar RSS feeds from Master Calendar via RSS

Example pages that include feeds from Master Calendar. MC has a very rudimentary RSS output of title, date/time and description. MC caches its RSS feeds by default, and expects a lot of traffic to the feed locations, so it is not so necessary to create cron jobs to fetch them. However, if you have an OU Campus page that fetches and displays a large number of MC feeds, you will see a performance increase by using cron jobs. UTC.edu’s home page fetches a number of feeds, and we saw a noticeably faster page load after moving these calls to cron jobs.

• home page tabbed calendar
• simple sidebar calendar

Social Media Streams

UTC uses a jQuery plugin and PHP to pull in social media posts for the university account, as well as for individual departments and colleges. This is an easy way to create a social stream sidebar or social wall page.

• jQuery Social Stream
• program site with Twitter feed
• home page with multiple feeds in a sidebar stream
• social wall page with YouTube videos

Facebook, Twitter and Instagram require PHP  API script for connection to signed apps. jquery.imagesloaded is helpful for the wall display

Code Samples

(A compilation zip including all code mentioned in the presentation is available. Comment and subscribe to this post to be notified of updates.)

• WordPress plugin to add media attachments to RSS feed
• WordPress functions.php changes
• PHP files to parse feeds and display HTML
• OU Campus Assets to specify RSS source and set number of posts
• cron job to fetch RSS feeds to local server

The post Integrating Content from External Sources into OU Campus Using RSS, PHP, and JavaScript appeared first on Chris Gilligan » new media.

We’ve implemented a plugin to log failed login attempts to syslog, and a Fail2Ban filter for the same. If you run these on RedHat, you’ll need some additional configuration info… here it is:

^%(__prefix_line)sAuthentication failure for .* from <HOST>$

[[]client <HOST>[]] File does not exist: .*/~.*

[[]client <HOST>[]] (File does not exist|script not found or unable to stat): /\S*(\.php|\.asp|\.exe|\.pl)
[[]client <HOST>[]] script '/\S*(\.php|\.asp|\.exe|\.pl)\S*' not found or unable to stat *$

<HOST>\s.*\s.POST\s/xmlrpc.php*.\s.*

The post WordPress Fail2Ban RegEx for RedHat, CentOS, Amazon Linux appeared first on Chris Gilligan » new media.

Trawire.com offers portable 4G MiFi and iPad rentals for visitors traveling to Iceland. Trawire’s CIO approached me for assistance after his systems administrator bailed and left him with a poorly maintained, self-hosted MacMini server running unoptimized WordPress installs.

Trawire website

I migrated the site to Amazon Web Services, where it now can handle traffic spikes and can be scaled and built out more easily, should the concept grow to additional markets. Working with my WordPress coding contacts in India, Trawire developed plugins to add features, and keep the software up-to-date. My contributions: caching and content distribution for static assets & queries, Virtualmin and phpMyAdmin for ease of management and development.

The post Portable Wifi Hotspot Rental Site appeared first on Chris Gilligan » new media.

I have been working on a Varnish front-end for Apache, to be used with WordPress sites. I described the architecture in Load Balancing Virtualmin WordPress Hosting Server with Varnish on AWS. I now have a configuration that seems to work for all WordPress features, including logged-out commenting. This configuration also works well with W3 Total Cache.

This configuration is for Varnish on a separate server, but should also work on a single server with appropriate changes to the port and backend IP settings.

Varnish Config (/etc/sysconfig/varnish)

# Configuration file for varnish
#
# /etc/init.d/varnish expects the variable $DAEMON_OPTS to be set from this
# shell script fragment.
#
#
# Maximum number of open files (for ulimit -n)
NFILES=131072
#
# Locked shared memory (for ulimit -l)
# Default log size is 82MB + header
MEMLOCK=82000
#
# Maximum size of corefile (for ulimit -c). Default in Fedora is 0
# DAEMON_COREFILE_LIMIT="unlimited"
#
# Set this to 1 to make init script reload try to switch vcl without restart.
# To make this work, you need to set the following variables
# explicit: VARNISH_VCL_CONF, VARNISH_ADMIN_LISTEN_ADDRESS,
# VARNISH_ADMIN_LISTEN_PORT, VARNISH_SECRET_FILE
RELOAD_VCL=1
#
## Advanced configuration
#
# # Main configuration file.
VARNISH_VCL_CONF=/etc/varnish/wordpress-varnish3.vcl
#
# # Default address and port to bind to
# # Blank address means all IPv4 and IPv6 interfaces, otherwise specify
# # a host name, an IPv4 dotted quad, or an IPv6 address in brackets.
# VARNISH_LISTEN_ADDRESS=
VARNISH_LISTEN_PORT=80
#
# # Telnet admin interface listen address and port
VARNISH_ADMIN_LISTEN_ADDRESS=127.0.0.1
VARNISH_ADMIN_LISTEN_PORT=6082
#
# # Shared secret file for admin interface
VARNISH_SECRET_FILE=/etc/varnish/secret
#
# # The minimum number of worker threads to start
VARNISH_MIN_THREADS=1
#
# # The Maximum number of worker threads to start
VARNISH_MAX_THREADS=1000
#
# # Idle timeout for worker threads
VARNISH_THREAD_TIMEOUT=120
#
# # Cache file location if using file cache
#VARNISH_STORAGE_FILE=/var/lib/varnish/varnish_storage.bin
#
# # Cache size: in bytes, optionally using k / M / G / T suffix,
# # or in percentage of available disk space using the % suffix.
VARNISH_STORAGE_SIZE=3G
#
# # Backend storage specification
# malloc runs from RAM, file from file
VARNISH_STORAGE="malloc,${VARNISH_STORAGE_SIZE}"
#VARNISH_STORAGE="file,${VARNISH_STORAGE_FILE},${VARNISH_STORAGE_SIZE}"
#
# # Default TTL used when the backend does not specify one
VARNISH_TTL=120
#
# # DAEMON_OPTS is used by the init script. If you add or remove options,
# # be sure you update this section, too.
DAEMON_OPTS="-a ${VARNISH_LISTEN_ADDRESS}:${VARNISH_LISTEN_PORT} \
-f ${VARNISH_VCL_CONF} \
-T ${VARNISH_ADMIN_LISTEN_ADDRESS}:${VARNISH_ADMIN_LISTEN_PORT} \
-t ${VARNISH_TTL} \
-w ${VARNISH_MIN_THREADS},${VARNISH_MAX_THREADS},${VARNISH_THREAD_TIMEOUT} \
-u varnish -g varnish \
-S ${VARNISH_SECRET_FILE} \
-s ${VARNISH_STORAGE}"
#

Varnish VCL (/etc/varnish/wordpress-varnish3.vcl)

backend origin {
.host = "10.11.12.13";
.port = "80";
.connect_timeout = 60s;
.first_byte_timeout = 60s;
.between_bytes_timeout = 60s;
}
#
sub vcl_recv {
# only using one backend
set req.backend = origin;
#
# set standard proxied ip header for getting original remote address
set req.http.X-Forwarded-For = client.ip;
#
# logged in users must always pass
if( req.url ~ "^/wp-(login|admin)" || req.http.Cookie ~ "wordpress_logged_in_" ){
return (pass);
}
# accept purges from w3tc and varnish http purge
if (req.request == "PURGE") {
return (lookup);
}
#
# don't cache search results
if( req.url ~ "\?s=" ){
return (pass);
}
#
# always pass through posted requests and those with basic auth
if ( req.request == "POST" || req.http.Authorization ) {
return (pass);
}
#
# else ok to fetch a cached page
unset req.http.Cookie;
return (lookup);
}
#
# accept purges from w3tc and varnish http purge
sub vcl_hit {
if (req.request == "PURGE") { purge; }
return (deliver);
}
#
# accept purges from w3tc and varnish http purge
sub vcl_miss {
if (req.request == "PURGE") { purge; }
return (fetch);
}
#
sub vcl_fetch {
#
# remove some headers we never want to see
unset beresp.http.Server;
unset beresp.http.X-Powered-By;
#
# only allow cookies to be set if we're in admin area - i.e. commenters stay logged out
if( beresp.http.Set-Cookie && req.url !~ "^/wp-(login|admin)" ){
unset beresp.http.Set-Cookie;
}
#
# don't cache response to posted requests or those with basic auth
if ( req.request == "POST" || req.http.Authorization ) {
return (hit_for_pass);
}
#
# only cache status ok
if ( beresp.status != 200 ) {
return (hit_for_pass);
}
#
# don't cache search results
if( req.url ~ "\?s=" ){
return (hit_for_pass);
}
#
# else ok to cache the response
set beresp.ttl = 24h;
return (deliver);
}
#
sub vcl_deliver {
# add debugging headers, so we can see what's cached
if (obj.hits > 0) {
set resp.http.X-Cache = "HIT";
}
else {
set resp.http.X-Cache = "MISS";
}
# remove some headers added by varnish
unset resp.http.Via;
unset resp.http.X-Varnish;
}
#
sub vcl_hash {
hash_data( req.url );
# altering hash so subdomains are ignored.
# don't do this if you actually run different sites on different subdomains
if ( req.http.host ) {
hash_data( regsub( req.http.host, "^([^\.]+\.)+([a-z]+)$", "\1\2" ) );
} else {
hash_data( server.ip );
}
# ensure separate cache for mobile clients (WPTouch workaround)
if( req.http.User-Agent ~ "(iPod|iPhone|incognito|webmate|dream|CUPCAKE|WebOS|blackberry9\d\d\d)" ){
hash_data("touch");
}
return (hash);
}

The post Varnish VCL and Config for WordPress with W3 Total Cache appeared first on Chris Gilligan » new media.

Office Coordinators Inc. website

I worked with Office Coordinators Inc’s talented in-house designers to update the OCI website. OCI chose an e-commerce theme, and we completely reworked the CSS and layout to match their colors and logo treatment. After a previous failed attempt with another developer, they were surprised at how quickly the site came together, and how easy it is to manage with WordPress!

• “Inquiry mode” e-commerce: customers can select items, add to shopping cart, then email for more information or price quote
• Search Engine Optimization: Google Analytics and Sitemaps
• WordPress Content Management
• Social Networking with Facebook “score card”

Thank you for your persistence. You’re our favorite website/technically savvy guy ever.
— Emily Vaughn, OCI

The post Office Furniture Retail Showcase appeared first on Chris Gilligan » new media.

Suck Creek Cycle website

I’ve been hosting and helping with Suck Creek Cycle’s website since they opened in 1998. The site was long overdue for an upgrade, so I took an existing template design and tweaked it a bit to look like the bike shop, then integrated social media and syndicated content from their vendors.

• Facebook local business page integration — publish from WordPress directly to Facebook
• Facebook Friends and Wall displayed on the website
• RSS Syndication for news from cycling sites and bike vendors

The post Bike Shop Website with Facebook Features appeared first on Chris Gilligan » new media.

Main St Farmers Market website

This is a major redesign of the website for Chattanooga’s Main St Farmers Market. Local designers Widgets & Stone came up with the logos and suggested the look and feel, and I worked with Padgett Arnold to get the visuals and content just right.

• Interactive home page presents tons of information in a compact javascript slider
• Fresh content includes recipes and a list of what’s available each week
• Facebook fan page gets automatically updated with new content
• New photos and videos are easily uploaded via SlideShowPro and YouTuber for a fun, engaging user experience
• Lightweight CSS3 design and an alternative layout for mobile browsers present the site quickly and efficiently

The post Farmers Market Website appeared first on Chris Gilligan » new media.

Craig Design Group Website

This is a simple website for a Chattanooga based landscape architect that focuses on beautiful portfolio slideshows. We’ve also added Twitter and Facebook integration to keep fans and customers updated on the latest projects.

The post Landscape Architect Website with Slideshows & Social Media Integration appeared first on Chris Gilligan » new media.

Social media, including sites like Facebook and MySpace, micro-blogging platforms like Twitter, and sharing/bookmarking tools like Digg, Del.icio.us and Stumble Upon are all very important to your outreach to customers, not to mention the incoming links they provide, and the potential of exponential viral traffic.

Add to this the need for regular blogging (on your site and other platforms) and email updates, and the management of all this online communication becomes daunting. What if there were a way to integrate all of your modes of online presence, so you’d only have to post once to update all of the different platforms? Well, the short answer is: there is.

I’ve been working with a local organic farm to update their online presence, and we’ve come up with a very simple implementation of WordPress that cross-posts to Facebook Pages and Twitter. Every blog post automatically creates an entry with linkback on Facebook Pages, and an accompanying Tweet with linkback. It has been a great way to keep the farm’s audience informed and engaged.

Additionally, we’ve added bookmarking links for all of the major social media platforms and favorites keepers, thus adding to the potential for viral sharing.

I’m also working on a mailing list that further integrates with WordPress, and it’s looking very promising. There is a new WordPress mailing list plugin that allows opt-in or manually entered mailing list clients to manage automated subscriptions to blog and page updates, and allows administrators to manage multiple mailing lists, and send newsletters and alerts. It integrates with the website seamlessly and also has WYSIWYG editing.

The post Social Media — Facebook, Twitter, Blogging and Sharing appeared first on Chris Gilligan » new media.