Minimum Theme: Replacing Featured Image w/ Genesis Responsive Slider

[grady]

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

[grady]

I 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,
-Grady

[grady]

Additionally, 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.

[grady]

UPDATE:  Modest Success!

apricotforesthospital.com

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

[Brad Dalton]

Delete 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.

---

Tutorials for StudioPress Themes.

[grady]

Brad, 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.

apricotforesthospital.com

Any suggestions would be much appreciated!

[Brad Dalton]

The 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.

---

Tutorials for StudioPress Themes.

[grady]

I 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

[Brad Dalton]

Hi Grady

Simply delete the padding: padding: 60px 0;

#home-featured {
  overflow: hidden;
  padding: 60px 0;
  width: 100%;
}

---

Tutorials for StudioPress Themes.

[grady]

Brad, 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.

[Brad Dalton]

hahaha. 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;
}

---

Tutorials for StudioPress Themes.

[grady]

Brad, you're a boss.

Thank you so very much for your kind assistance!

[Author]

Posts