Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Theme: Replacing Featured Image w/ Genesis Responsive Slider
- This topic has 11 replies, 2 voices, and was last updated 11 years, 2 months ago by grady.
-
AuthorPosts
-
February 14, 2013 at 11:15 pm #20463gradyMember
I am attempting to replace the featured image on my website apricotforesthospital.com with a series of 2 or 3 images which change every few seconds or so, and I am attempting to do this using the Genesis Responsive Slider tool.
This is my personal website and I am not a coder, and what I need to know is: once I have configured the slider, exactly what do I need to change in the Appearance > Editor > page-title.php code in order to replace the static sample.jpg image with the new widget?
I appreciate any and all help or advice, many thanks!
-Grady
February 15, 2013 at 2:06 am #20480gradyMemberI should add that since the original post I have attempted to solves this problem following the advice listed here:
http://www.carriedils.com/add-slider-minimum-theme/2293
Based on her instructions I have altered the functions.php files in the editor which originally read like this:
/** Add the featured image section */
add_action( 'genesis_after_header', 'minimum_featured_image' );
function minimum_featured_image() {
if ( is_home() ) {
echo '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>';
}
elseif ( is_singular( array( 'post', 'page' ) ) && has_post_thumbnail() ){
echo '<div id="featured-image">';
echo get_the_post_thumbnail($thumbnail->ID, 'header');
echo '</div>';
}
}
to this:
/** Add the featured image section */
add_action( 'genesis_after_header', 'minimum_featured_image' );
function minimum_featured_image() {
if ( is_front_page() ) {
echo '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>';
}
elseif ( is_singular( array( 'post', 'page' ) ) && has_post_thumbnail() ){
echo '<div id="home-featured"><div class="wrap">';
genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) );
echo '</div></div>';
}
}
Now I am attempting to configure the Genesis Responsive Slider to display the images I want to show without much luck.
Any suggestions would be much obliged.
Best,
-GradyFebruary 15, 2013 at 2:36 am #20485gradyMemberAdditionally, I have set up the Genesis Responsive Slider but asking it to display "pages", and creating two separate pages each solely containing an image I would like to display. Then I instructed the slider to "Include by page ID" and added the two pages' page ID's.
Still no luck getting anything at all to display in that space originally occupied by the featured image.
February 15, 2013 at 4:31 am #20491gradyMemberUPDATE: Modest Success!
However I'm still trying to figure out how to set up the slider settings in order to remove this thin grey line framing the images so that the images will fill the entirety of the space as in the static image on the demo site ... any suggestions appreciated!
-Grady
February 15, 2013 at 5:11 am #20493Brad DaltonParticipantDelete the border from this rule:
/* Genesis Slider Customization ------------------------------------------------------------ */ #genesis-responsive-slider { background-color: #fff; border: 10px solid #eee; margin: 0 auto; padding: 10px; position: relative; }
Why didn't you just add a custom widget area in the hook location and use the slider in that location.
February 15, 2013 at 8:15 am #20500gradyMemberBrad, thank you very much for that. 🙂
I've done as you suggested, and the improvement is great! But unfortunately there's still a large gap between the image and the headline above (also a gap below the images) that I can't seem to remove.
Any suggestions would be much appreciated!
February 15, 2013 at 8:50 am #20503Brad DaltonParticipantThe best way to style your site is to install Firebig and inspect each element so you can copy the CSS rule to the end of your child themes style.css file and change, edit or remove the different values for each property in the declaration.
February 16, 2013 at 1:39 am #20651gradyMemberI have installed firebug and am attempting to learn how to make use of it as we speak.
In the mean time, does anyone have any direct suggestions as to how I might go about removing the white blank spaces between my rotating featured images on the home page and the header above?
Many thanks,
-grady
February 16, 2013 at 1:52 am #20652Brad DaltonParticipantHi Grady
Simply delete the padding: padding: 60px 0;
#home-featured { overflow: hidden; padding: 60px 0; width: 100%; }
February 16, 2013 at 1:57 am #20654gradyMemberBrad, thank you again! Your suggestion has almost completely solved the problem. 🙂
After deleting the "padding: 60px 0;" only a small white sliver of space remains.
I am continuing to work to find ways to remove the final remaining white sliver of space.
February 16, 2013 at 2:00 am #20655Brad DaltonParticipanthahaha. Getting there. I like that small border but you can remove it using this code.
Delete this padding: padding: 10px;#genesis-responsive-slider { background-color: #FFFFFF; margin: 0 auto; padding: 10px; position: relative; }
February 16, 2013 at 2:05 am #20656gradyMemberBrad, you're a boss.
Thank you so very much for your kind assistance!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.