windhamdavid 4 years ago
parent
commit
2d90d59975
7 changed files with 193 additions and 5 deletions
  1. 10 0
      functions.php
  2. 1 1
      header.php
  3. 14 0
      inc/template.php
  4. 58 0
      js/art.js
  5. 43 0
      page-art.php
  6. 14 3
      page-studio.php
  7. 53 1
      style.css

+ 10 - 0
functions.php

@@ -81,6 +81,16 @@ function dw_scripts() {
 		wp_enqueue_script( 'last-fm', get_template_directory_uri() . '/js/fm.js', 'jquery', '', true );
 	}
 	
+	elseif ( is_page('art') ) {
+		wp_enqueue_style( 'ani', get_template_directory_uri() . '/css/animate.css');
+		wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-2.1.1.min.js', array(), false, true);
+		wp_enqueue_script( 'modern', get_template_directory_uri() . '/js/modernizr.js', 'jquery', '', true );
+		wp_enqueue_script( 'boostrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'offcanvas', get_template_directory_uri() . '/js/jasny-bootstrap.js', 'jquery', '', true );
+		wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', 'jquery', '', true );
+		wp_enqueue_script( 'last-fm', get_template_directory_uri() . '/js/art.js', 'jquery', '', true );
+	}
+	
 	elseif ( is_page('contact') ) {
 		require( get_template_directory() . '/inc/form.php' );
 		//gravity_form_enqueue_scripts(1, false);

+ 1 - 1
header.php

@@ -13,7 +13,7 @@
 <meta name="description" content="<?php dw_meta_desc();?>"/>
 <?php wp_head(); ?>
 </head>
-<body>
+<body <?php page_bodyclass(); ?>>
 <header id="header">
 	<div class="navbar navbar-fixed-top">
 		<div class="container">

+ 14 - 0
inc/template.php

@@ -12,6 +12,20 @@ function dw_post_format() {
 endif;
 */
 
+if ( ! function_exists( 'page_bodyclass') ) :
+function page_bodyclass() { 
+	global $wp_query;
+	$page = '';
+	if (is_front_page() ) {
+    	   $page = 'home';
+	} elseif (is_page()) {
+   	   $page = $wp_query->query_vars["pagename"];
+	}
+	if ($page)
+		echo 'class="'. $page. '"';
+}
+endif;
+
 if ( ! function_exists( 'dw_page_title') ) :
 function dw_page_title() {
 	global $page, $paged; 

+ 58 - 0
js/art.js

@@ -0,0 +1,58 @@
+new WOW().init();
+
+jQuery(document).ready(function($) {
+	
+	$(window).bind('load', function() {
+		$('#loader').fadeOut(100);
+	});
+
+	$('.nav-toggle').on('touchstart click', function(e) {
+		e.preventDefault();
+		$( this ).toggleClass( 'active' );
+	});
+
+	$(function dw_hidenav() {
+		var headerHeight = $('.navbar').height();
+		$(window).on('scroll', { previousTop: 0 },
+			function() {
+			var currentTop = $(window).scrollTop();
+			if (currentTop < this.previousTop) {
+				if (currentTop > 0 && $('.navbar').hasClass('fixed')) {
+						$('.navbar').addClass('visible');
+						$('.site-title a').removeClass('light');
+					} else {
+						$('.navbar').removeClass('visible fixed');
+					}
+			} 
+			else {
+				$('.navbar').removeClass('visible');
+				if (currentTop > headerHeight && !$('.navbar').hasClass('fixed')) $('.navbar').addClass('fixed');
+			}
+			this.previousTop = currentTop;
+			}  
+		);
+	});
+
+	$('#gallery').carousel({
+		interval: false,
+		wrap: true,
+	});
+	
+	$(document).bind('keyup', function(e) {
+	    if(e.which === 39){
+			$('#gallery').carousel('next');
+	    }
+	    else if(e.which === 37){
+			$('#gallery').carousel('prev');
+	    }
+	});
+	
+	$('.prev').click(function() {
+	  $('#gallery').carousel('prev');
+	});
+
+	$('.next').click(function() {
+	  $('#gallery').carousel('next');
+	});
+			
+});

+ 43 - 0
page-art.php

@@ -0,0 +1,43 @@
+<?php get_header(); ?>
+<div id="gallery" class="art-gallery carousel">
+	<div class="container leader">
+		<div class="row">
+			<div class="col-sm-2">
+				<h4><a href="#figures">Figures</a></h4>
+				<h4><a href="#landscapes">Landscapes</a></h4>
+				<h4><a href="#still">Still Life</a></h4>	
+				<h4><a href="#abstract">Abstract</a></h4>
+				<div class="controls">
+
+					<ol class="carousel-indicators">
+						<li data-target="#caro" data-slide-to="0" class="active"></li>
+						<li data-target="#caro" data-slide-to="1"></li>
+						<li data-target="#caro" data-slide-to="2"></li>
+						<li data-target="#caro" data-slide-to="3"></li>
+						<li data-target="#caro" data-slide-to="4"></li>
+						<li data-target="#caro" data-slide-to="5"></li>
+					</ol>
+					<div class="prev-next">
+						<a class="prev" href="#gallery" data-slide="prev">&lsaquo; Prev</a> - 
+						<a class="next" href="#gallery" data-slide="next"> Next &rsaquo; </a>
+					</div>
+				</div>	
+			</div>
+			<div class="col-sm-10">
+				<div class="carousel-inner">
+					<div class="item active gallery-image">
+						<img class="art-image" src="<?php echo get_template_directory_uri(); ?>/img/lemon-mater.jpg" alt="<?php the_title(); ?>"/>
+					</div>
+					<?php query_posts('category_name=paintings&showposts=12'); ?>
+					<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
+					<div class="item gallery-image">
+						<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'studio'); ?>
+						<img class="art-image" src="<?php echo $img_url[0];?>" alt="<?php the_title(); ?>"/>
+					</div>
+					<?php endwhile; ?>
+				</div>		
+			</div>
+		</div>
+	</div>
+</div>	
+<?php get_footer(); ?>

+ 14 - 3
page-studio.php

@@ -226,9 +226,20 @@
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="art">
-						<div class="entry-content">
-							<h4 class="georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em>. - Woody Allen<br />
-								I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
+						<div class="col-sm-9">
+							<div class="entry-content">
+								<h4 class="georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em> - Woody Allen.<br />I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
+							</div>
+						</div>
+						<div class="col-sm-3 studio-tools">		
+							<ul>
+								<li><em>Art Links</em></li>
+								<li><a href="art">Gallery</a></li>
+								<li><a href="art/painting">Paintings</a></li>
+								<li><a href="art/illustration">Illustration</a></li>
+								<li><a href="art/drawing">Drawings</a></li>
+								<li><a href="<?php echo home_url( '/' ); ?>shop/art">For Sale</a></li>
+							</ul>
 						</div>
 					</div>
 				</div>

+ 53 - 1
style.css

@@ -42,11 +42,11 @@ body {
 }
 
 
+
 /*============================================
 					Typography 
 ==============================================*/
 
-
 @font-face {
   font-family: 'Computer Modern';
   src: local("☺"), 	
@@ -1190,6 +1190,10 @@ img.dw {
 	width:100%;
 	margin: 30px 0 30px;
 }
+
+/*============================================
+					Studio 
+==============================================*/
 .studio-tools{
 	border-left: 1px solid #cecece;
 	margin: 28px 0px;
@@ -1230,6 +1234,54 @@ img.dw {
 	width: 100%
 }
 
+/*============================================
+					Art
+==============================================*/
+body.art {
+	background: #737373;
+}
+body.art .site-title a {
+	color: #FFFFFF;
+}
+.art a {
+	color: #2F3446;
+}
+.art a:hover {
+	color: #cecece;
+	text-decoration: none;
+}
+.art a:active {
+	color: #FFFFFF;
+	text-decoration: none;
+}
+.art-image {
+	border: 10px solid #FFFFFF;
+	max-height: 600px;
+}
+.art-gallery .controls {
+	margin: 300px 0 0;
+}
+.art-gallery .prev-next {
+	margin: 10px 0 10px;
+}
+.art-gallery .carousel-indicators {
+	position: relative;
+	margin: 10px 0;
+	padding: 0;
+	width: 100%;
+	left: 0 !important;
+}
+.art-gallery .carousel-indicators li {
+	border: 1px solid #555;
+}
+.art-gallery .carousel-indicators .active {
+	background-color: #555;
+}
+.art-image {
+	margin: 0 auto;
+}
+
+
 
 /*===== Structure =====*/
 .a:hover {