by evuze 5 (2 reviews)

ACF: Focal Point

Name: ACF: Focal Point
Rating: 5.0 (2 reviews)
Author: evuze

Adds a new field type to ACF allowing users to draw focal points on images. Utilises Responsify.js

ACF ranks #9,493 among WordPress.org plugins with 400+ active installations, is #1,051 of 6,305 in the Media category, a 5/5 rating from 2 reviews, and was last updated Feb 6, 2016. Data from WordPress.org, refreshed twice daily — see methodology.

Tested up to WP 4.2 (Current: 7.1)

v1.0.2 Current Version v1.0.2

Updated 10 years ago Last Update on 06 Feb, 2016

Refreshed 14 hours ago Last Refreshed on

#1,051 of 6,305 in Media Top 25% by installs Downloads -26.9% this week No update in over a year

View on WordPress.org

Rank

#9,493

— No change

Active Installs

400+

-17%

KW Avg Position

1 worse

Downloads

14.3K

+4 today

Support Resolved

— No change

Rating

100%

Review 5 out of 5

5 (2 reviews)

Next Milestone 500

Total Progress 75%

400+ 500+

260

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 25 more installs to reach 500+

Rank Changes

Current #9,493

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

5.0

2 reviews

Overall 100%

2 (100%)

0 (0%)

Security History

Source: WPVulnerability

No known vulnerabilities on record for ACF. Checked 1 month ago.

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: 1.0.2
Last Updated: Feb 06, 2016
Requires WP: 4.2+
Tested Up To: 4.2
PHP Version: N/A
Author: evuze

Support & Rating

Rating: ★ ★ ★ ★ ★ 5
Reviews: 2
Support Threads: 0
Resolved: 0%

Keywords

acf advanced custom fields focal-point wp

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

6K+ installs

#2,751

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

30K+ installs

#1,006

Jetpack - WP Security, Backup, Speed, & Growth

3M+ installs

#18

Advanced Custom Fields (ACF®)

2M+ installs

#28

Image Optimization - Compress Images and Convert to WebP or AVIF

Regenerate Thumbnails

1M+ installs

#64

Smush – Image Optimization, Compression, Lazy Load, WebP & CDN

1M+ installs

#65

Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF

View all Media plugins

TL;DR

AI summary of the plugin's readme

This plugin is for WordPress developers and site builders using Advanced Custom Fields who need images to crop responsively around a specific point of interest. It solves the problem of important image content being cropped out by adding an ACF field type that lets users draw a focal point on an image using canvas, then renders the image responsively via Responsify.js.

New ACF field type
Draw focal point on image
Canvas-based selection box
Image preview like ACF image field
Responsive image display
Uses Responsify.js
Returns image as tag or object
Includes responsify.js library

Frequently Asked Questions

Common questions about ACF: Focal Point

Pretty much just like an ACF Image Field. There's a few differences, like not returning just an ID (there's no point without positions), but the basics are the same. Make sure the Preview Size and Return Size are of a similar ratio. And make sure the image parent has a height. Image tag returns some additional markup on images: <img class="js-focal-point-image" src="img.png" alt="image alt" data-focus-left="0.12" data-focus-top="0.11" data-focus-right="0.40" data-focus-bottom="0.98"> The Image object now has a few more values too: 'focal_point' => array( 'class' => 'js-focal-point-image', 'top' => $value['top'], 'left' => $value['left'], 'right' => $value['right'], 'bottom' => $value['bottom'] ) 'class' refers to the class that Responsify.js is called on. This needs to be on the image tag to work. 'top', 'left', 'right' and `'bottom'` refer to the `data-focus` attributes used to control focal point. Build image as per above tag. Responsify is called on load and resize automatically on img.js-focal-point-image.

Make sure the image is wrapped inside an element that has a height and hasn't had it's overflow: hidden overridden (by !important). And that the image hasn't had it's max-width: none overridden.

Make sure the return image size (set when creating a Focal Point field) isn't set to a small image size. Larger images work better.

Responsify.js tries it's best to fit as much of the photo in the container as it can, whilst keeping the focal point a priority, and also keeping ratios correct. This means that at some sizes/ratios your image will be displayed too small for it's container, try changing container size or image size. Or use background-size: cover.

Because for this to work, the image needs to move around within a container. Which means we need to hide the containers overflow. Which means we need to set a height. This is not made for wysiwyg style images, it's for banners, sliders, fullpage, fixed height sections, etc.

Make sure that the preview size and the return size are the same ratio. It's relatively accurate when they're close, but for best results they should be the same. And make sure any image sizes aren't differing their crops.