Featured images slider size on larger resolutions

Home Forums Receptar Featured images slider size on larger resolutions

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20187

    creativehummus
    Participant

    Featured images slider size on larger resolutions

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,
    Thanks again for this great theme I’m using for my blog!

    I have a question regarding the size of the images on the header when I use the featured images/posts slider. They seemed cropped on larger resolutions. I managed to fix that when you are using the normal header, editing some PHP files.

    Screenshot: https://screenshots.firefox.com/U0gJSsuoyKDL4TOL/copytaste.local

    I’m not able to find a way to do the same when you are using the featured images slider:

    Screenshot: http://easycaptures.com/9907629826

    Would you be able to tell me how I can do that?

    Thank you very much,

    Susana

    #20188

    Oliver Juhas
    Keymaster

    Hi Susana,

    Thank you, glad to see the theme being used for good :)

    The homepage slideshow images are cropped to 3:1 ratio (1920:640 pixels). As that is the ratio of the slideshow.

    I can see the images being displayed correctly on your website even when I resize the browser window.

    So, what do you mean exactly? Would you like to change that ratio cropping? If so, you can try using https://wordpress.org/plugins/simple-image-sizes/ plugin to resize the receptar-banner image size (to 1920×960 for example) and then use custom CSS to set proper posts content indentation, such as:

    .home .content-area, .blog .content-area {
    	margin-top: 50%; /* Default value is 33.33% */
    }

    (No warranties, I haven’t tested this.)

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 7 months ago by  Oliver Juhas. Reason: Adding more info
    #20190

    Oliver Juhas
    Keymaster

    Or maybe I am misunderstanding the issue? Please post your Easycaptures image again as the http://easycaptures.com/9907629826 link does not work.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20191

    Oliver Juhas
    Keymaster

    If you mean that images are not full width when previewed on screens wider than 1920 pixels, then try using this custom CSS:

    .site-banner image {
    	width: 100%;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20202

    creativehummus
    Participant

    Hi Oliver,
    Thank you very much for your quick reply!
    Sorry if I didn’t explain myself well enough :S

    I’m talking about larger resolutions – like 2500px.

    I managed to fix that when you are using the receptar banner (NO FEATURED POSTS so no animated slider)
    Screenshot displaying correctly the images on the receptar banner: https://screenshots.firefox.com/7MoMjuzjO2YMElju/copytaste.local

    But I have the issue when I’m using the featured posts functionality (so the header became a slider with up to 6 featured posts).

    Screenshot displayed wrong on larger resolutions when using the animated slider: https://screenshots.firefox.com/hlqi77mr3bjpHOYK/copytaste.es

    I edited this to fix it:

    File: setup-theme-options.php (inc/setup-theme-options.php) 

    //Custom header
    add_theme_support( 'custom-header', apply_filters( 'wmhook_receptar_setup_custom_background_args', array(
    	'default-image' => receptar_get_stylesheet_directory_uri( 'assets/images/header.jpg' ),
    	'header-text'   => false,
    	'width'         => 2500, // 1920
    	'height'        => 833, // 640 Approx. 62% of desktop viewport height (16:9)
    	'flex-height'   => false,
    	'flex-width'    => true,
    ) ) );
    #20209

    Oliver Juhas
    Keymaster

    Hi creativehummus,

    Please never edit the theme files. Instead use a child theme. The code you are editing actually contains a filter hook, so you can use it in your child theme‘s functions.php file to modify.

    However, easier solution would be the one I’ve provided above, to stretch the image full width of the slider container, and if you want to make the image larger, try using a plugin, like I’ve mentioned above.

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.