Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The plugin is currently in the review queue on WordPress.org.
This is a no-settings plugin, so installation is very straightforward.
This plugin is still in the review queue on WordPress.org, and this section will be updated once it's approved.
Head to the GitHub Releases page for Photo Block and find the plugin zip for the latest release.
Each release has a zip file attached called photo-block.zip
.
Once you've downloaded photo-block.zip
, head to Plugins->Add New in the plugins screen in the WordPress admin.
Click on "Upload Plugin."
Choose the downloaded photo-block.zip
file and override any previous plugins that may have existed.
Once the plugin is installed, make sure it is activated.
There are no settings for this plugin, and it should be ready for use in the block editor.
Upload using the built-in uploader, the Media Library, or via URL.
There are several different ways to add a photo, which will be covered below.
When you first add the block, you're given a drop area and several choices for the image source.
Either by clicking "Upload" or clicking the drop area, you can upload an image via your file dialogue.
Use the regular Media Library to upload or select a photo.
You can upload via URL (download the image remotely), or manually enter an image URL to display.
Photo Block makes it easy to add and customize photos in the block editor.
Welcome to Photo Block. Photo Block makes adding and configuring images easy using the WordPress block editor. It supports responsive images, custom captions, a lightbox setting, and so much more.
Photo Block is designed for those needing a quick way to add fully customizable photos and captions to the block editor.
Here are the major features of Photo Block.
An intuitive uploader, with support for all major image formats, is available.
It provides for quick uploading and supports a fast uploader, media library uploading, and downloading an image from a URL.
Photo Block has a custom cropper; you can go advanced and enter custom ratios if you desire.
The cropper remembers your aspect ratio and can be adjusted for finer control.
Add dimensions such as padding, margin, and borders with full responsive support.
Adjust the size of the image container and constrain it to fit how you desire.
CSS Gram is a neat little library that allows for adjustments to an image via CSS. This works in all modern browsers and features 26 presets.
Use the drop shadow toggle to add a drop shadow to your image, allowing for neat 3D effects.
Create a single or multi-line caption, allowing for complex captions through available blocks.
Create an overlay from the caption, including support for multi-line captions. Create a nice hover effect to show off captions, or display a caption in a custom position (e.g., the top left of an image).
The Photo Block works great in a query loop, serving as the featured image source. The caption is pulled from the image caption.
After spending time configuring the Photo Block, you'll realize there are many different ways to customize the photo. You can save these customizations as Global Styles and apply them to other photo blocks.
This allows quick re-use of styles without having to configure a new block every time.
Since Global Styles are applied globally, you can also update a global style and have it reflect across your site immediately.
Cropping is simple, intuitive, and powerful
Photo Block has a built cropping mechanism, which allows you to crop the photo with any aspect ratio you desire.
To crop a photo, click on the "Crop" item in the menu bar. This will load the full-size image and show the available cropping options.
You're able to set the aspect ratio of the crop, as well as rotate the image if needed.
You can set the aspect ratio of the crop area by selecting the Ratio dropdown.
You can choose custom to add to your aspect ratio.
The Aspect Ratio is locked so that you can drag and resize the crop area in a predictable manner.
Clicking the "Unlock Aspect Ratio" button allows you to drag the resize the crop area as you see fit.
When you are done cropping, click on "Apply Crop." You're also able to undo any crop changes if the crop is not to your satisfaction.
There are several ways to add the block:
Via the block inserter
Via the shortcut slash (/) command
By typing in photoblock
and pressing enter.
Click on the (+) icon in the block editor to insert the block. Search for photo
and you should be able to click on the block.
When in an empty paragraph block, you can type /
and have several shortcuts showup.
Search for /photo
and you should see the block.
In an empty paragraph block, type in photoblock
and press enter. The Photo Block will be added for you.
Global styles will save you a lot of time.
Admittedly, the Photo Block's settings can initially be intense and challenging to configure. But once you've found a photo style you really like, you can save it as a global style and reuse it across numerous other photos. For example, you can have a global style for each intro image for a post and another global style for any pictures within the post.
Let's review global styles and learn how to save, set, edit, and remove them.
You can save a photo as a global style once you have a photo configured.
Global styles can only be saved and edited by users with the Editor role or above. Regular users can still apply saved global styles.
Find the Global Styles panel in the block sidebar options. It'll be the last option before the Advanced panel.
When you open the panel for the first time, you'll see a "Save" option and a "Reset" option. The "Reset" option is useful if you need to clear out any block-level styles. For now, we'll concentrate on the "Save" option.
When you click "Save New Global Style," you'll be shown a modal to enter the global style name.
Global style CSS classes are public, so please take care when naming your global styles and prefix the CSS class when necessary.
You can select the Toggle for "Apply this global style" and have it automatically apply the global style to the selected photo.
Uncheck this option if you want to save the global style without affecting the photo.
Once saved, you'll be presented with an Edit and Refresh option in the global style section.
You'll also see a new "Global Styles" panel at the top of the block sidebar options.
Once a global style is applied, most settings will be hidden as they are configured globally.
With global styles applied, you can still:
Add or remove a caption
Set the link target
Set the image size
The available global styles are displayed when you click "Edit Global Styles" in the "Global Styles" panel.
Once in "Edit Mode," you'll see the available global styles you can edit or delete.
Clicking the edit icon, you'll be presented with a modal that allows you to edit the name and CSS class of the global style.
To save over or overwrite a global style, you'll first need to remove the global style from the photo. You can see any available global styles under "Available Global Styles" in the sidebar options.
Click on the circular remove icon to remove the global style from the photo.
You can now edit the photo and make any changes you like, as the global styles are still present but no longer forced.
Once you have finished updating the photo's settings, you can return to the "Global Styles" panel and save it.
You'll be presented with a modal to override a global style.
Click on "Override Global Style." You'll be presented with a list of available global styles to override.
Click on the global style you want to override, and click "Save Global Style."
You have now overwritten a global style.
You can quickly remove a global style from a photo by clicking the minus button next to its selected global style.
To remove all styles once a global style has been removed, go to the "Global Styles" panel and find the "Clear Block Styles" option.
Clicking on "Clear Block Styles" will remove any existing block styles and reset the photo to the way it was when you first inserted it.
There is no confirmation modal or undo option when clearing block styles. Be extra careful with this option.
If you need to refresh the global styles and regenerate the global styles stylesheet (often for caching purposes), find the "Refresh Global Styles" option in the "Global Styles" panel in the block editor sidebar.
If you delete a global style, you can do so in the "Global Styles" panel. Go into Edit mode, find the style you want to remove, and confirm the deletion.
Once in Edit mode, you'll see the trash icon, which you can click to delete the global style.
You'll be presented with a confirmation modal once you click the Trash icon for deletion.
Deletion is permanent. If you accidentally delete a global style, you can recover it by selecting a photo with the global style previously and saving it with the same name as the deleted global style.
Once the global styles have been configured and saved, you can use them throughout your site.
The roles author and above can select from any previously saved global styles.
The user clicks on the global style to apply it to the photo.
Once a global style is applied, most settings will be hidden as they are configured globally. With global styles applied, you can still:
Add or remove a caption
Set the link target
Set the image size
Global styles are simply a post type, so they can be imported and exported like regular post content.
Head to "Tools->Export" and export the global styles created by Photo Block.
To import, install the WordPress Importer plugin and import the global styles export file.
From there, you may need to refresh the global styles, which you can do from any Photo Block.
In this How To, you'll be shown how to rotate an image in the crop interface.
Head to the "Crop" portion of the block by clicking "Crop" in the toolbar.
Set the Aspect Ratio of the crop to Original.
It is not recommended to do a custom crop and image rotation simultaneously. Please rotate the image, save it, and then redo any cropping.
Click on the left or right rotate icons to rotate the image.
Click "Apply Crop" to apply the changes to the image.
You now know how to rotate and save the image.
With Photo Block, captions are a fully developed feature with many customization options. Let's review what you can do with captions.
If you do not want a caption on your photo but want to hide the "Add Caption" button, you can click the "Hide Caption" icon from the block toolbar.
This will allow a better preview if the image doesn't warrant a caption.
To add a caption to the photo, click "Add Caption" at the bottom of the block. This will create a caption appended to the bottom of the image.
From there, you will see the caption toolbar and block sidebar options.
Let's go over the available options in the caption toolbar.
Alignment Options - Align the caption, left, center, or right.
Caption Positioning - Position the caption at the top, overlay, or bottom.
Caption Mode - Choose between single-line and multi-line captions.
Remove Caption - This will remove the caption from the photo.
Formatting Options - Add basic formatting to the caption.
You can position the caption at the top or bottom of the photo or over the photo, which we dub an overlay caption.
You can position the caption by interacting with the caption toolbar under Position.
Once you click on Position, you're presented with three options.
Top - Position the caption at the top of the photo.
Bottom - Position the caption at the bottom of the photo.
Overlay - Position the caption over the photo.
Positioning a caption at the top will move the caption above the photo.
Please visit the link below for overlay captions and how to create them.
You can switch between single-line captions and multi-line captions by adjusting the caption's mode.
Switching between modes does not transfer existing captions. The two modes provide separate caption inputs, so they can't be carried across.
You can use single-line captions if you have a basic caption and only need a line of text to describe the image.
You'll find formatting options for Single-line captions in the block sidebar.
You can adjust the font, background color, text color, link color, and link color on hover.
Switching to Multi-line captions allows you to add multiple lines to the caption. In fact, you can place any block from the block editor into your caption, which opens up the possibilities of advanced customization.
You'll see an option for multi-line captions in the block sidebar for Smart Styles.
Smart Styles provides formatting and styles for the multi-line innerblocks, so you don't have to worry about styling the innerblocks yourself.
You can set the font families, base font size, and colors for common elements.
If you plan to style the innerblocks yourself, you can disable Smart Styles.
In the block sidebar, you'll see an area to adjust the sizing and dimensions of the caption.
You can adjust per mobile breakpoint:
Padding
Margin
Border
Border Radius
These will be applied directly to the caption.
You're able to adjust the caption container. You can modify per breakpoint:
Width
Height
Min-Width
Min-Height
Max-Width
Max-Height
Click "Remove" in the caption block toolbar to remove a caption.
You'll be asked to confirm via a modal, and when approved, the caption will be removed.
In the Advanced panel in the block sidebar, you can:
Add CSS classes to the caption container
Add any custom data attributes you need for the caption
Hide on desktop, tablet, and mobile
You can also set global styles in the Advanced panel.
Will go over some of the block-level options here.
This how-to will show you how to create a circular image
To create a circular image in photo block, it's recommended to upload the image, crop it, and then adjust the photo settings. Let's do just that to create a circular image.
First, insert the photo block.
Go ahead and upload a photo, ideally of a headshot.
Click on the "Crop" option in the block toolbar.
You'll be taken to the crop screen.
Click on the Aspect Ratios dropdown to select a Square aspect ratio.
Go ahead and resize the crop area and when finished, click on the "Apply Crop" button.
To bring out the full thumbnail, we must set the image size to full. You can adjust these in the sidebar options for the block.
Find the "Padding, Margin, and Border" options in the block sidebar options.
Open up the panel and find Border Radius.
Type in 100%
.
To make the image smaller, let's give a width and height of 250px. You'll find the sizing under the "Container Sizing" panel in the block sidebar options.
We'll be setting a width and height of 250px and a "cover" for object-fit.
You're now able to preview the image on the frontend.
In this "How To" it was demonstrated how to create a circular image. It involves cropping the image, setting an explicit size, and setting the border radius to 100%.