Important:
This support area is for Kalium 3 users only. Support for Kalium 4 has moved to our new platform at support.laborator.co. If you’re using Kalium 4, please create a new account there using your email and license key. A password will be sent to you automatically.

Okay
  Public Ticket #1863570
portfolio item featured picture
Closed

Comments

  •  3
    Per started the conversation
    January 21, 2019 at 9:36pm

    Hello,

    Is it possible to have the portfolio item featured image to be automatic scaled up or down to fit in to screen size? To avoid need for scrolling to see th whole picture

  • [deleted] replied
    January 22, 2019 at 8:39am

    Hi Per,

    I understand your issue, here I have created a code only for your purpose:

    <script>
jQuery( document ).ready( function() {
    var $featured = jQuery( '.single-portfolio .portfolio-featured-image' ),
        width = $featured.width(),
        height = $featured.height(),
        winWidth = jQuery( window ).width(),
        winHeight = jQuery( window ).height();
    if ( $featured.length === 0 ) {
        return;
    }
    var excessiveHeight = winHeight - height;
    if ( excessiveHeight < 0 ) {
        var headerHeight = jQuery( '.site-header' ).outerHeight();
        // Uncomment below line if you don't want to include header in viewport calculation (the image will be bigger)
        //headerHeight = 0; 
        var newHeight = height + excessiveHeight - headerHeight,
            newWidth = width * ( newHeight / height );
        $featured.css( {
            maxWidth: newWidth,
            marginLeft: 'auto',
            marginRight: 'auto'
        } );
    }
} );    
</script>
    So here is demonstration how it works:

    https://d.pr/v/Vx0hpM

    To add the code to your site go to Theme Options > Footer > JavaScript & Tracking Code > Footer JavaScript

  •   Per replied privately
  • [deleted] replied
    January 23, 2019 at 8:01am

    Hi Per,

    Glad to hear thatsmile.png

    Will set this ticket as solved from here.

  •   Per replied privately
  • [deleted] replied
    February 4, 2019 at 10:02am

    Hi Per,

    Sure you can modify the previous code to use the extra selector for blog posts as well:

    .single-post .post-image .featured-image

    So the final code would be:

    <script>
jQuery( document ).ready( function() {
    var $featured = jQuery( '.single-portfolio .portfolio-featured-image, .single-post .post-image .featured-image' ),
        width = $featured.width(),
        height = $featured.height(),
        winWidth = jQuery( window ).width(),
        winHeight = jQuery( window ).height();
    if ( $featured.length === 0 ) {
        return;
    }
    var excessiveHeight = winHeight - height;
    if ( excessiveHeight < 0 ) {
        var headerHeight = jQuery( '.site-header' ).outerHeight();
        // Uncomment below line if you don't want to include header in viewport calculation (the image will be bigger)
        //headerHeight = 0; 
        var newHeight = height + excessiveHeight - headerHeight,
            newWidth = width * ( newHeight / height );
        $featured.css( {
            maxWidth: newWidth,
            marginLeft: 'auto',
            marginRight: 'auto'
        } );
    }
} );    
</script>