Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 18, 2015 at 2:52 am #461027
    Przytula

    Hello,

    I’m a bit frustrated with how the theme handles full-width images. Please look at this link as an example: http://popejohnchurch.org/food-pantry/

    The banner image is natively 1920 x 400. But in my browser which is 1920px wide, the image is enlarged. BG repeat is set to “no repeat”. What’s also frustrating is that the Background Image Position dropdown choices really don’t seem to have much affect on how the image is positioned.

    If you could explain how the theme handles images, I would appreciate it. I just want all my banner images to be displayed in their native size.

    Thanks a bunch :)

    June 18, 2015 at 5:35 am #461080
    Josue

    Hi!

    The theme enlarges it so it can fit the 100% height of the section on all window sizes.

    Regards,
    Josue

    June 18, 2015 at 6:23 am #461099
    Przytula

    I don’t understand. I’m not asking for 100% height. Just 250px.

    Is there a way to keep the images from being enlarged?

    Thanks

    June 18, 2015 at 6:26 am #461100
    Josue

    You’d need to disable parallax first, in order to get that effect the theme has to enlarge the image.

    Best regards,
    Josue

    June 21, 2015 at 3:38 am #462271
    Przytula

    I’m still a bit confused. I don’t understand why the image is getting enlarged for the parallax effect. In my case, an image that is 1920 x 400 is plenty big enough already for a 250px custom height.

    In other themes where I’ve used parallax, they don’t enlarge the image. The amount of parallax simply depends on how much height the original image has. So if you’ve asked for a section to be 250px wide with parallax, then how much parallax you have to play with depends on the height of the image. If your image is only 250px, then you won’t have any parallax. If your image is 500px in height, then you’ll notice a lot of parallax.

    As a designer, when you enlarge an image on me, it is frustrating because I want my image to look a specific way. So maybe this is something you can consider in the future.

    So basically what you’re saying is, in order to get around the image enlargement, I have to use a fixed banner?

    Is there a way for me to alter the code to stop the images from getting enlarged for the parallax effect?

    Thanks for your help :)

    June 21, 2015 at 11:52 am #462318
    Josue

    So if you’ve asked for a section to be 250px wide with parallax, then how much parallax you have to play with depends on the height of the image. If your image is only 250px, then you won’t have any parallax. If your image is 500px in height, then you’ll notice a lot of parallax

    The way to mimic this in Enfold is to simply unselect the parallax option on sections where the image height is lower or equal to the height of the section.

    Best regards,
    Josue

    June 21, 2015 at 3:27 pm #462359
    Przytula

    Is there a way for me to alter the code to stop the images from getting enlarged for the parallax effect?

    June 22, 2015 at 12:32 pm #462660
    Ismael

    Hey!

    The parallax effect will not work if the image is not larger than its container, at least with the theme’s parallax effect, so when you set the color section to parallax effect, it creates another container inside the actual color section, apply the background there and then adjust its height to be larger or taller than the actual color section container. And the background size property is set to “cover” to keep it responsive and keep the image aspect ratio but:

    It will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

    You can alter the background size using the Quick CSS field but it might break the image aspect ratio and proportion on different screen sizes. You can try this:

    .avia-full-stretch {
  background-size: 100% !important;
}

    Regards,
    Ismael

    August 19, 2015 at 11:30 pm #490461
    zerodi

    OK, sorry to chime in here. I had the same problem and investigated a little bit and did some trial and error. In fact enfold crops (or enlarges) BG images in color sections with 100% height setting and parallax pretty much exactly 30% more than necessary. that means if you just add a whitespace of 30% of the images original height to the bottom of the image (in photoshop or similar) the image will fill the background perfectly through all screen sizes (what “cover”, or “stretch to fit” are actually supposed to do). the whitespace will NOT be visible. This is not a practical workaround though because the whitespace will of course become visible on devices (phone, iPads etc.) that do not support parallax and just adjust the full image to the devices screen height.

    there is no logical reason that I could think of as why this is handled this way by enfold and probably the reason why I found quite a few topics in the forums where people were complaining about it. I really think there should be an easy fix for it that would make a lot of happy enfold users even more happy.

    have a good day!

    August 20, 2015 at 11:15 am #490655
    urdaniz

    Hello, about this question, the images are showed 30% bigger without any reason to justify.
    I found the solution is in this line in section.php:
    $params['attach'] .= "<div class='av-parallax {$attachment_class}' data-avia-parallax-ratio='<strong>{$speed}</strong>' style = '{$background}' ></div>";

    Must be (in bold)

    $params['attach'] .= "<div class='av-parallax {$attachment_class}' data-avia-parallax-ratio='<strong>0.0</strong>' style = '{$background}' ></div>";

    I changed it directly to the theme (no in child theme). This forces me to keep track of updates. I would appreciate Kriesi change and incorporate it in other updates to not be aware of it.

    See you

    August 20, 2015 at 2:20 pm #490785
    zerodi

    urdaniz, thanks for your input. I tried your code change but unfortunately this didn’t work on my end. This broke my site completely -> most BGs just simply disappeared altogether. Still hoping to get a fix for this that we can implement into our child themes.

    August 20, 2015 at 8:36 pm #491077
    LAVision

    I also am struggling with this. Would love this to get fixed..

    August 20, 2015 at 9:46 pm #491096
    Josue

    Hey!


    @urdaniz    , @zerodi, you could use something like this in your child theme functions.php to change the parallax sections speed:

    function change_parallax_speed_value() {
	return "0.0";
}
add_filter('avf_parallax_speed', 'change_parallax_speed_value');

    Cheers!
    Josue

    August 20, 2015 at 11:54 pm #491118
    zerodi

    josue, thanks for coming back to us.

    I don’t understand how this would help. this just turns off the parallax altogether. If I wanted to do that I would just switch “parallax” for “scroll” in the background settings. I’m not sure if you understand what we are asking for? We like to keep the parallax but have enfold not crop more of the image as necessary to achieve that. as it stands now you could add approx. 30% of image height to the image and parallax would still work without showing any of it. that means a waste of 30% of our precious pixels. please feel free and login to my site to see what I’m talking about. I added whitespace to the 2nd, 3rd and 4th section. as you will see nothing of it is visible while the parallax still works. I hope you can follow my thoughts?

    August 21, 2015 at 9:59 am #491221
    urdaniz

    Thanks Josue for your note.

    However, as you said Zerodi is not correct your solution.
    Simply and plainly Kriesi have to set the value of the variable “data-avia-parallax-ratio = ‘0.0’ ‘. It is independent of the variable ‘speed’.
    Kriesi has mixed both variables and I do not know why. Some reason will be. Photos with parallax effect should not be extended.

    Joaquín

    August 21, 2015 at 10:42 am #491237
    Josue

    I’ve tagged Kriesi to this topic, please wait for his response.

    Cheers!
    Josue

    September 23, 2015 at 2:22 am #507445
    118group

    Yes I am having the same issue. Please let me know when this issue s addressed!

    Thanks!

    September 25, 2015 at 9:25 am #508840
    Ismael

    Hey!


    @118group    : What is the issue with the slider exactly? Can you please create another thread with the page url? A screenshot will help as well.

    Best regards,
    Ismael

    September 25, 2015 at 2:45 pm #509055
    118group

    I figured it out. When your editing the color section – section background tab – if you have the background attachment on the fixed or parallax it zooms it to about 30% larger. But when it is on scroll the background image appears like the way you want it to be.

    Theme is great – thank you!

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Bit confused on how Enfold sizes images for the full-width parallax effect.’ is closed to new replies.