Gallery Block

Go back to the list of Blocks

Thegallery block allows you to easily add multiple photos and automatically arrange them attractively. You can control the number of columns and the size of the images. The gallery block can be added to a page by clicking on the Add Block button.

Alternatively, you can type /gallery and press enter.

Detailed instructions on adding blocks can be found here.

Block Toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

Three main options on the Gallery ToolBar

• Transform to / Change Block Type
• Change Alignment
• More Options.

You can transform or change the block to another block. or Create a group or change it to a block of columns. If you find that a gallery display of your images is not the right fit, you can change the block types to the Image block with the Transform button. Then every image from your gallery will be added as a single image block in your post.

Change Alignment

• Align left – Make the block align-center
• Align center – Make the block alignment centered
• Align right – Make the block align-right
• Wide width – Increase the width of the block beyond the content size
• Full width – Extend the block to cover the full width of the screen.

“Wide width” and “Full width” alignment need to be enabled by the Theme of your site.

Adding Images

When you add a gallery block, you’re given two options, UploadandMedia Library.

Upload allows you to upload a new image or multiple images to the gallery block and your media library. While Media Library lets you select from previously uploaded images in your Media Library. You can also drag & drop multiple images at the same time from your explorer or finder window into the gallery block.

Removing images

You can remove images from your gallery after adding images by clicking the cancel icon. You can still add the image back later.

Moving Images

You can move images around in you Gallery, so you can set your images the way you want them to be set

Replace Images

You can replace images in your gallery with the edit/pen icon, this will allow you to upload or select another image from your library.

Caption Images

You can caption your images individually on the image. You can also caption the gallery

更多选项

Hide Block Settings

TheHide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

TheEdit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

区块设置

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

列

You can choose how many columns your gallery block will have. You can select between 1 column and 8 columns.

You can only select as many columns as you have images, so if you add 4 images, you’ll be given the option for a maximum of 4 columns. This number will increase as you add more images until you reach the maximum of 8.

Your images will automatically arrange themselves to look good no matter how many columns you select. Try changing the setting and see what you like best!

裁剪图片

You can select whether or not you’d like your images to be cropped in your gallery block. This option is useful if you have images of varying sizes and shapes. Cropping them will make the images in each row of the gallery the same size. Try it each way and see which setting looks better.

链接到

You have 3 options for linking the images in your gallery: Attachment Page, Media File, and None. This determines what happens when your visitors click on the images in your gallery.

Attachment Page

This will lead anyone who clicks on your image to your site’s attachment page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.

Media File

When a visitor clicks on the image, the image file will be displayed in the original size in a new browser window.

None

This makes your images unclickable, so they don’t link to anything at all.

图像大小

The Image Size setting allows you to select from Thumbnail, Medium, Large and Full Size.

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
• Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
• Large: Displays a large-sized version of your image on the page/post. Note: LitePress will determine the width of the content column of your theme, and display the largest possible image for that space.
• Full Size: Displays a full-sized version of your image on the page/post. Note: LitePress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

Note: For these images sizes to apply your Theme needs to support those choices.

高级

HTML anchor allows you to do “page jumping” to that specific gallery. Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a long page.

To enable this, you put an HTML Anchor in your gallery, and create a link that jumps to the anchor.

The advanced tab also lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.