2011/10/12

Filter auf Make Better Websites

Vor ein paar Wochen hatte ich MakeBetterWebsites ein neues Design verpasst. Ich hatte eine Seite für Filter eingerichtet. Gleich gab es ein zwei Stimmen Kritik das man auf einer extra Seite landet und somit das ganze etwas umständlich ist. Ganz recht hatten Sie damit ja nicht. Es war also an der Zeit das ganze neu zu machen, so das es leicht erreichbar ist und ohne die Seite neu laden zu müssen. Seit dem Wochenende ist nun eine neue Version online wo mittels jQuery ein DIV unter der Navi eingeblendet wird wenn man auf Filter klickt. Das ganze funktioniert recht gut bin ich der Meinung und ist auch bis auf iPhone runter nutzbar.

Vielleicht interessiert es ja den ein oder anderen wie ich das gemacht habe. Deswegen ein paar Worte und ein paar Zeilen Code dazu. Grundsätzlich muss man sagen, ist es in WordPress nicht möglich Mehrfachfilter zu setzen. Das wäre richtig schick gewesen. Vielleicht geht es auch irgendwie aber mir war keine Möglichkeit bekannt. Aber auch so ist es schon recht nett bin ich der Meinung. Fangen wir an.

Der HTML/PHP Code (WordPress)

      
        <div id="filterBox">
	<div id="filterContent">
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Color</h3>
			<ul class="wp-tag-cloud">
				<li><a style="background:#b6ae94; border: 1px solid #b6ae94; color:#fff;text-shadow:none;" class="beige" href="<?php bloginfo('home'); ?>/tag/beige">Beige</a></li>
				<li><a style="background:#000; border: 1px solid #000; color:#fff;text-shadow:none;" class="black" href="<?php bloginfo('home'); ?>/tag/black">Black</a></li>
				<li><a style="background:#333; border: 1px solid #333; color:#fff;text-shadow:none;" class="blackwhite" href="<?php bloginfo('home'); ?>/tag/black-and-white">Black and white</a></li>
				<li><a style="background:#1f53b6; border: 1px solid #1f53b6; color:#fff;text-shadow:none;" class="blue" href="<?php bloginfo('home'); ?>/tag/blue">Blue</a></li>
				<li><a style="background:#583d21; border: 1px solid #583d21; color:#fff;text-shadow:none;" class="brown" href="<?php bloginfo('home'); ?>/tag/brown">Brown</a></li>
				<li><a style="background:#333; border: 1px solid #333; color:#fff;text-shadow:none;" class="colorful" href="<?php bloginfo('home'); ?>/tag/colorful">Colorful</a></li>
				<li><a style="background:#777; border: 1px solid #777; color:#fff;text-shadow:none;" class="gray" href="<?php bloginfo('home'); ?>/tag/gray">Gray</a></li>
				<li><a style="background:#569f2a; border: 1px solid #569f2a; color:#fff;text-shadow:none;" class="green" href="<?php bloginfo('home'); ?>/tag/green">Green</a></li>
				<li><a style="background:#cf7907; border: 1px solid #cf7907; color:#fff;text-shadow:none;" class="orange" href="<?php bloginfo('home'); ?>/tag/orange">Orange</a></li>
				<li><a style="background:#d5036e; border: 1px solid #d5036e; color:#fff;text-shadow:none;" class="pink" href="<?php bloginfo('home'); ?>/tag/pink">Pink</a></li>
				<li><a style="background:#7b29a8; border: 1px solid #7b29a8; color:#fff;text-shadow:none;" class="purple" href="<?php bloginfo('home'); ?>/tag/purple">Purple</a></li>
				<li><a style="background:#b21d0f; border: 1px solid #b21d0f; color:#fff;text-shadow:none;" class="red" href="<?php bloginfo('home'); ?>/tag/red">Red</a></li>
				<li><a style="background:#18c5c4; border: 1px solid #18c5c4; color:#fff;text-shadow:none;" class="turquoise" href="<?php bloginfo('home'); ?>/tag/turquoise">Turquoise</a></li>
				<li><a style="background:#c8a500; border: 1px solid #c8a500; color:#fff;text-shadow:none;" class="yellow" href="<?php bloginfo('home'); ?>/tag/yellow">Yellow</a></li>
				<li><a style="background:#fff; border: 1px solid #d4d4d4; color:#777;text-shadow:none;" class="white" href="<?php bloginfo('home'); ?>/tag/white">White</a></li>
			</ul>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Tag</h3>
			<?php $dh_tags = array(
			    'smallest'                  => 11,
			    'largest'                   => 11,
			    'unit'                      => 'px',
			    'number'                    => 0,
			    'format'                    => 'list',
			    'orderby'                   => 'name',
			    'order'                     => 'ASC',
			    'exclude'                   => '4,5,12,14,15,19,22,24,30,36,38,40,52,55,82',
			    'taxonomy'                  => 'post_tag',
			    'echo'                      => true );
			?>
			<?php wp_tag_cloud( $dh_tags ); ?>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Month</h3>
			<?php $dh_month = array(
			    'type'            => 'monthly',
			    'format'          => 'html',
			    'show_post_count' => false,
			    'echo'            => 1
			); ?>
			<ul class="wp-tag-cloud">
				<?php wp_get_archives( $dh_month ); ?>
			</ul>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Year</h3>
			<?php $dh_year = array(
			    'type'            => 'yearly',
			    'format'          => 'html',
			    'show_post_count' => false,
			    'echo'            => 1
			); ?>
			<ul class="wp-tag-cloud">
				<?php wp_get_archives( $dh_year ); ?>
			</ul>
		</div>
	</div>
</div>

Der erste block ist für die Farben da. Die sind von Hand angelegt da die Button auch farbig angezeigt werden sollen. Etwas von WordPress generiertes wäre hier schwierig gewesen. Im zweiten Blog wird im Grunde nur eine TagCloud ausgegeben wo die Farben von oben extrahiert sind. Im dritten Block wird nach Monaten gefiltert und im letzten schließlich nach Jahren. Das sind so die Sachen die wohl interessant sein könnten. Wie gesagt, ein Mehrfachfilter wäre richtig schick aber ich wüsste nicht wie das mit WordPress gehen soll. Aber vielleicht hat ja später jemand eine Idee in den Kommentaren. Das ist im Grunde der HTML/PHP Code und der ganze DIV wird via: display:none; versteckt.

Der CSS Code

      
        #filterBox {
	display: none;
	width: 100%;
	background:#ccc url(images/smooth_wall.png) 0 0 repeat;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	float: left;
	padding: 5px 0 20px 0;
	overflow: hidden;
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
}
 
	#filterBox #filterContent {
		width: 1000px;
		margin: 0 auto;
	}
 
	#filterBox #filterContent .filterSubBox {
		width: 958px;
		float: left;
		margin: 15px 0 0 0;
		padding:0 20px 20px 20px;
		border-radius: 5px;
		border: 1px solid #bbb;
		box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		-moz-box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		-webkit-box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		background-image: linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -o-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.8, rgb(244,244,244)),
			color-stop(1, rgb(228,228,228))
		);
	}
 
	#filterBox #filterContent h3 {
		color: #555;
		border-bottom: 1px solid #e0e0e0;
		font: bold 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-transform: uppercase;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a {
		float: left;
		width: 131px;
		background: #e8e8e8;
		padding:0 10px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		border: 1px solid #d4d4d4;
		font: normal 11px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
		margin:3px;
		color: #555;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a:hover {
		background: #333;
		color: #eee;
		border: 1px solid #333;
	}
 
#filterBox #filterContent {
	width: 460px;
	margin: 0 auto;
}
 
	#filterBox #filterContent .filterSubBox {
		width: 418px;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a {
		width: 111px;
		margin:3px;
	}

Das ganze was wir oben gesehen haben wird natürlich auch noch mittels CSS gestylt. Alles kein Hexenwerk. Etwas rumspielen mit Box-Shadow und Background-Gradients.

jQuery Code

      
        // Show Filter
 jQuery(".showfilters").toggle(function () {
	jQuery(".showfilters").css("color", "#111");
	jQuery("#filterBox").animate({
		opacity: 1,
		height: 'toggle'
	}, 500);
	return false;
}, function() {	
	jQuery(".showfilters").css("color", "#107c73");
	jQuery("#filterBox").animate({
		opacity: 1,
		height: 'toggle'
	}, 500);
	return false;	
});

Der jQuery Part ist auch relativ kurz. Mit dem Toggle Befehl wird per klick der DIV eingeblendet. Das ganze wird mit Animate animiert. Man glaubt es kaum was? :) Mittels opacity und height Befehl wird der Div gleichzeitig eingeblendet sowie aufgeschoben. Beim erneuten klick auf Filter geht das ganze wieder in die entgegengesetzte Richtung.

So sieht der Filter dann aus

Tutorials

comments powered by Disqus

Filter auf Make Better Websites

Der HTML/PHP Code (WordPress)

Der CSS Code

jQuery Code

So sieht der Filter dann aus

Maybe interesting…

Sättigung — Sorry Apple

WordPress Custom Fields, fantastisch!

Fuji x100t — welcome again!

AWWWARDS — Honorable Mention

Hello 2017.

FUJIFILM X-Pro1 — Fuck, ich will eine!