Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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

    #601499

    Hey belinger!

    can we please check your web site, so we can see how it looks and how it can be better?

    Cheers!
    Basilis

    #602673

    I 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, 8 months ago by belinger.
    #603471

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    Regards,
    Yigit

    #608392

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

    #609998

    Hey!

    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,
    Ismael

    #613029

    I 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.

    #615661

    Hey!

    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,
    Ismael

    #617557

    Added 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, 7 months ago by belinger.
    #619528

    Hi!

    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,
    Ismael

    #854556

    what is the dimension of the shop image banner?

    Im getting a blurry image

    http://bodytalkminneapolis.com/index.php/services/

    #854577

    Hi!


    @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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Dimension/size of Shop banner?’ is closed to new replies.