Image Aspect Ratio Crop Field for Advanced Custom Fields
A field for Advanced Custom Fields that forces the user to crop their image to specific aspect ratio or pixel size after uploading. Using an aspect ratio is especially useful in responsive image use cases. After cropping, a new cropped image variant is created in the gallery and saved into the post. Thumbnails are also generated for the new image. User can re-crop the original image at any time from the post page. The cropped image variants are hidden by default in the media browser and on the media page but you can view them by selecting the “list view” on the media page. There are three modes of operation: aspect ratio, pixel size and free crop. You can select this option when creating the field in ACF field options. Aspect ratio Use this option if you want the image to be of specific aspect ratio like 16:9 but the pixel size is not important. After selecting an image, user can select an area from the image that matches this aspect ratio. When crop button is pressed, the area is cropped from the original image. If you need a smaller image size, you make use of WordPress’s thumbnail functionality to access a smaller version of the image. Pixel size Use this option if you need a specific pixel size image like 640×480. User will not be able to select an image smaller than the defined pixel size. After selecting an image, user can select an area from the image they want, which can be larger than the pixel size but may not be smaller. The aspect ratio of the selection is locked according to the pixel size. When crop button is pressed, the area is cropped from the original image. After the crop is complete, the image will be automatically scaled down to the pixel size. This means the final image will always be the specified size. Free crop Crop can be done freely, there are no aspect ratio limitations. Requirements WordPress 4.9 or later PHP 5.6 or later Advanced Custom Fields 5.8 or later (Pro or Free) Compatibility Polylang Pro Enable Media Replace WP Offload Media, Media Cloud and other plugins that move media files to remote location ACF 5.8 or later (Pro or Free) Thanks Special thanks to Anders Thorborg for ACF Image Crop which served as a inspiration for this plugin. Also, thanks to Fengyuan Chen for the cropper.js library!
Top keywords
- image20×4.87%
- size11×2.68%
- pixel9×2.19%
- pixel size9×2.19%
- aspect8×1.95%
- aspect ratio8×1.95%
- crop8×1.95%
- ratio8×1.95%
- media7×1.70%
- user5×1.22%
- area4×0.97%
- cropped4×0.97%
Repeaters & Relationships Connector with ACF for Elementor
This plugin allows you to use ACF Repeater and ACF Relationship fields as data sources for Elementor’s Loop Grid widget. Key Features: New Data Sources: Adds “ACF Repeater” and “ACF Relationship” to the Source dropdown in the Loop Grid’s Query tab. Use Repeater Data: Select any ACF Repeater field from the current post/page to power your Loop Grid. Use Relationship Data: Select any ACF Relationship field to create a grid of related posts in your Loop Grid. Repeater Sub-Field Tag: A dedicated dynamic tag to easily pull and display data (text, images, etc.) from any sub-field within your repeater. Relationship Sub-Field Tag: A dynamic tag to display data from the related posts, such as the post title, content, featured image, and permalink. Taxonomy Archive Support: Use ACF Repeater and Relationship fields on category, tag, and custom taxonomy archive templates. Author Archive Support: Use ACF Repeater and Relationship fields on author archive templates. Requirements Elementor Elementor Pro Advanced Custom Fields Pro (The Repeater and Relationship fields are ACF Pro features) Usage 1. Configure the Loop Grid Add an Elementor Loop Grid widget to your page. In the widget settings, go to the Query tab. From the Source dropdown, select “ACF Repeater” or “ACF Relationship”. A new dropdown will appear below the Source. Select the specific ACF field you wish to use as the data source for the grid. Create or select a template for your loop item. 2. Displaying Data in Your Loop Template (ACF Repeater) Edit the Elementor template you are using for your loop item. Add any standard widget, such as a Heading, Text Editor, or Image widget. Click the Dynamic Tags icon next to a field. Scroll to the “ACF Connector” group and select the ACF Repeater Sub Field tag. Click on the tag name again to open its settings. In the Sub Field dropdown, select the specific sub-field you want to display. The fields are grouped by repeater name for clarity. Note that the preview within the template will not display the sub-field data. This is expected behavior because no applicable preview data can be set in Elementor. 3. Displaying Data in Your Loop Template (ACF Relationship) Edit the Elementor template you are using for your loop item. Your template will be supplied with a standard WordPress Post object, so just create your template as you normally would.
Top keywords
- acf16×4.06%
- repeater13×3.30%
