Loading...
Loading...
Loading...
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.
Search for "Photo Block" and add the block using the WordPress admin in the Add New plugin section.
Head to the official plugin repository on WordPress.org and download the latest release.
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.
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.
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.
You're presented with a host of toolbar and block sidebar options when editing a photo. Let's go over how to modify the photo block using the available options.
If you have a block-ready theme, you can change the block's alignment behavior by using the block alignment options. On none-block-ready themes, these will have no effect.
You can align the image left, center, or right within the block's container.
Admittedly, not everyone wants a caption for their photo, and the caption appender can get in the way, so there's a toolbar option to hide the caption appender.
Clicking the Crop button will take you to the Crop screen.
Clicking "Replace" will take you back to the initial upload screen, where you can upload a new photo.
You can always click the "Back" button in the toolbar if you make a mistake.
You can use this toolbar option to set the photo's Title and alt text. Any title or alt text entered here will be automatically saved to the photo.
The linking options allow you to set the link to your image. The default is no link.
You can:
Choose No Link
Link to the full-sized version of the photo
Link to the photo's attachment page in WordPress
Link to a custom URL
If you choose "The full size photo", you're able to add the image to a lightbox.
You're also able to add a caption to the lightbox.
For the Advanced panel, you can set the various link attributes.
With the advanced options for linking, you can:
Open up a new window
Set the title of the link
Set the CSS class of the link
Set the link's anchor ID, which will be wrapped around the image
The bulk of the image customization options are within the block sidebar. Let's review what's in the sidebar and how it can help you edit the image.
If you have any saved global styles, they'll show up at the top of the block sidebar.
You're able to select and remove global styles in this section.
See Global Styles for more information.
In the "Photo Settings" panel, you can adjust the accessibility options and image size.
Any title or alt text entered in this section is saved back to the original image.
For image sizes, it'll pick up any sizes that a plugin or theme has registered. Selecting a new size will reload the image.
Within the Image Styles panel, you can:
Add a background color to the image (useful if the image is transparent)
Adjust the opacity of the image
Add a blur to the image
Add a drop shadow
The drop shadow options allow you to add a nice 3D effect to your images.
Photo Block uses CSS Gram for its image styles. There are 26 styles available, and a live preview of what the image will look like is displayed when hovering over the item.
You can adjust per breakpoint:
Padding
Margin
Border
Border Radius
If overlaying a caption, the overlay will go over the image and will ignore the sizing options.
You can enter the values all at once if "synced" is selected or "unsync" and enter the values individually.
A demo of this is below:
For the border, the controls are a bit more compact. Here's a demo below of the border options.
You can create a custom image size and adjust the image's object fit for image sizing.
With the sizing options, you can:
Set the width per breakpoint
Set the height per breakpoint
Set the min-width per breakpoint
Set the min-height per breakpoint
Set the max-width per breakpoint
Set the max-height per breakpoint
Set the object positioning
Set the object fit
For example, I can create a 400x400 image and then set the object position to cover to ensure a good fit.
Here's a demo of that below:
At the bottom of the block sidebar above Advanced, you can adjust the global style options.
You can:
Save or override global styles
Edit and rename existing global styles
Refresh the global stylesheet
Clear any block stylies for the block and set back to defaults
For more on Global Styles, please visit the link below:
For Advanced, there are several useful options to customize the image further.
For example, you can add a custom CSS class to the figure tag and a separate CSS class for the img tag.
In addition, you can add custom attributes to the img tag if needed.
Additional advanced options allow you to:
Skip lazy loading - This sets an attribute that tells browsers and caching plugins to not lazy-load the image.
Enable Image Protection - This prevents users from using the Right+Click button to save their images locally.
Hide on Mobile|Tablet|Desktop - Hide the image for various breakpoints.
The Photo Block has numerous ways to edit the photo, so your imagination is the limit.
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%.
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 block.
When you "apply" a global style to a block, it saves the style and also selects the style for the block. Uncheck the "apply" option to keep editing the photo without a global style being attached.
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 when clearing block styles. Be extra careful with this option. Undo works in most cases after clearing the styles.
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.
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.
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.
This how-to will show you how to show an image in a lightbox
Making the image popup in a lightbox is fairly straightforward. This "how to" will demonstrate how to add a lightbox effect.
Photo Block uses to pop up its images.
Make sure you have the Photo Block selected.
We'll be opening up the link section in the block toolbar.
When you click on the link option, you'll see several options for linking.
For the linking options, select "The full size photo."
You'll see a lightbox option underneath.
Open the lightbox panel and enable the lightbox using the toggle option.
Go ahead and save the post and view it on the frontend. The image will pop up in a lightbox when clicked.
You knowe now how to pop up images in a lightbox.
Use Photo Block in a query loop for dynamic images
The Photo Block works well in the default query loop and acts as a featured image.
Let's begin by showing you how to insert a query loop and changing the image to the Photo Block.
The Photo Block is compatible with the query loops of the following blocks:
core/query
generateblocks/query-loop
kadence/query
Insert the Query Loop into a post using a "/" (Slash) command: /query loop
Choose "Start Blank" and insert the option with an image.
Select the image in the block editor. If the image is selected correctly, you'll see the block type as a featured image.
Using the Toolbar, click the Transform option to convert the image to the Photo Block.
From there, you can select "Photo Block," and the featured image will be changed over.
If there is no image in the query loop, you can add one manually. You'd insert a new block and add a Photo Block. The block is smart enough to recognize it's in a query loop and will render immediately.
You now know how to add Photo Block to a query loop.
Overlay captions provide a nice cover effect while respecting the boundaries of the photo.
Adding a caption overlay can produce some nice effects when viewing or hovering over the photo.
Overlays work by overlaying the visible image while fitting inside the image and respecting padding, drop shadows, etc.
To enable an overlay, select the caption block.
Make sure you have selected the Caption child block within the Photo Block. You can either click on the caption to reveal the toolbar or use the tree view to select the caption block.
We'll use the "Position" item in the toolbar to select the Overlay option.
Once you select Overlay, an adjustable overlay will appear over the image.
With overlays enabled, you can position the overlay and caption positions within the overlay.
For example, if you'd like the caption to be at the bottom of the overlay, you can select "Bottom" from the "Overlay Vertical Position." An example is below.
By default, the overlay is visible without hovering over the image. However, you can choose to show it only on hover.
When you display on hover, you're able to select from several animate-in options:
Fade
Slide Left
Slide Right
Slide from Bottom
Slide from Top
A demonstration is below:
You're able to select from 4 overlay types:
None - No overlay
Solid - Choose the overlay color and opacity
Gradient - Choose or generate a gradient
Image - Choose an image to overlay the main image
The Solid overlay type allows you to modify the normal and hover overlay color.
For the solid overlay, you can adjust:
The overlay color (initial state)
The overlay color when hovered
The overlay border per major breakpoint
The overlay border radius per major breakpoint
You can choose a gradient to overlay the image.
With the overlay gradient, you can:
Adjust the gradient
Generate a random gradient
Adjust the gradient's opacity on the initial state
Adjust the gradient's opacity on the hover state
Here's a quick demo of generating a random gradient:
You can overlay an image and have it displayed initially or on hover. If done correctly, this can result in some neat effects.
With the image overlay, you can:
Upload a new overlay image
Change the background settings
Adjust the background opacity on hover
Adjust the background opacity on the initial view
For example, you can achieve a nice blur effect by layering a modified blurred image over the original photo. Here's a quick demo:
Overlays take up the full width and height of the image. However, the caption within the overlay can have its own width and height properties.
This allows you to position the caption within the overlay predictably.
For example, if we want to add an image label to the bottom right of an image, we can do that with an overlay caption. Let's work through an example.
In this example, we're adding the label "Image 1 of 4" to the bottom right of the photo as an overlay.
To do so, let's follow these steps:
Add the caption label "Image 1 of 4" to the caption.
Selecting "None" will hide the overlay. The caption should still be visible.
Find the Background Color in the caption sidebar options and change it to black.
Find the sizing options in the block sidebar for the caption. Change the width to 150px.
Change the Overlay's vertical position to the Bottom and the horizontal position to the Right.
The padding options are in the caption sidebar. You can adjust the caption to have more top and bottom padding.
Overlay captions are powerful and customizable. We showed you how to create overlay captions and the various customization options. We also worked through an example of caption sizing within the overlay.
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.
