Product Category Pages Full width page banner and description

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.

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 8 years, 4 months ago by DesignerKen. Reason: Added additional links

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.

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)

woocommerce product category image select" />

• This reply was modified 8 years, 4 months ago by DesignerKen.

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?

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.

Information provided below.

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?

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;
	}
}

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.