Changing the size of the Flex-slider

  • Resolved brighton beach

    (@brighton-beach)


    8 years, 1 month ago

    As a default, the maximum size of the Flex-slider is 1092x400px. I would like to change this to 1092x600px.

    In the functions.php of my child theme, I have removed the old featured-image size and added a new one.

    
function remove_then_add_image_sizes() {
	remove_image_size('sketch-featured');
    	add_image_size('sketch-featured', 1092, 600, true);
}
add_action('init', 'remove_then_add_image_sizes');

    Then I have regenerated the thumbnails. The images are bigger now, but the size of the slider is still the same. I have played around a bit with the CSS, but was not successful yet.

    What would I have to do to change the height of the slider without distorting the slides?

Viewing 9 replies - 1 through 9 (of 9 total)
  • HudsonValleyWebDesign

    (@jaycbrf)

    8 years, 1 month ago

    Why would you mess with the featured image settings in functions.php?

    Slider sise is controlled in the JS and css files.

    Thread Starter brighton beach

    (@brighton-beach)

    8 years, 1 month ago

    I believe the slider uses the featured images. As I want to show bigger slides, I have to increase their size first. Otherwise the slider might blow them up, which would result in loss of quality.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 1 month ago

    Hi there – give this a try:

    .page-template-portfolio-page-php .flexslider .entry-thumbnail  {
  height: 600px;
}

    This is the function I normally use to change the featured image size in Sketch child themes — it’s a bit different than yours, but if yours is working OK, you can keep it. 🙂

    function sketch_child_featured() {
  add_image_size( 'sketch-featured', '1092', '600' );
}
add_action( 'after_setup_theme', 'sketch_child_featured', 11 );

    Let me know how it goes.

    Thread Starter brighton beach

    (@brighton-beach)

    8 years, 1 month ago

    Thank you, Kathryn.

    I tried the CSS code you suggested. The slider has a height of 600px now. Unfortunately this height stays fixed when I make the window smaller. The slider’s width and the dimensions of the image scale down proportionally, but the slider’s height doesn’t change.

    Still playing around with it. Tried max-height: 600px, but this caused it to go back to the original dimensions.

    What could I do to make the slider a different size and keep its responsive functionality?

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 1 month ago

    You can wrap the CSS in a media query to restrict the height modification to a maximum screen size. To learn about media queries check out:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Let me know how it goes!

    Thread Starter brighton beach

    (@brighton-beach)

    8 years ago

    I would like to change the height of the slider. When I do this, as described above, it looses the ability to seamlessly scale, when changing the window size. The slider images scale proportionally, but the slider’s viewport has a fixed height. I don’t think that introducing more breakpoints would solve this.

    Thread Starter brighton beach

    (@brighton-beach)

    8 years ago

    I found the solution. Removing the entry-thumbnail span class from the slider (using a child theme of course) seems to have done the trick. Now it works as expected, the sliders width and height scale proportionally.

    priscillepeyrelongue

    (@priscillepeyrelongue)

    8 years ago

    Hello Katryn,
    I copied and pasted the first bit of code you indicated. The slider has now got the good height (600 PX) but the picture have not changed (still 400 px).
    Do you have any idea how I can fix that?
    Cheers,
    P

    Moderator Kathryn Presner

    (@zoonini)

    8 years ago

    @priscillepeyrelongue – please start a new thread and provide a link to your site. Thanks!

    https://wordpress.org/support/theme/sketch/#new-topic-0

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing the size of the Flex-slider’ is closed to new replies.