Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #550215

    I am trying to place an image as full width but the image is not going the full width of the site. I have uploaded a few different sizes even as wide as 4000px, but it seems to not be able to render the full width and shows white background on either side of the image. Any thoughts?

    It is even doing it in your demo: http://kriesi.at/themes/enfold-shop/product-category/women/casual/

    • This topic was modified 5 years, 5 months ago by  DesignerKen.
    #550815

    Hey Ken!

    Your current image is 1500px wide, I would try around 2000px depending on how many screens you wish to target. Or add this to your custom CSS.

    .av-parallax-inner { background-size: 100% !important; }
    

    Regards,
    Elliott

    #550817

    Hey Elliott

    Yes 1500px, That is what is being pulled in (the one that is cropped from WordPress), but I had uploaded a 4000px wide in there as well and that did not do it. The Theme did not do this before. At least I dont recall it doing this it always when edge to edge.

    #551854

    Hey!

    Did you try the CSS out?

    Cheers!
    Elliott

    #551899

    Elliot,

    Yes that CSS could work, but I’d like to figure out what is happening, since it is doing the same on your demo site and it should go edge to edge.

    • This reply was modified 5 years, 5 months ago by  DesignerKen. Reason: Added additional links
    #552775

    Hi!

    It’s because the image there is 2048px wide instead of 1500px like your other image. If you zoom the browser out or view on a larger screen you’ll see it does the same. You can use the CSS if you want it to always fit the screen.

    With parallax your supposed to use larger images.

    Regards,
    Elliott

    • This reply was modified 5 years, 5 months ago by  Elliott.
    #552806

    Hi Elliot,

    You are correct the one image is 2048 wide, when I select the image that is 4032px wide it is replaced on the front end with the 1500px wide one. I have not done anything special to create the 2048 one. I even created a 2048 version of the new image and it still renders on the front end as 1500. I guess that 1500 would be one of the image sizes the theme creates?

    As an experiment I uploaded the the new image I want at the same dimensions of the truck 2048px x 1226px and on that page there is still space on either side of the product category page now AND the image that is being pulled in is resized to 1500px. So it makes no sense that the old one is still working but new ones are not.

    The problem as I see it is that there is no option for me to select what size image I want to use (thumb, large, fullsize) in the admin when choosing the woocommerce category image, so i would assume that the image should always be the full size image. On the front end upon selecting the image only the 1500px wide version is rendered not the full size image (the truck is rendering the fullsize version). I don’t recall this being an issue in the past, but I have noticed that all my product category images are not full width like they used to be.

    However I still want to find a solution as to why one page works and not the rest. Why is one pulling in the fullsize image and the others are not? Was 1500px width added to the theme at a certain update? Since the truck photo does not have that thumbnail width it is possible that there is not one created because it was done before that update, therefor not numbnail to pull in and it has to use the fullsize image.

    I am only trying this full screen on a macbook pro retina. So max page width is only set to 1680 on my machine. So any screen larger than 1500px wide will not be rendered at full width.

    #553413

    Hey!

    When you select the image in the media library look to the settings on the right and make sure the “Full size – no scaling” is selected instead of the 1500 x ? option.

    Regards,
    Elliott

    #554221

    Hi Elliot,

    That would be really simple wouldn’t it? :)

    That was my point in the post above…there is not an option to select the fullsize image. (See attached image)

    Screen shot of <a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank'/ rel=woocommerce product category image select" />

    • This reply was modified 5 years, 5 months ago by  DesignerKen.
    #555204

    Hi DesignerKen, here is the solution i was having the same issue add this to the quick css
    .av-parallax-inner {
    background-size: cover;
    }

    You can check it here
    https://kriesi.at/support/topic/shop-banner-images-no-longer-fullwidth-after-update/#post-555202

    #555242

    Smorrone

    Yes that is a similar solution posted by the moderator. But that image is still the 1500px wide image. It will be stretched and can get pixelated. It would be good for small images that are not wide enough. But If I have an image that is bigger then it would be better to use that one.

    There simply is no option to choose full size. So the question remains…Is this a bug? or is this now how Enfold behaves?

    #557106

    Hi!

    image sizes are controlled by WordPress itself. You can gain much more control with a plugin like this: https://de.wordpress.org/plugins/simple-image-sizes/
    Hope this helps.

    Cheers!
    Andy

    #557168

    Hi Andy thanks for chiming in with that plug-in link. But would you mind explaining why that would give me more control? Would it not be easier to just adjust the template section that renders that image to use the full-size image instead of the 1500px wide version that it must be calling for instead of adding a new plug-in to manage?

    I am assuming that this is now the default behavior of the theme? It did not do this before.

    #558912

    Hi!

    Send us a WordPress login and we’ll take a closer look.

    Regards,
    Elliott

    #559017

    Information provided below.

    #559056

    Hey!

    Thank you for the info. If you want the parallax banner to use the original image, modify the config-woocommerce > config.php file then look for the avia_woocommerce_parallax_banner function around line 838. Search for this line of code:

    $bg = wp_get_attachment_image_src($bg, 'extra_large');
    

    .. replace the extra_large thumbnail size with full:

    $bg = wp_get_attachment_image_src($bg, 'full');
    

    Cheers!
    Ismael

    #559059

    Thanks Ismael

    Can I place a copy of the folder and file in my child theme folder to have it overwrite the core theme files?

    or can I somehow just edit the function avia_woocommerce_parallax_banner() to include the change to the $bg variable mentioned above?

    #559499

    Hi!

    refer to this code: https://kriesi.at/support/topic/woocommerce-cayalog-page/#post-177329
    Hopefully it helps you to create your very own custom code.

    Cheers!
    Andy

    #559611

    Very good link, so I have come up with this code, but it seems to not be called.

    I assume maybe I am using the wrong hook? Do you recommend one that can be used?

    // Fix Enfold from using 1500px wide image and use the full-size image instead
    add_action( 'after_setup_theme', 'ssi_woocommerce_full_width_category_images' );
    function ssi_woocommerce_full_width_category_images()
    {
    	remove_action( 'ava_after_main_container', 'avia_woocommerce_parallax_banner', 11);
    	add_action( 'ava_after_main_container', 'avia_woocommerce_parallax_banner_child_theme', 11);
    
    	function avia_woocommerce_parallax_banner_child_theme($bg, $overlay, $opacity, $description, $font)
    	{
    	
    		if(is_numeric($bg)) 
    		{
    			$bg = wp_get_attachment_image_src($bg, 'full');
    			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" 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-parallax  avia-full-stretch" data-avia-parallax-ratio="0.3">';
    		$output .='<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
    		$output .='</div>';
    		$output .='</div>';
    	
    	
    		$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;
    	}
    }
    #560335

    Hi!

    Please replace the code with this:

    // Fix Enfold from using 1500px wide image and use the full-size image instead
    add_action( 'init', 'ssi_woocommerce_full_width_category_images', 50 );
    function ssi_woocommerce_full_width_category_images()
    {
    	remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
    	add_action( 'ava_after_main_container', 'avia_woocommerce_parallax_banner_child_theme', 11);
    
    	function avia_woocommerce_parallax_banner_child_theme($bg, $overlay, $opacity, $description, $font)
    	{
    
    		if(is_numeric($bg))
    		{
    			$bg = wp_get_attachment_image_src($bg, 'full');
    			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" 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-parallax  avia-full-stretch" data-avia-parallax-ratio="0.3">';
    		$output .='<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
    		$output .='</div>';
    		$output .='</div>';
    
    		$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;
    	}
    
    	remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
    	add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_child_theme', 11 );
    
    	function avia_woocommerce_big_cat_banner_child_theme()
    	{
    		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_child_theme($attachment_id, $overlay, $opacity, $description, $font);
    						$avia_config['woo-banner'] = true;
    					}
    				}
    			}
    		}
    	}
    }

    Regards,
    Ismael

    #560347

    Thanks Ismael

    That is just what I needed, so it needed to be called in the ‘init’ at the launch of the site? and you had to target the larger function.

    I believe that code snippet with the CSS will work just fine. I appreciate your and the other Mods support.

    #560991

    Hey!

    Great! Let us know if you need anything else. :)

    Cheers!
    Ismael

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

The topic ‘Product Category Pages Full width page banner and description’ is closed to new replies.