Forum Replies Created
-
AuthorPosts
-
TomMember
Just in case you didn't know already, check out the new Genesis Simple Share Plugin http://briangardner.com/genesis-simple-share/
I'm still need a 'Print' button. If anyone has a solution for this...
TomMemberResolved 🙂
TomMemberHow do you go about targeting the whole widget and not just the content of the widget?
TomMemberApologies, ignore the strong tag's.
TomMemberHi Brad, so would you just use a text widget? I tried this and can't seem to target the correct area, for example:
HTML within Text Widget
<div class="holiday-lettings"> <p>Why the Genesis Framework is the Foundation of any <br> <strong>Smart WordPress Design</strong>. </p> <a href="http://www.studiopress.com/features" class="button">Learn More<a/> </div>
.siderbar .widget.holiday-lettings { background-color: #0274be; background-image: ; background-position: center top; background-repeat: no-repeat; background-size: 720px 143px; color: #fff; padding: 30px 24px; padding: 3rem 2.4rem; text-align: center; }
TomMemberJust to expand on this topic, after some further research I have added slideshow functionality with Backstretch. Now, I am curious as by default I thought the slideshow should repeat from background images 1 > 4
Would anyone happen to know what to to add and where for this to take affect? Here is the code and relevant files below:
functions.php
function es_enqueue_scripts() { //* Load scripts only on home page, to enable on all pages remove the if is_home line and last line from the script if ( is_home() ) { wp_enqueue_script( 'es-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'es-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'es-backstretch' ), '1.0.0' ); wp_localize_script( 'es-backstretch-set', 'BackStretchImg', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg1.jpg' ) ); wp_localize_script( 'es-backstretch-set', 'BackStretchImg2', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg2.jpg' ) ); wp_localize_script( 'es-backstretch-set', 'BackStretchImg3', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg3.jpg' ) ); wp_localize_script( 'es-backstretch-set', 'BackStretchImg4', array( 'src' => get_bloginfo( 'stylesheet_directory' ) . '/images/bg4.jpg' ) ); } }
front-page.php Is this code required in the front-page.php file? As I believe it is actioned in functions.php by if ( is_home() )
//* Enqueue Backstretch scripts wp_enqueue_script( 'agentpress-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'agentpress-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agentpress-backstretch' ), '1.0.0' ); wp_localize_script( 'agentpress-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_option( 'agentpress-home-image' ) ) ) );
backstretch.js
/*! Backstretch - v2.0.4 - 2013-06-19 * http://srobbin.com/jquery-plugins/backstretch/ * Copyright (c) 2013 Scott Robbin; Licensed MIT */ (function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g){g(b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);
backstretch-set.js Does something need to be added here maybe for the repeat of images?
jQuery(document).ready(function($) { $("body").backstretch([BackStretchImg.src,BackStretchImg2.src,BackStretchImg3.src,BackStretchImg4.src],{duration:1500,fade:750}); });
Apologies for all the pasted code...
TomMemberWorks a treat! Thank you!
TomMemberAnita, I swear I searched these forums looking for something similar haha. Thank you!
TomMemberAnybody?
TomMemberThank you, I would like to stay away from using a plugin for this if possible. I found this tutorial which I think is quite relevant to what I would like to do on the AgentPress Pro Theme (http://bradpotter.com/genesis-sixteen-nine-theme-with-a-backstretch-slideshow/)
TomMemberAny ideas? 🙂
TomMemberAnyone done anything similar before?
TomMemberHi Sridhar,
It's just on my localhost at the moment...
TomMemberHi Debra!
Looks great, I'm not too familiar with the IDX/MLS technology as I'm from England. I like how it has categorised your properties though, for example using the AgentPress Pro Demo, the Permalink is 'demo.studiopress.com/agentpress/listings/16520-adlon-road/'
It would be good if the Permalink looks something like this 'demo.studiopress.com/agentpress/listings/area-name/16520-adlon-road/'I guess it can be categorised by creating a 'Location' Taxonmy and then adding the 'Areas' as Terms, I'm not sure how to add this to the Permalink though.
Anyway I like your design! I hope business is going well!
August 13, 2014 at 9:50 am in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118591TomMemberThank you Anita, I think the plugin is another option like the function I added to functions.php. I tested it out though, with no luck.
I am quite interested in how you can use .SVG's, I was looking forward to playing around with the svg code and styling it. But, it's becoming quite a mission.
August 13, 2014 at 9:21 am in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118585TomMemberThank you Robin, I tried your suggestion but no luck unfortunately. I will come back to this on a rainy day and as I am in England it will probably be tomorrow...
I can select an image in the Header section, but the .svg will not work, it just appears like so:
August 12, 2014 at 3:22 pm in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118460TomMemberIn fact, I have also tried using a .png, which doesn't work either so maybe I am simply doing something wrong somewhere.
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '/images/logo.png', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 110, 'width' => 320, ) );
August 12, 2014 at 11:36 am in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118437TomMemberHaha! Brilliant! I also took the query to Stackoverflow, but no suggestions yet.
Here's the CSS I added
/* Logo, hide text */ .header-image .title-area { padding: 0; width: 340px; height: 340px; background: url(/img/tgoc.svg); display: block; } .no-svg .header-image { // fallback background-image: url(logo.png); } .header-image .site-title a { float: left; min-height: 110px; width: 100%; }
I'm on my localhost, could this have something to do with it?
Unix based servers (.htaccess)
It’s a bit less involved for Unix based servers, the MIME types can be added to your .htaccess file by adding the following lines:AddType image/svg+xml svg AddType image/svg+xml svgz
August 12, 2014 at 11:09 am in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118428TomMemberI can not get it to work unfortunately, I have tried several inserts like:
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '/images/tgoc.svg', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 110, 'width' => 320, ) );
and I have the following code in funtions.php to enable SVG uplaods. Though, even with this code in place. There is no file preview in the media library.
//* Enable SVG file upload function custom_mtypes( $m ){ $m['svg'] = 'image/svg+xml'; $m['svgz'] = 'image/svg+xml'; return $m; } add_filter( 'upload_mimes', 'custom_mtypes' );
August 11, 2014 at 4:20 pm in reply to: First Attempt (Modifying Lifestyle Pro) Advice Needed #118289TomMemberThank you Cre8tiveDiva! Much appreciated! 🙂
-
AuthorPosts