-
AuthorPosts
-
March 21, 2016 at 8:52 pm #601493
What dimension of the shop banner is best to use to cover most of different monitor resolutions? I don’t want the picture to be zoomed in, it makes it look low-res.
We used this CSS-code so that the picture expands:.av-parallax-inner {
background-size: cover;
}But as a result the picture gets zoomed in. If I don’t use the code above, the picture don’t cover the parallax “box” resulting in white empty space.
Currently I use a picture with the dimension 3333x591px
March 21, 2016 at 9:08 pm #601499Hey belinger!
can we please check your web site, so we can see how it looks and how it can be better?
Cheers!
BasilisMarch 23, 2016 at 5:45 pm #602673I have provided a link to our website.
EDIT: I just noticed when I checked source code, the picture has been down-scaled to 1500×266. I can’t see any options to change this in media-library or anywhere else. I provided link to the picture.
- This reply was modified 8 years, 7 months ago by belinger.
March 24, 2016 at 10:22 pm #603471Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
Regards,
YigitApril 5, 2016 at 5:27 pm #608392Hi! Thanks for your reply, however that css code changed all of our category header images to the same.
Is it possible to turn off the parallax function, and just have a “normal” header image? The parallax zooming effect changes depending on screen resolution. It can look good on my high resolution 24″ screen, while on my smaller laptop it is difficult to see what the picture looks like and on my tablet it zooms in so much you have no idea what the picture is supposed to be.
April 8, 2016 at 5:27 am #609998Hey!
Add this in the functions.php file to disable the parallax effect:
add_action('init', 'ava_product_parallax_init', 50); function ava_product_parallax_init() { remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 ); add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_mod', 11 ); } function avia_woocommerce_big_cat_banner_mod() { if(is_product_category()) { global $wp_query, $avia_config; if(isset($wp_query->query_vars['taxonomy'])) { $term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']); if(!empty($term->term_id)) { $description = term_description() ; $style = get_woocommerce_term_meta($term->term_id, 'av_cat_styling'); $attachment_id = get_woocommerce_term_meta($term->term_id, 'thumbnail_id'); $overlay = get_woocommerce_term_meta($term->term_id, 'av-banner-overlay'); $font = get_woocommerce_term_meta($term->term_id, 'av-banner-font'); $opacity = get_woocommerce_term_meta($term->term_id, 'av-banner-overlay-opacity'); if(!empty($style)) { remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 ); echo avia_woocommerce_parallax_banner_mod($attachment_id, $overlay, $opacity, $description, $font); $avia_config['woo-banner'] = true; } } } } } function avia_woocommerce_parallax_banner_mod($bg, $overlay, $opacity, $description, $font) { if(is_numeric($bg)) { $bg = wp_get_attachment_image_src($bg, 'extra_large'); if(is_array($bg) && $bg[0] != "") $bg = $bg[0]; } if($font) $font = "style='color:{$font};'"; if($bg) $bg = "background-image: url(".$bg.");"; $output = ""; $output .='<div id="av_product_description" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" '.$font.'>'; $output .='<div class="av-section-color-overlay-wrap">'; if(!empty($overlay)) { $output .='<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: '.$overlay.'; "></div>'; } $output .='<div class="container">'; $output .='<main class="template-page content av-content-full alpha units">'; if($description) $output .= "<h1>".$description."</h1>"; $output .='</main></div></div></div>'; return $output; }
Best regards,
IsmaelApril 13, 2016 at 5:53 pm #613029I added the code at the very bottom in functions.php. After that, header images are no longer visible, just white empty space. I have tried to re-upload images and can see the small thumbnail in product-category settings. But they no longer appear as product-category/header images.
EDIT: Images not appearing happened after I updated Enfold to 3.5. I tried the code above with 3.4.1 of Enfold, and the images were visible but they were still in parallax, the code did nothing. Now, in 3.5 it just removes the header images.
April 17, 2016 at 4:50 am #615661Hey!
The background image is there but there’s an unwanted class attribute in the banner container:
<div id="av_product_description" style="background-image: url(https://vican.wpengine.com/wp-content/uploads/2016/03/Vican_kategori_bord-1500x266.jpg);main_color (hosted on WPengine) background-attachment: scroll;background-position: center center;background-repeat: no-repeat;" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section (Purchase code hidden if logged out) avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch"><div class=" (Purchase code hidden if logged out) "><div class="container"><main class="template-page content av-content-full alpha units"><h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </h1></main></div></div></div>
This is the class attribute:
(Purchase code hidden if logged out)
Add this in the Quick CSS field:
#av_product_description { visibility: visible !important; }
Regards,
IsmaelApril 19, 2016 at 4:59 pm #617557Added the code to Quick CSS and now the background images are visible again.
But the main problem still remains. The background image zooms in and out depending on what screen resolution you have. Not the usual way with a background image that are fully visible and scales, not zoom.
I want the background image to be always be fully visible no matter what screen resolution. At the current state and in some resolutions (higher resolutions) I cant see what the picture is supposed to be, because its zoomed in and only shows a small part of the full background image.
- This reply was modified 8 years, 6 months ago by belinger.
April 22, 2016 at 6:11 am #619528Hi!
Note that the background size property is set to “cover” which means that it will cover the whole container but it may cut off parts of the images to keep its aspect ratio. We can set the background size to 100% or contain but it will distort the image or leave white space in the parent container. Which one do you prefer?
NOTE: We removed the parallax effect which is one of your requests.
Regards,
IsmaelSeptember 20, 2017 at 8:59 pm #854556what is the dimension of the shop image banner?
Im getting a blurry image
September 20, 2017 at 10:32 pm #854577Hi!
@bodymindlinks We have replied to your thread here – https://kriesi.at/support/topic/remove-selection-element-on-service-page/#post-854347. Let us continue there :)Cheers!
Yigit -
AuthorPosts
- The topic ‘Dimension/size of Shop banner?’ is closed to new replies.