[Resolved] Formatting Views with Blocks

[Author]

Posts

[GinaM9227]

Tell us what you are trying to do? I am editing a View and noticed that the size of all the images are equal in length but the height is all different.

- Does Toolset have automatic formatting functions that make each post image the same size so it looks uniform? How can I do that with Blocks?
- How do I reduce the spacing between each field? I was unable to do it with padding.

- How do I add a border around each post/grid square

Is there any documentation that you are following? there isn't much documentation about formatting

Is there a similar example that we can see? hidden link

What is the link to your site? hidden link

[Beda]

You should be able to set Image Sizes when inserting the Image Field (I assume it's a dynamic source) in the Image Field's Inspector settings.
There you can choose the size, crop behaviour and more, which allows making all images "the same size".

You'd, for example, need to crop images, to custom 100 * 100 size (just an example), and ensure all images are bigger than the defined size, to have all images in a square format 100*100px

Reducing spacing between fields is again depending on single Blocks settings, meaning their padding and margins will determine how much "empty space" there is to the next content.
Those settings also can be controlled in the blocks Inspector - usually in Style settings area (you'll have to activate the Margin / Padding option to alter its values, see screenshot1)

Borders are added similarly, in the Style Settings of each block, if the block supports a border you'll see it to be editable in the Inspector Style Settings for the block.
Around each Grid item, you can add borders by addressing as well in the Inspector Style settings, see screenshot2

Does this help?

[GinaM9227]

> You should be able to set Image Sizes when inserting the Image Field (I assume it's a dynamic source) in the Image Field's Inspector settings.

I looked at the screenshots that you sent me have no settings for image size. In my screenshot 1, you show that the images can be sized unformly across the length in columns or grids but there is nothing to make them the same height. If you look at the screenshot that I just sent, the sample grid view is shown as making the images all the same size (height and width). You do that of for the width but fail to do that on the height part. I believe that is an important component of creating a grid layout.

> There you can choose the size, crop behaviour and more, which allows making all images "the same size".
> You'd, for example, need to crop images, to custom 100 * 100 size (just an example), and ensure all images are bigger than the defined size, to have all images in a square format 100*100px

Are you referring to the Image Settings (see screenshot 2) where I have to create a custom size? This is a tricky one because the height is ok and is already determined by Toolset (and I dont know what is the standard height is actually). So It would be risky for me to completely override the standard if all I need is to have the Height adjusted..

[Beda]

The screenshots I sent have no image sizes because they do not show any Image Block

If you add an Image block you'll see Image sizes, please see my screenshot or on your site find the Image Block in the available Blocks, then use the Inspector to change the rules of the block.

I show the screenshot with custom size but you can choose also registered sizes.
I chose Featured Image but this works the same for Fields as well

In my screenshot1 I do not show anything related to Images.
Please read my previous post here https://toolset.com/forums/topic/formatting-views-with-blocks/#post-1600407
It says:
Reducing spacing between fields is again depending on single Blocks settings, meaning their padding and margins will determine how much "empty space" there is to the next content.
Those settings also can be controlled in the blocks Inspector - usually in Style settings area (you'll have to activate the Margin / Padding option to alter its values, see screenshot1)

I did not relate to images, but to your question on paddings and margins (spacing)

The information about Images is just before that, here it is again:
You should be able to set Image Sizes when inserting the Image Field (I assume it's a dynamic source) in the Image Field's Inspector settings.
There you can choose the size, crop behaviour and more, which allows making all images "the same size".

You'd, for example, need to crop images, to custom 100 * 100 size (just an example), and ensure all images are bigger than the defined size, to have all images in a square format 100*100px
I also show this in my new screenshot attached.

However, if you refer to a GLOBAL setting it's not possible, you'd have to set each image block (so each grid part) to it's sizes
You need to do that only for each block of the image in each grid but each of them needs the particular rules assigned, to display images all in the same size

Or, you could use a Repeating Field, add images there, then use a "repeating field / gallery" block, which lets you control the size of ALL images in one single block since it's a "repeating field / gallery"

Does this help?

[GinaM9227]

I was able to get the images to be the same size - thank you for the instructions.

> Reducing spacing between fields is again depending on single Blocks settings, meaning their padding and margins will determine how much "empty space" there is to the next content.
Those settings also can be controlled in the blocks Inspector - usually in Style settings area (you'll have to activate the Margin / Padding option to alter its values, see screenshot1)

About the spacing between each field (the space above and below) - I activated the Margin/Padding and there is nothing (-) on the default. To reduce the spacing above and below, do I enter negative numbers? See attached.

[Beda]

You have some default that is just there, like for example a Paragraph even without any styles will be somewhat separated by white space from other elements, this is simply how browsers and websites display content. Otherwise, everything would be one concatenated string.

With Blocks, you can control margins and paddings and borders, which allow to somewhat control that empty space.

What are margin and padding and border?
- the border is like a bubble;
- the padding is how much space is inside that bubble;
- the margin is what's outside the bubble.

Padding can't have negative values, whereas margin can.
I show this in the screenshot attached, where any empty space between borders would be removed down to a 1-pixel space

I hope that helps!

[GinaM9227]

Thank you. So you are saying that I can reduce space left and right but I cannot reduce space above and below each field..

[Beda]

You can use the values as I illustrated it on the Screenshot in the GUI and see the effects. Top and bottom (above an below) can be controlled as well.

I just left them empty on my use case, so show the difference of nothing, negative and positive values, and where you can use them (padding or margin)

[GinaM9227]

My issue is resolved now. Thank you!