How to make Hemlock's featured area slider display 1 large image

Please note: This FAQ Article is specifically for the Hemlock theme.

By default, Hemlock's featured area slider will display 3 slides at a time. To have the featured area slider display just 1 large image instead, you can follow the steps below.

We first recommend installing a code editor plugin such as AceIDE (https://wordpress.org/plugins/aceide). Once activated, navigate to WP Dashboard > AceIDE > theme > hemlock > and open up Hemlock's "functions.php" theme file. 

Beginning on Line 35, you will see the "//Post thumbnails" section. Within this section, on Line 38, is a line of code for the "slider-thumb" image size. That line of code looks like this:

add_image_size( 'slider-thumb', 650, 440, true );

Change the "650, 440, true" value to instead be "1920, 500, true". That line of code should now look like this:

add_image_size( 'slider-thumb', 1920, 500, true );

Save the changes you've made to the file.

Next, we'll need to access the "solopine.js" theme file. Navigate to WP Dashboard > AceIDE > theme > hemlock > "js" folder > and open "solopine.js".

Beginning on Line 41 is the "//slider" section. This section of code looks like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});

On each of the items, we'll change the second number to be "1". Your "//slider" section should now look like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 1,
    itemsDesktop : [1199,1],
    itemsDesktopSmall : [980,1],
    itemsTablet: [768,1],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});

Be sure to save the theme file when you're done.

Lastly, we'll go to Appearance > Customize > Custom CSS and add the following code:

.featured-area {width: 100%;}
#owl-demo .item .feat-overlay {text-align: center;}
@media only screen and (min-width: 767px) and (max-width: 1500px) {
#owl-demo .item img {
    max-width: 100%;
    height: 450px;
    object-fit: cover;
}
}
@media only screen and (max-width: 767px) {
#owl-demo .item img {
    max-width: 100%;
    height: 350px;
    object-fit: cover;
}
}

You will need to ensure that your Featured Images are at least 1920 pixels in width & 500 pixels in height, otherwise they will not fill the new featured area slider dimensions nicely.

If your images are indeed the necessary size, though are still showing in the smaller, cropped size, you will need to run the Regenerate Thumbnails plugin. This will go through and refresh your images to the new cropping size.

And, voila!