Hey Mrmad,

Please try refreshing your site and browser cache, as the JavaScript file that changed is likely being cached. If still nothing, please open a ticket at explain the exact steps to recreate the issue so the support team can investigate – and if it proves to be an actual theme issue, it will be escalated and patched up in v4.0.2.

Hope this info helps.

Codetipi

Due to all the breaking, we were forced to rapidly re-design with Tipi Builder and I am frustrated with its inability to replicate the design and functionality we had achieved with Gutenberg. Self-hosted (WordPress), nor .mp4s hosted on Archive.org function as video backgrounds, and I see no way to add buttons, images, or call to actions over video backgrounds. This is a huge inconvenience and we’ll be having to revert to a broken homepage design while wait for potential bug fixes.

Full screen/background video players also downscale in all Chromium browsers (Chrome, Brave, Edge, etc.) and turn into regular video players.

Hey Andrew,

Happy to hear you like the new features

Nothing really changed to break any Gutenberg blocks though. The v4 demos all use Gutenberg blocks without issues too. If you refreshed your caches, disabling all plugins to test if one of them was the real cause, you will indeed need to open a ticket and share all the relevant info (what block you are having trouble with, the url showing it, etc) and the support team can 100% help you figure it all out.

You definitely shouldn’t need to re-design anything either, there are a handful of breaking changes in v4 that are explained in the documentation – check it out and see if any apply so you understand what is going on and how to fix it. If still nothing, please mention this in the ticket too.

Hope this info helps.

Chris

Hey Leemarr,

1- What gallery blocks are you referring to exactly? If it’s the Gutenberg gallery block, you can definitely add multiple. Same with Tipi Builder gallery block

2- Do you mean the Features menu item from this demo: https://demos.codetipi.com/zeen ?

Hope this helps.

Codetipi

i haven’t fooled with my zeen for awhile except for keeping up with updates …. i’m still running with the classic editor … but i’ve asked for some gallery improvements many times … the undo website gallery features is what i was hoping to find ... is v4 it … is undo using the tipi gallery block … what’s the difference between the gutenberg gallery block and the tipi gallery block … BTW i couldn’t find the answer in the help documents and the zeen demo does not either …

Yeah, Undo and all its new features were indeed added in v4

Can you please remind me what gallery improvements you were requested again? I can look into the status of that request.

Codetipi

i wanted a slide counter and i wanted another gallery view other than the horizontal one … both are there now … btw i closed the classic editor and things are clearer to me … but i’m still not certain whether i’m using the gutenberg gallery or the tipi gallery can you steer me on this …

Ah okay so there is a new gallery design on the to-do list that will be done at some point 100%. In Zeen v4 there is a new lightbox included which is the first step of the new gallery design. It will be like the ones you’d see on theguardian or vogue – where you see a counter of images that when clicked open all the gallery images in a nice lightbox.

Re gutenberg vs Tipi Builder. If you are editing posts in Gutenberg, then it’s a Gutenberg block (Such as a gallery one). If you’re editing a page/category/tag/etc with the Tipi Builder and add a gallery block in there, that’s the Tipi Builder block.

Hope this helps.

by Tipi page you mean page …

by Tipi page you do NOT mean page and/or post

is this correct

By Tipi Builder page, I mean a page where you have activated the Tipi Builder by clicking the “Edit with Tipi Builder” button and added blocks via there. And correct, Tipi Builder is only for pages/category/tags/etc, not posts. In Zeen to be super clean, future-proof and compatible with WordPress, the theme embraces Gutenberg fully for posts

so if i wanted to change a post hero height it would only be by customizing …

in this case there are only limited options available …

what if an option fails (100% to 50%) is that a bug …

Hey Leemarr,

The theme comes with the most used height options (50%/66%/100%/uncropped), what size do you want?

Codetipi

don’t know really know what size … just like to be free to vary the size beyond this limit as in tipi

Sounds like uncropped is the option you’re after, it means the image will be whatever the native height of the image is.

how about adding a 33% height option

Hey again,

I believe the width was changed to be able to allow for the new Zeen v4 WooCommerce product designs and layouts, as some are full-screen width. However, any non full-screen ones should show the background (I think). If you open a ticket and share the exact url then it can be investigated properly. Same for the minus, very odd you can’t see it – can you see the minus on the demo sites (they are running v4).

Hope this info helps!

Codetipi

Thanks.

I’ve found only the ‘Default Product Hero Area’ selection that allows the background is the one with the sidebar.

When selecting this though, the only sidebar that shows is the default sidebar. It doesn’t seem to allow me to display any other – I’ve tried a few/deleted cache etc. I change “Product Pages Sidebar” to different sidebars but for the life of me, I cant work out why it only shows the default sidebar no matter what sidebar I select.

I resolved the minus issue, I had some additional css for a woocommerce addon ‘name your price’ that didn’t play nice. I just removed the below.

/* cart display fix */ .single-product .summary .cart{ display:block; }

Thanks

Hey again,

You’re welcome, happy the minus is all good.

Re: Sidebar, are you saying you select another sidebar to use on a product page, but the sidebar loading on the frontend of that product continues to be the default one? I just tested this locally and it worked fine for me – selecting another sidebar to use loaded that one on the product page.

Do the sidebars you’re selecting definitely have widgets set? If the sidebar area has no widgets it could be reverting to the default one.

Codetipi

Cheers. I’ll renew support and log a ticket with video. Thanks

Hey Alex,

That was fixed in v4.0.1 which has been submitted already. Should go live very soon

Codetipi

Thanks, but I keep getting an error and it makes my site inaccessible.

An error of type E_PARSE was caused in line 905 of the file /home/**/wp-content/themes/zeen/inc/core/woocommerce.php. Error message: syntax error, unexpected ‘)’

Are you certain you are on 4.0.1? Because that was 100% fixed. If you still see it in 4.0.1, please open a ticket at http://codetipi.ticksy.com and include your site url and any other relevant info so it can be investigated.

Yes, version 4.0.1 :/ The error is a new line : 905 (the previous error was on line 824).

I solved it by changing the Ajax settings in WooCommerce.

Excellent update, thanks

Hey Wakelover,

In case you haven’t seen Codings helpful response to you, I’ll copy/paste it here:

@wakelover – don’t know if you will see this, but the post progress bar color is determined by the main accent color found in Customize > Global Options (last one in the first section) > General Colors > Base Accent Color. If you want to change it to a different color from the Base Accent Color, use the following CSS in your child theme style.css or paste it in Customize > Customizations > Additional CSS…

#progress {
    background-color: #f7d40e;
}

Hope this helps and thanks Codings.

Codetipi

Seems to be a one time occurrence and probably WP Rocket caching issue. Doesn’t change that WP and WC thumbnail/image system is really bad

Hey Codings,

Happy to hear it’s all good And I agree about the thumbnail system. It’s been a big pain for WordPress developers for a long time.

Codetipi

I am on the verge of getting rid of WC and moving to Shopify because of how images are being handled. WP and WC stop messing with my images!

-Using the vertical scrolling gallery. CSS modifications have been added to make that column even wider for larger pictures.

-The original image sizes are up to 2500px.

-All gallery images are being resized with “-770×513.jpg” on the end.

-Unchecked all thumbnail sizes in Zeen but WC is still creating AND USING unwanted sizes. According to the regeneration plugin these are being generated:

• woocommerce_thumbnail 390×312
• woocommerce_single 770×513
• woocommerce_gallery_thumbnail 200×200
• shop_catalog 390×312
• shop_single 770×513
• shop_thumbnail 200×200

-I have tried every function I could find, even a plugin (Disable Responsive Images Complete). Regenerated all thumbnails, etc… WC still insists on resizing images and creating a blurry front end gallery.

-Even when I finally get it to use the correct image, the code being generated is the following (width=”770px” is what is messing everything up):

<img src="imageurl-770x513.jpg" class="" data-src="imageurl.jpg" data-large_image="imageurl.jpg" data-large_image_width="2200" data-large_image_height="1467" width="770" height="513" />

Is it Woocommerce or Zeen causing the height/width attributes? Do you know how to make it stop?

Hey Codings,

Yeah I totally get your frustration! I don’t think you can disable/stop WooCommerce from creating thumbnails.

However, if they’re blurry, that is something that can be fixed. By default WordPress creates thumbnails at like 80% quality to optimize for file size. If you’re more interested in quality, you can tweak that value with a plugin like this: https://wordpress.org/plugins/image-quality/

There are also different image engines that have different quality results. Ask your hosting if they use Imagick (better than GD engine): https://support.pagely.com/hc/en-us/articles/115000052451-Imagick-vs-GD-in-WordPress

Hope this helps.

Codetipi

Thanks for the reply. It has nothing to do with anything on the server or image engine, it’s also not about image quality or compression, all of the images are already optimized, huge, and clear… What is causing is it the width height attributes being added to the img src code. If Zeen adding that anywhere? There is usually a place to set the WC image sizes, but sometimes when a them includes WC customization stuff in the theme customizer, it’s gone. I think it is either WC causing those attributes stock or Zeen is doing is somewhere… because other WC sites don’t have it and your shop demo also has those attributes in the img code.

Sorry typing too fast, lots of typos and too late to edit

It’s okay

Re the width/height. The theme uses WordPress core functions to output all images, which is the correct way of doing it. As this allows plugins to intercept/change/etc everything. WordPress core by default outputs all the relevant and valid attributes, including height and width. The values themselves are simply the sizes of the actual image, so whatever is appearing there is the real value. The reason you need those attributes is because without them it affects Core Web Vitals (and HTML image best practise). So unless you use a plugin to filter and remove them, it isn’t really possible to do that.

If you see other sites without them, it means they’re manually hard coding the images out – which is VERY bad (and outdated) practise as other plugins can filter them, etc.

Thank you for the insight. But the forced 770px width (defined as image name “shop_single”) is not simply the sizes of the actual image. The image is 2200px, but WooCommerce is forcing it to be 770px, and the width of the gallery is set to 65% (wider than Zeen’s stock width: 58.33333333333333%;). This is making images blurry when wanting to display larger images in the vertical scrolling WooCommerce gallery. it’s 2021, there is no way WC can tell sites they can only use a 770px width in product galleries, but how to change the default values to something less blurry (such as 900px) when the theme does have the stock WooCommerce customize settings available?

Ah yeah shop_single thumbnail is a WooCommerce one. But unless the space where the image appears is 2200px, there is no point in loading that size there. Share the url of the product you’re talking about to understand the situation a bit better.

Can you please let me know where the Zeen thumbnail sizes are defined/controlled? I am so frustrated with how this theme is handling the display of thumbs – specifically with WooCommerce.

I have turned all Zeen Thumbnails off, regenerated thumbs with Real Thumbnail Generator, then turned each thumbnail on one by one to see how they interact with the settings I am using in the theme.

For example, Classic Blocks with 4 columns… Starting with 2500px wide landscape images, setting image shape to square in the block settings, the theme shows blurry “293×293px” images. Turn off “293×293px” in Customizer and regenerate thumbs… one would think the theme would show the next largest square size (390×390px, 585×585px, 900×900px) but it doesn’t! If 293×293px is turned off, it just shows the full size landscape image, so square is off.

So then I give up on trying to turn landscape images into square via the block settings, instead try to set all image shapes to landscape. But I have some square images at 2500×2500px, and then the theme wants to turn those into blurry thumbs using “zeen-370-247” landscape pics.

So what I think I need to do is find where you have all of the Zeen thumbs defined and change 293×293px size to generate a thumb at 600×600px or something larger. inc\core\thumbnails.php is no help. Where else can I make these changes?

Yeah I totally get your frustration! I don’t think you can disable/stop WooCommerce from creating thumbnails.

The WC single gallery thumbs issue from above has been solved. There are functions that can be used to prevent WC thumbnails from being generated, but this plugin Disable Generate Thumbnails works flawlessly for seeing all thumbs being created and the ability to turn them off. Now it’s just Zeen thumbnails messing the archives pages up

If you disable all Zeen’s thumbnails, then your images will always be messed up as you will be outputting the original image file. So if you upload squares, rectangles or tall images, they will output exactly like that. On normal blocks this means they will be random heights and push content up or down.

This is one reason for thumbnails. On top of that, you’ll be loading the original image everywhere, even in tiny thumbnail spaces, which is very bad for performance, this is the main reason various thumbnail sizes are great – the smallest possible size is loaded in the relevant place.

I understand thumbnails, how they work and the purpose of why WP generates so many (although debatable as to the necessity with modern internet connections and hosting plans). I disabled all Zeen’s thumbnails only to turn them all on one by one to test how and where they are working. But the issue here is that the theme is generating images that are too small for where they are being used (full width Classic blocks with 3 or 4 columns for example).

The test disable all thumbnails was also to see if the theme would pick up the next largest relevant shape when a smaller size was disabled. So, using squares with 293×293px should mean it will pull from the next enabled size up 390×390px, but it’s not working that way.

Which file are these thumbnail sizes defined in for things like Classic Blocks? Can’t have blurry images after putting so much into beautiful photography

Ah I see, but the theme isn’t the one that decides what thumbnail to use, that’s a combination of WordPress core and the browser. The theme simply says “I need this image size” and WordPress then goes to find the closest/best images to use.

When you ask for a 293×293 image, WordPress automatically passes all the related (smaller and bigger) sizes, such as 390×390 into an HTML attribute called srcset. This attribute is then used by browsers to determine which image to load. The browser uses the screen type (retina vs non retina), the screen sizes (mobile/desktop/etc) and then loads the image it believes is best. The theme has very little say apart from the initial “I want this image” and the declaration to create the relevant thumbnail sizes. You can install plugins to create new sizes or disable existing ones.

Hope this helps.

Here is the srcset for a square thumbnail in a Classic Block with 4 columns on a screen with a resolution of 1920×1080. Original image size around 2500×1650.

<img src="site/wp-content/uploads/2022/03/image-344x344.jpg" class="attachment-zeen-293-293 size-zeen-293-293 zeen-lazy-load-base wp-post-image zeen-lazy-loaded" loading="lazy" srcset="site/wp-content/uploads/2022/03/image-344x344.jpg 344w, site/wp-content/uploads/2022/03/image-441x441.jpg 441w, site/wp-content/uploads/2022/03/image-636x636.jpg 636w, site/wp-content/uploads/2022/03/image-951x951.jpg 951w" sizes="(max-width: 344px) 100vw, 344px" width="344" height="344" />

Using Inspect (Firefox) to change “sizes” definitions from “344” to “600” fixes the blurry images.

<img src="site/wp-content/uploads/2022/03/image-344x344.jpg" class="attachment-zeen-293-293 size-zeen-293-293 zeen-lazy-load-base wp-post-image zeen-lazy-loaded" loading="lazy" srcset="site/wp-content/uploads/2022/03/image-344x344.jpg 344w, site/wp-content/uploads/2022/03/image-441x441.jpg 441w, site/wp-content/uploads/2022/03/image-636x636.jpg 636w, site/wp-content/uploads/2022/03/image-951x951.jpg 951w" sizes="(max-width: 600px) 600vw, 600px" width="600" height="600" />

True that WP is overly controlling with image/thumb management and srcset, but the point of a theme is to be able to get around those controls and create the look that you want. Where are the sizes defined in Classic Blocks code so I can make adjustments?

I’m afraid I can’t keep replying here, for any other theme support please open a ticket at http://codetipi.ticksy.com