[andisitesParticipant]

Hi!

We are having a problem setting featured images for our product pages: http://109.199.101.20/~ocunew/product/ocutech-ves-sport/.

Image size is stretched on front end and backend. Thanks!

[DarshanaModerator]

Hi there,

Thanks for writing in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[andisitesParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back. It seems you have added some function to regenerate thumbnails or using any plugin for that. Check your Child Theme functions first to check for this and then check for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know what you find.

Cheers!

[andisitesParticipant]

Hi,

We’ve disabled all the plugins, checked the child theme (we’ve only made changes to styling), and even activated the default WP theme, and it’s still happening. Is this an issue with WooCommerce, and if so, what’s the best way to get support on that since it’s packaged into the X theme?

Thanks so much!

[RupokMember]

Hi there,

Thanks for updating. According to our Changelog supported version of WooCommerce is v2.4.10. Please downgrade your WooCommerce to v2.4.10 to avoid any conflict or unusual behavior. You can find the older versions here – https://wordpress.org/plugins/woocommerce/developers/

Also make sure to update Cornerstone to latest that we released yesterday.

Cheers!

[andisitesParticipant]

Hi,

We have done all of this, and the issue persists. We’ve also discovered that it’s happening to featured images in posts as well, so it’s not just in WooCommerce. When we inspect the element, even though the image is the proper natural size in the Media Library, it is being presented in the page with a natural size of however wide x 9999px high.

Is there anything else you suggest we check?

Thanks so much!

[Nabeel AModerator]

Hi again,

To fix things, just add the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	var orig_image = $(".single-product .woocommerce-main-image").attr('href');
	$('.single-product .wp-post-image').attr({"src": orig_image, "width": "auto", "height": "auto"});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[andisitesParticipant]

Almost! That helps the image appear properly on the page, but on initial load it is still showing up at 9999px high (it replaces itself with the properly sized image once the page has completely loaded), and it still shows up at 9999px high in the back-end under product image.

Also, this same thing is happening for featured images in Posts as well (they are also appearing as 9999px high).

It also looks like we’ve found another issue: The header image (logo) isn’t sizing responsively in Firefox.

[andisitesParticipant]

Never mind, we did a fresh installation, and for some reason featured images are working now. Still have the issue re: the header image not sizing responsively in Firefox, though. Should I open a separate ticket for that?

[andisitesParticipant]

We’re still struggling with the featured images for posts and products. They are still resizing to 9999px high in the back-end and the front-end (your fix did help the front-end, but only once the page is fully loaded).

Here’s a question from our expert developer — he believes an issue with X is the culprit:

“To X theme guys,

In the following file : x/framework/functions/global/admin/setup.php
you have , set_post_thumbnail_size( 100, 9999 );
This line sets up thumbnail size to 100 x 9999 size. Why? This is forcing the thumbnail images to become 100×9999 size in post editor.”

[Rue NelModerator]

Hello There,

Thanks for the updates.

This line: set_post_thumbnail_size( 100, 9999 ); sets the post thumbnail to have a 100 by xxx in dimension for the thumbnails. You can override this setting in Settings > Media. For the feature images, we use our own image size which is being calculated based on the site width and layout you have selected in the customizer.

On the other hand, we have a predefine image sizes for the product images in X theme. The default sizes are:

$catalog = array(
    'width'  => '258',
    'height' => '275',
    'crop'   => 1
  );

  $single = array(
    'width'  => '450',
    'height' => '470',
    'crop'   => 1
  );

  $thumbnail = array(
    'width'  => '100',
    'height' => '100',
    'crop'   => 1
  );

These setting were stripped in the Woocommerce settings page. To change the image size, we need to add it back again those settings inside the Woocommerce Product Display settings page. We need to add a custom code inside your child theme’s functions.php.

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
  if ( ! is_admin() ) {
    return;
  }
  remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}
add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

Once added, you will have the Product Display Image option settings back. You can check it out in Woocommerce > Settings > Products > Display tab; http://prntscr.com/6eysla
After changing the image size for your products do not forget to regenerate your thumbnails (https://wordpress.org/plugins/regenerate-thumbnails/)

Please let us know if this has work for you.

X

[andisitesParticipant]

Brilliant! This did the trick. You mentioned that the settings had been stripped from the WooCommerce settings, but how did that happen? Should we anticipate this happening again with other sites, making it necessary for us to install this code in the child functions.php each time?

Also see other question about header logo image not resizing responsively in Firefox. Should I open a separate ticket for that?

Thanks so much!

[ThaiModerator]

Hello There,

Also see other question about header logo image not resizing responsively in Firefox. Should I open a separate ticket for that?

Your logo looks fine on my end:

Could you please send us a screenshot?

Thanks.

[andisitesParticipant]

No worries, I found the answer in another forum post. 🙂 So what about this question: “You mentioned that the settings had been stripped from the WooCommerce settings, but how did that happen? Should we anticipate this happening again with other sites, making it necessary for us to install this code in the child functions.php each time?”

[Author]

Posts