Easy Slider - Support | Kriesi.at - Premium WordPress Themes

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

Author

Posts
March 30, 2016 at 5:28 pm #605313

jonrouse
Participant

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

March 31, 2016 at 10:37 am #605765
Josue
Inactive Moderator
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
March 31, 2016 at 10:58 am #605768

jonrouse
Participant

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!

March 31, 2016 at 11:05 am #605774

Josue
Inactive Moderator

Hey!

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

Best regards,
Josue

March 31, 2016 at 11:18 am #605786

jonrouse
Participant

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.

March 31, 2016 at 11:47 am #605805
Josue
Inactive Moderator
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
March 31, 2016 at 12:12 pm #605815
jonrouse
Participant
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.
March 31, 2016 at 12:18 pm #605818

Josue
Inactive Moderator

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

March 31, 2016 at 12:29 pm #605824

jonrouse
Participant

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!

March 31, 2016 at 12:48 pm #605833
Josue
Inactive Moderator
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
March 31, 2016 at 12:55 pm #605838

jonrouse
Participant

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

March 31, 2016 at 1:01 pm #605844

Josue
Inactive Moderator

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

Best regards,
Josue

March 31, 2016 at 1:05 pm #605850
jonrouse
Participant
Hi Josue,
I just did that, but the second larger image isn’t loading. (over 1500px)
- This reply was modified 8 years ago by jonrouse.
March 31, 2016 at 1:27 pm #605864

Josue
Inactive Moderator

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

March 31, 2016 at 1:30 pm #605868

jonrouse
Participant

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

March 31, 2016 at 1:35 pm #605874

Josue
Inactive Moderator

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

Regards,
Josue

March 31, 2016 at 1:41 pm #605879
jonrouse
Participant
Ok
- This reply was modified 8 years ago by jonrouse.
March 31, 2016 at 1:55 pm #605884

Josue
Inactive Moderator

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

March 31, 2016 at 2:05 pm #605892

jonrouse
Participant

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

March 31, 2016 at 2:15 pm #605895

jonrouse
Participant

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!!!

March 31, 2016 at 2:41 pm #605905
Josue
Inactive Moderator
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.
March 31, 2016 at 2:48 pm #605912

jonrouse
Participant

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.

March 31, 2016 at 2:51 pm #605919

Josue
Inactive Moderator

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

March 31, 2016 at 2:52 pm #605923

jonrouse
Participant

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

March 31, 2016 at 3:00 pm #605929

Josue
Inactive Moderator

You are welcome, glad to help :)

Regards,
Josue
Author

Posts

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

The topic ‘Easy Slider’ is closed to new replies.