Minimum Theme: Replacing Featured Image w/ Genesis Responsive Slider

Community Forums Forums Design Tips and Tricks Minimum Theme: Replacing Featured Image w/ Genesis Responsive Slider

This topic is: resolved

This topic contains 11 replies, has 2 voices, and was last updated by  grady 1 year, 5 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #20463

    grady
    Participant
    Post count: 11

    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

    #20480

    grady
    Participant
    Post count: 11

    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

    #20485

    grady
    Participant
    Post count: 11

    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.

    #20491

    grady
    Participant
    Post count: 11

    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

    #20493

    braddalton
    Participant
    Post count: 8871

    Delete the border from this rule:
    [css]
    /* Genesis Slider Customization
    ———————————————————— */

    #genesis-responsive-slider {
    background-color: #fff;
    border: 10px solid #eee;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    }
    [/css]

    Why didn’t you just add a custom widget area in the hook location and use the slider in that location.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #20500

    grady
    Participant
    Post count: 11

    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!

    #20503

    braddalton
    Participant
    Post count: 8871

    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.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #20651

    grady
    Participant
    Post count: 11

    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

    #20652

    braddalton
    Participant
    Post count: 8871

    Hi Grady

    Simply delete the padding: padding: 60px 0;
    [css]
    #home-featured {
    overflow: hidden;
    padding: 60px 0;
    width: 100%;
    }
    [/css]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #20654

    grady
    Participant
    Post count: 11

    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.

    #20655

    braddalton
    Participant
    Post count: 8871

    hahaha. Getting there. I like that small border but you can remove it using this code.
    Delete this padding: padding: 10px;
    [css]
    #genesis-responsive-slider {
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    }
    [/css]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #20656

    grady
    Participant
    Post count: 11

    Brad, you’re a boss.

    Thank you so very much for your kind assistance!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.