Skip to content

DenisLanz/acf-focuspoint

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

76 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ACF: FocusPoint

Adds a new "FocusPoint" field type to Advanced Custom Fields allowing users to select a focal point on images.

If you find this plugin useful, please consider sponsoring the development by clicking the Sponsor button or directly through PayPal.


Description

Adds a new field type to ACF allowing users to select a focal point on image.

Works similar to a traditional ACF image field, but once an image is selected and a preview is displayed, this plugin allows selecting a focal point by clicking on the image. Focal point is returned in image array as percentage from left/top.

Requires ACF Pro 5

Tested on ACF Pro 5.8.7


Installation

  1. Download and extract the plugin
  2. Copy the acf-focuspoint folder into your wp-content/plugins folder
  3. Activate the ACF FocusPoint plugin via the plugins admin page
  4. Create a new field via ACF and select the FocusPoint type

Usage

Usage is very similar to ACF Image Field.

  1. Select an image

Screenshot 1

  1. Select a focal point by clicking the image preview

Screenshot 2

Plugin returns an array with image id and top/left values (percentages) of selected focus point:

'image' => array(
	'id'		=> 42,
	'top'  		=> 40.03,
	'left' 		=> 82.79,
)

Use these new values as you see fit. For example:

<?php 

$image = get_field('image'); 
$image_src = wp_get_attachment_image_src( $image['id'], 'large' );

?>

<style>
#my-image {
	background-image: url('<?php echo $image_src[0]; ?>');
	background-position: <?php echo $image['left'] . '% ' . $image['top']; ?>%;
	background-size: cover;
	height: 300px;
	width: 600px;
}
</style>

<div id="my-image"></div>

Changelog

See changelog.md


Thanks

Thanks to Elliot Condon for creating Advanced Custom Fields.

About

ACF: FocusPoint

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 62.5%
  • JavaScript 32.2%
  • CSS 5.3%