LogoLogo
HomeWordPress.orgSupport
Photo Block
Photo Block
  • Introduction
    • Introduction and Overview
  • Getting Started
    • Installation
    • Finding the Plugin's Settings
    • Adding the Photo Block
    • Uploading a Photo
    • Cropping a Photo
    • Editing a Photo
    • Adding a Caption
    • Overlay Captions
    • Global Styles
  • How To's
    • How to Create a Circular Image
    • How to Rotate an Image
    • How to Add Photo Block to the Query Loop
    • How to Popup an Image in a Lightbox
    • How to Take Site Screenshots With ScreenshotOne and Photo Block
  • Useful Links
    • Photo Block Home
    • GitHub Repository
    • WordPress.org Repository
    • Support
Powered by GitBook
On this page
  • Intuitive Uploader
  • Smart Cropping and Support for Custom Ratios
  • Dimension and Responsive Support
  • Image Sizing and Object Fit
  • Add CSS Gram Effects
  • Add Drop Shadows to Images
  • Multi-line Captions
  • Overlay Captions
  • Query Loop Support
  • Global Styles

Was this helpful?

Export as PDF
  1. Introduction

Introduction and Overview

Photo Block makes it easy to add and customize photos in the block editor.

NextInstallation

Last updated 6 months ago

Was this helpful?

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.

Intuitive Uploader

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.

Smart Cropping and Support for Custom Ratios

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.

Dimension and Responsive Support

Add dimensions such as padding, margin, and borders with full responsive support.

Image Sizing and Object Fit

Adjust the size of the image container and constrain it to fit how you desire.

Add CSS Gram Effects

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.

Add Drop Shadows to Images

Use the drop shadow toggle to add a drop shadow to your image, allowing for neat 3D effects.

Multi-line Captions

Create a single or multi-line caption, allowing for complex captions through available blocks.

Overlay Captions

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).

Query Loop Support

The Photo Block works great in a query loop, serving as the featured image source. The caption is pulled from the image caption.

Global Styles

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.

Uploading a Photo
Cropping a Photo
Adding a Caption
Overlay Captions
How to Add Photo Block to the Query Loop
Global Styles
An Intuitive Uploader Makes Adding Images Easy
Upload via URL or Choose Manual For a Hosted Image
Crop and Custom Ratio Support Come With Photo Blocki
Adjust Margin, Padding, and Border with Responsive Support
Width and Other Sizing Options
Use CSS Gram Effects for Quick Adjustments
Easily Add Dropshadows to Any Image
Example of a Multi-Line Caption
Caption Overlays Can Have a Neat Hover Effect
Photo Block Works in a Query Ã’oop as a Featured Image
Save a Global Style in the Advanced Sidebar Settings
Selecting a Global Style is Easy and Fast
Page cover image