[Resolved] Formatting Views with Classic Editor

[Author]

Posts

[GinaM9227]

Tell us what you are trying to do? I created a Views and wold like to know why is that the photo sizes are all different even though there is code to fix the size - see attached front and back.

I'd also like to know how to control/modify the spacing around the views. It is taking up most of the screensize. How can I use Toolset to adjust the size of the views? I am not able to find the settings for Advanced Styling..

Is there any documentation that you are following?

Is there a similar example that we can see? See screenshots

What is the link to your site? hidden link

[Beda]

There are no advanced stylings in a classic view. You are confusing old, classic Views with the new Blocks, which have advanced styling settings

The old method only bases on ShortCodes and options you can set for those.
In my tests, the custom and registered sizes do work, we have had several issues with those in past, but most are solved.
However, it might be you are seeing this on Products, hence this might happen:
https://toolset.com/errata/custom-size-attribute-on-wpv-woo-product-image-is-not-working-if-used-on-a-single-content-template/

If the issue is different, I think I'll need a duplicate to verify it and see what's happening, you can see here how to create a duplicate of the site:
https://toolset.com/faq/provide-supporters-copy-site/

[GinaM9227]

Per your link about the issue on single content - it is not applicable. The image on the single product template is ok and the same all across.

I am only seeing this issue on the Views created by the Grids layout. It doesn't matter if I use Classic or Block, the issue is the same that the height of the images are not even.

On Classic:
If you see the screenshot I sent previously of the backend, there is a height and a width specified:
[wpv-post-featured-image size="custom" width="500" height="400" crop="true" crop_horizontal="left" crop_vertical="top"]

But the height sizes are not showing up on the front end (screenshot previously attached) so the grid layout has different sizes images when I thought they should be automatically formatted to look uniform.

On Blocks:
I recreated the template in a new Views on Block Editor called 'test-page': hidden link

You can see that also the image heights are not even so it doesn't look uniform.

About the duplicate, I followed the instructions and got this message - I think that my website may be too big. Should I get the Pro?

[Beda]

You could exclude media, cache and compressed files from the Duplicate.
However given the issue is about images, it's not good excluding the media

If in that case, the duplicate fails, please let me try first If I can spot the issue in the backend or can then use our internal PRO Duplicator to grab a copy, if you allow?

What also can help is a simple ZIP of the wp-content folder, and the database dump, so I can rebuild it locally.

[Beda]

No, it is not necessary, but as it seems it is either not working or some steps are missing, so this is the only way for me to figure out what is the problem and help you best.

I see that this install is a very intricated network of different page builders (Gutenberg, Elementor, Blocks, etc)
This can be a source of such conflicts.

And in the block, you actually use HTML again, which is not how it's intended to work.

Hence the "native" or vanilla cases do not apply here, and everything could be expected, from wrong image size to maybe even missing content, as we have many filters running on the content in this case (when using many page/content builders)

The shortcode additionally is a Link, and that should also not be done like this.

You can for example link to an external link using a Image block, but you shouldn't add hyperlinks to ShortCodes.

I tried to insert it in your Content Template that uses Manual HTML in a Classic Block here:
hidden link
I added

[wpv-post-featured-image size="custom" width="100" height="100" crop="true"]

That produced the proper 100*100 pixel images, properly cropped to height and width
This also works with custom padding positions:

[wpv-post-featured-image size="custom" width="100" height="100" crop="true" crop_horizontal="left" crop_vertical="bottom"]

I have tested this directly on your site but reverted the change after confirming.

It could be that your images maybe in some sizes aren't big enough to be cropped to that specific position/size, or eventually, the hyperlink added is the cause, however, it seems to work if re-inserted as a shortcode.
Can you confirm this as well?

Now, this can all be avoided, you can use an Image Block for this, instead of ShortCodes in an HTML editor, just like I elaborated on the other tickets.
Is there any reason to use HTML shortcodes in this case?

[GinaM9227]

Thank you for the explanation. This views was built 2 years ago before the Block Editor was introduced.
When I tried to edit the individual items, it applied Block Editor which is why this part is Block editor.
However, it looks like the correct approach is to recreate this View entirely on Block Editor.

[Beda]

I understand.

You can either create a new View entirely in the Block Editor, or you can proceed with this View and edit only the Loop with the Block editor.
When you click on block editor in an existing view it will take all the content of the previous Content Template (not built with Blocks) and put it in a classic block, such as we see it now on your website.

What I suggest is, if you want to design only this content Template of the loop with blocks, to add each part as a block, and then later remove the automatically added classic block with the old content.

This then allows managing this loop item full with blocks, instead of the old classic HTML/ShortCode mix.

Does this help?

[GinaM9227]

>You can either create a new View entirely in the Block Editor, or you can proceed with this View and edit only the Loop with the Block editor.
>What I suggest is, if you want to design only this content Template of the loop with blocks, to add each part as a block, and then later remove the automatically added classic block with the old content.

To make sure I understood, I should the existing Block Editor and edit the loop as you would a block and then remove the classic content..is that right?

[Beda]

I am not sure to understand your last sentence

You can build entire new Views with only the Blocks interface.
You can also add older views (classic Views) using the Block for it, but in this case, you can't edit them directly in the Block interface

When adding new Views I suggest doing this in a page and using only Blocks
When refurbishing old Views to use Blocks, you either need to recreate them fully as new Views using only blocks, or you edit their Loop Templates, with Blocks

If you do so, a default Classic Block will be added in your Block Editor for those Templates, holding ALL the old Loop content (classic)
You can then rebuild with blocks, and delete that Classic Block if you want from the template.

Does this help?

[GinaM9227]

So I created a new Views entirely on Blocks - hidden link

While this Views looks ok on the preview - see attached.

It looks completely off when I try to use it on the homepage using Elementor - see attached and also here hidden link. In fact, it looks worse than the one created using the Classic editor. What am I doing wrong?

I think the issue may have to do with loops style and grid settings created using Blocks not being picked up.

I'm trying to create a new Views that is correctly formatted and that I can use.

[Beda]

Gina, here you opened an issue for "Formatting Views with Classic Editor"
Here, instead, you opened an issue for "Formatting Views with Blocks": https://toolset.com/forums/topic/formatting-views-with-blocks/

Now your last issue is related to Elementor I understand.
Please open a new ticket, with the particular issue explained, so we can help you best

However, in general, you should not mix page builders, this is what I suggest.
Elementor has very specific and powerful features that can conflict with Toolset if used on/in View Loops, and also if posts use mixed templates (from Toolset and Elementor)
How to use Elementor with Toolset is a whole new topic, and I'd suggest discussing this in other tickets because here we discuss the formatting with Classic Views.

How to use Elementor with Toolset can also be seen here
https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/
Especially this section is important to consider: https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/create-templates-for-custom-post-types-with-elementor-and-toolset/#limitations-when-using-elementor-and-toolset-templates-together

[GinaM9227]

My issue is resolved now. Thank you!