Photo

Use Photo to upload an image or display one from the Media Library with cropping, alignment, captions, and link options.

Usage

Use Photo to display a single image from the WordPress Media Library or from an external URL. The module outputs a responsive image with optional crop presets, alignment controls, container fill behavior, and an optional caption shown on hover or below the image. It can also wrap the image in a link to a custom URL, a lightbox, the photo file, or a generated photo page.

Use Photo for hero images, content figures, profile or team headshots, product shots, gallery thumbnails, and any layout that needs a single configurable image with consistent styling. It fits straightforward image placements where you want crop and alignment controls without building a custom HTML block.

Module Settings

The Photo module settings control the image source, link behavior, caption display, and image styling.

General Tab

The General tab sets the photo source, hover title, caption display, and link behavior.

Photo Source Default: Media Library

Selects whether the image comes from the WordPress Media Library or an external URL.

• Media Library: Picks an image from the WordPress Media Library.
• URL: Loads an image from an external URL.

Media Library Settings

Photo Supports: Field Connections

The image selected from the WordPress Media Library. This field appears when Photo Source is set to Media Library.

URL Settings

Photo URL Supports: Field Connections

The external URL of the image to display. This field appears when Photo Source is set to URL.

Image title attribute Supports: Field Connections

The text used for the image title attribute. When left blank, the module uses the image filename. This field appears when Photo Source is set to URL.

Show title attribute on mouse hover Default: No

Controls whether the image title attribute is rendered so browsers display it as a tooltip on hover.

• No: Omits the title attribute on the image.
• Yes: Renders the title attribute so it appears as a hover tooltip.

Caption

The Caption section controls whether a caption is displayed and what text it uses.

Caption Settings

Show Caption Default: Never

Selects when the caption appears.

• Never: Hides the caption.
• On Hover: Reveals the caption when the visitor hovers over the image.
• Below Photo: Renders the caption beneath the image.

Caption

Caption Supports: Field Connections

The caption text shown with the image. When left blank, the module falls back to the caption stored on the Media Library attachment. This field appears when Show Caption is set to On Hover or Below Photo.

Link

The Link section controls whether the image is wrapped in a link and where that link points.

Link Settings

Link Type Default: None

Selects how the image is linked when clicked.

• None: Renders the image without a link.
• URL: Wraps the image in a custom link.
• Lightbox: Opens the image in a lightbox.
• Photo File: Links directly to the original image file.
• Photo Page: Links to the WordPress attachment page for the image.

Link URL

Link URL Supports: Field Connections

The destination used when Link Type is set to URL.

Link settings

Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.

Lightbox Photo Size

Lightbox Photo Size Default: Large

Selects which registered image size is loaded in the lightbox when Link Type is set to Lightbox.

Style Tab

The Style tab controls cropping, sizing, alignment, border, caption typography, and container fill behavior.

Crop

Applies a preset aspect ratio to the image. The module generates and caches a cropped copy of the source image.

• None: Uses the original image without cropping.
• Landscape: Crops to a wide landscape ratio.
• Panorama: Crops to an ultra-wide panoramic ratio.
• Portrait: Crops to a tall portrait ratio.
• Square: Crops to a 1:1 square.
• Circle: Crops to a 1:1 square and renders the image as a circle.

Width Supports: Responsive

Sets the rendered width of the image using px, vw, or %.

Align Default: Center; Supports: Responsive

Sets the horizontal alignment of the image within its wrapper.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Caption Typography Supports: Responsive

The font settings for the caption text.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Fill Container

Controls how the image fits and positions itself when the wrapper has a fixed width and height. Uses CSS object-fit and object-position so the image can fill the container without distortion.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.

Add hover effects

Using a custom class and some custom CSS, you can add some really cool hover effects to images.

1. Add a Photo module to your page.

2. Configure the Photo module as you normally would.

3. Click the Advanced Tab

4. In the HTML element section, add one of the following values to the Class field, depending on which effect you want. See the description of each effect in the sections below.

   • Hover Zoom In: hover-zoom-in
   • Hover Zoom Out: hover-zoom-out
   • Hover Zoom Out and Rotate: hover-zoom-out-rotate
   • Hover Unblur: hover-unblur
   • Grayscale to Color: gray-scale-img
   • Sepia to Color: sepia-img

5. Add the CSS for the effect wherever you put your custom CSS. Copy the CSS for the effect you want from one of the following sections and see this article about where to add custom CSS code.

tip

If you have multiple Photo modules in a row and want to apply an effect to the entire set, add the effect’s CSS to the Class field on the Advanced tab in the row settings rather than the Photo module settings. The effect will apply to every Photo module contained in the row.

CSS for hover effects

info

The transition speeds in these CSS examples are set to .3s. You can change the value to speed up or slow down the effect. For example, 1s will slow the change.

Hover Zoom In

This effect adds a smooth zoom effect when you hover over the image.

/* Zoom in on hover */
.hover-zoom-in .fl-photo-content {
  overflow: hidden;
}
.hover-zoom-in .fl-photo-content .fl-photo-img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  will-change: transform;
}
.hover-zoom-in .fl-photo-content .fl-photo-img:hover {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

Hover Zoom Out

This effect adds a smooth zoom out effect when you hover over the image.

/*  Zoom out on hover*/
.hover-zoom-out .fl-photo-content {
  overflow: hidden;
}
.hover-zoom-out .fl-photo-content .fl-photo-img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  will-change: transform;
}
.hover-zoom-out .fl-photo-content .fl-photo-img:hover {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform: scale(1);
  transform: scale(1);
}

Hover Zoom Out and Rotate

This effect shows the image zoomed in and rotated 45 degrees in its default state and adds a smooth zoom out and rotates to upright when you hover over the image.

/* Zoom out & rotate on hover */
.hover-zoom-out-rotate .fl-photo-content {
  overflow: hidden;
}
.hover-zoom-out-rotate .fl-photo-content .fl-photo-img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  will-change: transform;
}
.hover-zoom-out-rotate .fl-photo-content .fl-photo-img:hover {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

Hover Unblur

This effect displays the image in a blurred state and unblurs it on hover.

/* Unblur on hover */
.hover-unblur .fl-photo-content {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.hover-unblur .fl-photo-content .fl-photo-img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  will-change: filter;
}
.hover-unblur .fl-photo-content .fl-photo-img:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}

Grayscale to Color

This effect displays the image in grayscale and brings the color back on hover.

/* Grayscale To Color */
.gray-scale-img .fl-photo-content {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.gray-scale-img .fl-photo-content .fl-photo-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  will-change: filter;
}
.gray-scale-img .fl-photo-content .fl-photo-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

Sepia to Color

This effect displays the image in sepia tones and brings the color back on hover.

/* Sepia To Color */
.sepia-img .fl-photo-content {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.sepia-img .fl-photo-content .fl-photo-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  will-change: filter;
}
.sepia-img .fl-photo-content .fl-photo-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}