Skip to content

Instantly share code, notes, and snippets.

@jer0dh
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jer0dh/864c5e7bf1b53c9e1ef1 to your computer and use it in GitHub Desktop.
Save jer0dh/864c5e7bf1b53c9e1ef1 to your computer and use it in GitHub Desktop.
grid creation with filter
/* jhGrid.js
by jerod hammerstein
jhtechservices.com
Used to create a grid structure out of a listing of WordPress posts using the display_posts_shortcode by Bill Erickson
It also will look for an element with a comma-delimited list of filters or tags in each post and using those
fill in a dropdown box that will filter the list based on its selection.
With the following Filter Hook, I was able to make this list contain an element with a comma-delimited list of the
tags a post has. (Modified version of Bill Erickson's https://gist.github.com/billerickson/1175575#file_display_posts_shortcode_output.php)
add_filter( 'display_posts_shortcode_output', 'jh_display_posts', 10, 7 );
function jh_display_posts( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper ) {
$posttags = get_the_tags();
$tagsAsString = '';
if ($posttags) {
foreach($posttags as $tag) {
$tagsAsString .= $tag->name . ',';
}
}
// rebuild the output
$output = '<' . $inner_wrapper . ' class="listing-item">' . $image . $title . $date . $excerpt . '<span class="tags">' . $tagsAsString . '</span>' . '</' . $inner_wrapper . '>';
// return the modified output
return $output;
}
*/
(function( $ ) {
this.jhGrid = function( options ) {
var settings = $.extend({
rootClass: 'display-posts-listing',
itemClass: 'listing-item',
numColumns: 2,
filter: true,
firstColumnClass: 'first',
columnClass: 'one-half',
filterClass: 'tags',
formId: 'filterForm',
formAllString: "All"
}, options)
$('document').ready(function () {
// function to add appropriate classes to items in order to be in grid
var addClasses = function(index, item) {
$item = $(item);
$item.removeClass(settings.columnClass+' '+settings.firstColumnClass);
$item.addClass(settings.columnClass);
if ( (index % settings.numColumns) == 0) {
$item.addClass(settings.firstColumnClass);
}
};
// Find all items, take listed tags, add tags as data, remove tags from view, create array of unique tags to filter with
var $allListingItems = $('.'+settings.rootClass+' .'+settings.itemClass); //s
var $listContainer = $('.'+settings.rootClass);
var allFilters = '';
$allListingItems.each(function (index) {
var $filters = $(this).find('.'+settings.filterClass);
var filters = $filters.text();
allFilters += filters;
$(this).attr('data-filters', filters);
$filters.remove();
}
);
//Add classes for grid
$allListingItems.each(addClasses);
// Create an array to fill dropdown with
allFilters = allFilters.replace(/,s*$/, ''); //remove trailing comma or whitespace
var allFiltersArray = allFilters.split(',').filter(onlyUnique); //split string into array and then remove duplicates
allFiltersArray.sort();
// Find form and add filter array, bind event to filter list based on filters
var $form = $('#'+settings.formId);
$form.append('<select><option value="'+settings.formAllString+'">'+settings.formAllString+'</option></select>');
for (i = 0, len = allFiltersArray.length; i < len; ++i) {
$form.find('select').append('<option value = "' + allFiltersArray[i] + '">' + allFiltersArray[i] + '</option>');
}
$form.on('change', 'select', function (e) {
e.preventDefault();
var selectedFilter = this.value;
if (selectedFilter == settings.formAllString) {
$listContainer.find('.'+settings.itemClass).detach();
$allListingItems.each(addClasses);
$listContainer.append($allListingItems);
} else {
var filteredListingItems = $allListingItems.map(function (index, item) {
var filters = $(item).attr('data-filters');
if (typeof filters == "string" && filters.indexOf(selectedFilter) >= 0) {
return item;
}
});
$listContainer.find('.'+settings.itemClass).detach();
filteredListingItems.each(addClasses);
$listContainer.append(filteredListingItems);
}
});
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
});
}
})(jQuery);
jhGrid({
numColumns:3, columnClass:'one-third'
});
/* This code below was used to center the titles on the grid above
<script>
.listing-item {
text-align: center;
padding-top: 0.5em;
}
.listing-item img {
width: 100%;
height: auto;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.listing-item {
position: relative;
}
.listing-item a.title {
position: absolute;
top: 50%;
left: 22px;
width: 229px;
z-index: 1;
text-shadow: 2px 1px 0 #ccc,
2px 2px 0 #c9c9c9,
2px 3px 0 #bbb,
2px 4px 0 #b9b9b9,
2px 5px 0 #aaa,
2px 6px 1px rgba(0,0,0,.1),
2px 0 5px rgba(0,0,0,.1),
2px 1px 3px rgba(0,0,0,.3),
2px 3px 5px rgba(0,0,0,.2),
2px 5px 10px rgba(0,0,0,.25);
font-family: Impact, Charcoal, sans-serif;
font-weight: 700;
font-size: 28px;
letter-spacing: 1px;
line-height: normal;
word-wrap: break-word;
}
.listing-item.first a.title {
width: 100%;
left: 0px;
}
.listing-item a.title:hover {
font-size: 30px;
text-decoration: none;
}
</script>
*/
/**
* Created by jerod on 1/8/2015.
*
* $(window).load() was used after discovering Chrome and IE didn't work..parentHeight was 0.5 or -0.5
* So window.load makes sure all images (sub-elements) are loaded before running.
* Originally the code detached the list from the DOM before manipulating but discovered that the computed
* heights became 0.
*/
(function($) {
$(window).load(function () {
var settings = {
title: "a.title",
container: ".listing-item"
};
var $items = $(settings.container + " " + settings.title);
$items.each(function (index) {
var $title = $(this);
var $parent = $title.parent();
var parentHeight = $parent.height();
var titleHeight = $title.height();
var newTitleHeight = Math.floor(parentHeight / 2 - titleHeight / 2);
$title.css('top', newTitleHeight.toString() + "px");
});
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment