Setting different image for slider

Sparkling
1

I’d like to set a different image for the slider than the featured image for each post. Is there a way to attach a image to a post just for use in the slider? This way the featured image can be e.g. a 16:9 aspect ratio photo whereas for the slider you can use a 21:6 crop (like the recommmended 1920x550 px) for use in the slider?

2

You can also use 19:9 images for slider as those images are not cropped and will be displayed as is inside slider.

Attaching custom image to the post is not as easy as it might sound. You can look into WordPress codex to see how it is done: http://codex.wordpress.org/Using_Custom_Fields_to_attach_images,_links_or_files_to_a_post_easily

3

I understand, but using taller aspect ratios means the slider takes up a lot of space on smaller screen sizes, such as 1366x768 (common laptop resolution) which means people only see the slider and don’t directly notice they can scroll down for more content.

My idea was to use a 21:6 image for the slider so height-wise the slider doesn’t take up all of the screen on lower resolution laptops, whilst still be able to use a different image as featured image for posts pages.

Could it be possible to define some sort of crop size in the theme’s functions.php and then have the slider pick that cropped version up for use in the slider?

4

You can define a new image size for featured slider by adding c code like this tofunctions.php file. I have added example with regular featured image size and you can change it to one that you like better.

add_image_size( 'sparkling-featured-slider', 750, 410, true );

Afterwards you will have to edit extras.php file which you can find on theme folder - inc.

And replace

            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

With custom image size you defined earlier. The main thing here is to keep the same name sparkling-featured-slider

            if ( (function_exists( 'the_post_thumbnail' )) && ( the_post_thumbnail('sparkling-featured-slider') ) ) :
              echo the_post_thumbnail('sparkling-featured-slider');
            endif;
5

Have tried this out and it indeed works.

However, I first tried to copy the modified extras.php file in a newly created inc directory within my child theme directory. This didn’t work. Any idea how I could store this changes within the child theme so I don’t have to re-modify the file every time Sparkling theme gets an update?

6

extras.php file is not part of default WordPress theme files, so it won’t work by copy/pasting it directly to Child Theme.

To make it work via Child Theme just copy the entire function like this

if ( ! function_exists( 'sparkling_featured_slider' ) ) :
/**
 * Featured image slider, displayed on front page for static page and blog
 */
function sparkling_featured_slider() {
  if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li>';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                echo '<a href="'. get_permalink() .'">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
                echo '</a>';
              echo '</div>';

              endwhile;
            endif;

          echo '</li>';
      echo '</ul>';
    echo ' </div>';
  }
}
endif;

To Child Theme functions.php file and modify it there. They way function will overwrite default function while not causing any “function already defined” errors.

7

Excellent. Thank you very much!