Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #605313

    Hi,

    Is there a way to set a maximum height for the easy slider?
    I’m on a 28″ screen and my image in the easy slider measures 2600px x 600px.
    I’d like it to stop being responsive over 1600px wide.

    I’ve attached the page, but set it to private as the page isn’t published properly yet.

    I understand if this is a stupid question, but if you see the page, the photo scales up to fill the vertical content space.
    Thanks

    #605765

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (min-width: 1600px) {
    #top .avia-slideshow-inner {
        max-height: 600px;
    }
    
    #top .av_slideshow_full li img {
        max-height: 600px;
        width: auto;
    }
    }

    Cheers! 
    Josue

    #605768

    Thanks Josue. That sort of works, but the image should bleed out to the edges. With this solution the image is getting cropped.

    I tried changing the easy slider dimensions to “no scaling” but as my source images are 2600 x 600, it looks terrible at smaller sizes.

    I tried to change the width: auto; to width: 100%; but the image gets stretched.

    Is there a solution to this, or am I asking too much?

    Cheers!

    #605774

    Hey!

    Can you post a screenshot/mockup of how you want it to look (at 1600+)?

    Best regards,
    Josue

    #605786

    Hi

    Kind of like the attached, so the site uses the full width of the image, but retains a common height of 600px until it goes responsive (maybe below 1000px?). I’m just pulling these numbers out of nowhere, but I’m guessing you get my drift!

    I would add that I tried doing this with a colour section originally with a set pixel height, but it didn’t scale nicely at mobile sizes.

    #605805

    This code should achieve that result:

    @media only screen and (min-width: 1600px) {
        #top .av_slideshow_full li img {
            max-height: 600px;
            width: auto;
        }
    }
    
    #top .avia-slide-wrap {
        background: #d3d4c4;
    }

    Regards,
    Josue

    #605815

    Thanks, but sadly, that’s not going to work. There are going to be about 25 images, which I’m going to need to photoshop and fade out the colours to match the colour pallet of that particular image (a bit like iTunes does when setting the background colour of an album playlist).

    Each:

    #top .avia-slide-wrap {
        background: #d3d4c4;
    }

    Is going to be a different colour. Is there any css which wouldn’t crop the width of the image? It’s almost that I need an extra criteria in the “Slideshow Image and Video Size” drop down to be 2600 x 600. I’m guessing that this is too big of a change for a novice like me.

    #605818

    I see what you’re referring to, there’s an option in the Easy Slider to get the full image – http://screencast.com/t/WBXI7IDyl14

    #605824

    Haha, yes, I tried this yesterday but it looks terrible at normal screen widths! (1200ish pixels).
    Of all of the options, I’m finding that 150×630 is giving the best results, but it’s just too big at larger sizes.

    I think I’m asking too much!

    #605833

    There’s a way though, but it requires modifying the main slider file. Open /enfold/config-templatebuilder/avia-shortcodes/helper-slideshow.php and look for line 367:

    $img   	         = wp_get_attachment_image_src($slide->ID, $this->config['size']);
    

    Change it to:

    $img   	         = wp_get_attachment_image_src($slide->ID, $this->config['size']);
    $img_full   	 = wp_get_attachment_image_src($slide->ID, 'full');
    

    Also in the same file look for (490)

    $html .= "<img src='".$img[0]."' width='".$img[1]."' height='".$img[2]."' title='".$linktitle."' alt='".$linkalt."' $markup_url />";
    

    Change it to:

    $html .= "<img class='img_default' src='".$img[0]."' width='".$img[1]."' height='".$img[2]."' title='".$linktitle."' alt='".$linkalt."' $markup_url />";
    $html .= "<img class='img_full' src='".$img_full[0]."' width='".$img_full[1]."' height='".$img_full[2]."' title='".$linktitle."' alt='".$linkalt."' $markup_url />";
    

    Finally add this to Quick CSS:

    img.img_full{
        display: none !important;
    }
    @media only screen and (min-width: 1500px) {
        img.img_full {
            display: block !important;
        }
        img.img_default{
            display: none !important;
        }
    }

    With that modification both images will be loaded but the full one will be shown after 1500px only.

    Best regards,
    Josue

    #605838

    Thanks Josue. Totally out of my depth with this one, but will try it now!

    #605844

    If you hand me a FTP account i can do this for you.

    Best regards,
    Josue

    #605850

    Hi Josue,
    I just did that, but the second larger image isn’t loading. (over 1500px)

    • This reply was modified 8 years, 8 months ago by jonrouse.
    #605864

    Hm, that’s unexpected, does it happen with other images too?

    #605868

    No, just this page. Though I haven’t used an easy slider anywhere else.

    #605874

    Can you please create me a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    #605879

    Ok

    • This reply was modified 8 years, 8 months ago by jonrouse.
    #605884

    Should work now (i didn’t specify the exact lines to edit in my message).

    #605892

    Thanks! Is there a way I can edit the height when the width is over 1500px? So, at over 1500px wide the height is set at 600px

    #605895

    A couple of other things, whilst I remember (sorry!)

    I presume when I update the theme these changes will no longer be there. Now you’ve added the line numbers above, is that all I need to do?
    Secondly, let me know when you’ve finished with the account, as I need to disable that.

    Thanks!!!

    #605905

    Hm, you could try this:

    @media only screen and (min-width: 1500px) {
        #top .av_slideshow_full li img {
            min-height: 600px;
            width: auto;
        }
    }

    Yes, the mod will be void when you update the theme but you can have prevent that by having a child theme.

    #605912

    Thanks Josue. I think I’m going to quit while I’m ahead!
    I’ve set the resize point to 2000px, this way it’s not going to look huge for people with big screens.

    I don’t want to have a child theme, so just do I just replicate your code from post #605833?
    I’m just checking that you didn’t do anything extra whilst you were in the back end.

    Thanks for all of your help.

    #605919

    Just changing those lines should be enough (+ adding the custom CSS).

    #605923

    Thanks, you’re a star. Enjoy the rest of your day!

    #605929

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Easy Slider’ is closed to new replies.