+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: Filterable Portfolio (/showthread.php?tid=5016)
Filterable Portfolio - Speed - 2013-07-25
Maybe I've missed something but...
I am trying to create filterable portfolio see example here:
http://mazeofminds.com/533/filterable-portfolio-powered-by-jquery/
I wonder if there are plugin... or is it possible to build/create codes?
It succeed when I use wordpress, I only wonder if its possible to do it with GS?
RE: Filterable Portfolio - RobA - 2013-07-26
I coded it into the portfolio page template on my site:
http://www.cartocopia.com/portfolio/
-Rob A>
RE: Filterable Portfolio - Speed - 2013-07-27
(2013-07-26, 04:35:31)RobA Wrote: I coded it into the portfolio page template on my site:
http://www.cartocopia.com/portfolio/
-Rob A>
Can you share codes.., I send you PM.
RE: Filterable Portfolio - RobA - 2013-07-28
(2013-07-27, 06:41:20)Speed Wrote: Can you share codes.., I send you PM.
The whole page is generated programatically, using Mike's custom field plugin to assign map categories to each page, and grabbing the images from the right folders using the child page slugs as indices.
Probably not much use to anyone else, sorry.
-Rob A>
RE: Filterable Portfolio - Speed - 2013-07-29
Yet can you expand it, share some tips or give out suggestion. I mean it was you opened door introduced to your work... and i was hoping you'd share... Since there's lack information on several plugin functions I am sure there are few of us would like to learn too.
RE: Filterable Portfolio - shawn_a - 2013-07-29
You asked if it was possible, yes, anything is possible. But you gotta figure out how you can do it according to your needs.
RobA your a cartography fan ?
Mee too.
I made this from scratch, http://gothere.tablatronix.com/maps/
RE: Filterable Portfolio - RobA - 2013-07-30
Well - here is the page code, for what good it might do someone. It isn't that pretty, but it works for me and keeps things simple. I just add a new child page under this one when I need a new map, upload images using a naming convention (I have a gimp script that generates the images for me with the correct names) and the following happens:
- The mouseover title is css, and is the title field from each child page
- the map type for the mobilyselect javascript comes from the custom (droplist) maptype field from each title page
- the images come from /data/uploads/childslug/
- the links to the child pages are just the child slugs (of course)
Hope that helps someone.
Code:
<?php
/****************************************************
*
* @File: portfolio.php
* @Package: GetSimple
* @Action: carto theme for the GetSimple CMS
*
*****************************************************/
/* Register and queue scripts */
register_script('mobilyselect', get_theme_url(false).'/mobilyselect.js', '1.0', FALSE);
register_script('mobilyselect_init', get_theme_url(false).'/init.js', '1.0', FALSE);
queue_script('jquery',GSFRONT);
queue_script('mobilyselect',GSFRONT);
queue_script('mobilyselect_init',GSFRONT);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!-- Head -->
<title><?php get_page_clean_title(); ?> - <?php get_site_name(); ?></title>
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="<?php get_theme_url(); ?>/style.css" media="all" />
<?php get_header(); ?>
<script type="text/javascript"><!--
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
/* IE6 flicker hack from http://dean.edwards.name/my/flicker.html */
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
--></script>
</head>
<body id="<?php get_page_slug(); ?>" >
<?php include(GSTHEMESPATH.$TEMPLATE.'/header.php'); ?>
<div id="wrapper">
<div id="content">
<h1><?php getPageField(return_page_slug(),"title"); ?></h1>
<div id="page-content">
<div class="page-text">
<?php get_page_content(); ?>
<?php
/****************************************************
* Create the list of subpages.
*****************************************************/
echo '<div style="text-align:center;display:table;">' . "\n";
/* Uses Mike's page caching plugin http://get-simple.info/extend/plugin/page-caching/65/ */
$childlist = getChildren(return_page_slug());
$subpagelist = array();
foreach($childlist as $child) {
if (returnPageField($child, 'private') != 'Y')
$subpagelist[] = array($child, returnPageField($child,'title'), returnPageField($child,'pubDate'), returnPageField($child,'maptype'));
}
/* sort children my pubDate subval_sort is built in to GS2.1+ */
$subpagelist = subval_sort($subpagelist ,2);
$selecter_height = 90+145*floor((count($subpagelist)+2)/3);
echo '<div class="selecter selecter1" style="min-height:' . $selecter_height. 'px;">' . "\n";
/* This next bit is for the cool filter javascript */
?>
<div class="selecter portfolio">
<div class="selecterBtns">
<ul class="nolist">
<li><a href="#" rel="all" class="active">All Maps</a></li>
<li><a href="#" rel="world">World Maps</a></li>
<li><a href="#" rel="regional">Regional Maps</a></li>
<li><a href="#" rel="city">City/Town Maps</a></li>
<li><a href="#" rel="battle">Battle Maps</a></li>
<li><a href="#" rel="other">Other Maps</a></li>
</ul>
</div>
<div class="selecterContent">
<ul class="nolist">
<?php
foreach($subpagelist as $subpage) {
$cimage = '/data/uploads/' . $subpage[0] . '/cover.jpg';
echo '<li class="' . $subpage[3] . '">';
echo '<div class="rollthumb" style="background-image: url(' . $cimage . ');">' . "\n";
echo '<a href="' . $subpage[0] . '/"><span>' . $subpage[1] . "</span></a>\n";
echo "</div>\n";
echo '</li>';
}
echo '</div>';
/****************************************************/
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<?php include(GSTHEMESPATH.$TEMPLATE.'/footer.php'); ?>
</body>
</html>Pretty nifty interactive map Shawn- not familiar with There, though!
-Rob A>
RE: Filterable Portfolio - Speed - 2013-07-30
shawn_a: You are correct... I'd need to figure out how to do it myself. Problem is, not much of information that can get me started.
RobA: Thank you for sharing, I ll have a look at this and figure way out. Play around until I understand it.