WordPress.org
Get WordPress

Plugin Directory

Changeset 3257865


Ignore:
Timestamp:
03/18/2025 02:08:11 PM (13 months ago)
Author:
wpcompany
Message:

Focus point is now shown in number fields to allow for further fine-tuning

Location:
media-focus-point
Files:
7 added
5 edited

Legend:

Unmodified
Added
Removed

  • media-focus-point/trunk/admin.css

    r3216042 r3257865  
    7575}
    7676.overlay img{
     77    cursor: crosshair;
    7778    max-height: 100%;
     79    height: auto;
    7880    max-width: 100%;
    79     cursor:crosshair;
    80     object-fit: contain;
     81    width: auto;
    8182}
    8283.overlay .pin{
    … …  
    119120    opacity: .6;
    120121}
    121 
    122 /*.overlay .pin-border {*/
    123 /*    content: "";*/
    124 /*    position: absolute;*/
    125 /*    top: 50%;*/
    126 /*    left: 50%;*/
    127 /*    width: 150px;*/
    128 /*    aspect-ratio: 1 / 1;*/
    129 /*    background-size: cover;*/
    130 /*    background: transparent;*/
    131 /*    border-radius: 50%;*/
    132 /*    outline: 3px solid white;*/
    133 /*    pointer-events: none;*/
    134 /*    transform: translate(-50%, -50%);*/
    135 /*    opacity: .6;*/
    136 /*    box-shadow: 0 0 0 6000px #000000;*/
    137 /*}*/
    138122.close.button{
    139123    border:0px;
    … …  
    146130    margin:6px 0px;
    147131}
     132#desktop_value input[type="number"] {
     133    width: calc(3ch + 28px);
     134    padding: 0 4px;
     135}
    148136.compat-field-background_position_desktop label span{
    149137    font-size:12px;

  • media-focus-point/trunk/languages/media-focus-point.pot

    r3216376 r3257865  
    1 # Copyright (C) 2024 WP Company
     1# Copyright (C) 2025 WP Company
    22# This file is distributed under the GPLv3 or later.
    33msgid ""
    44msgstr ""
    5 "Project-Id-Version: Media Focus Point 1.0\n"
     5"Project-Id-Version: Media Focus Point 1.4\n"
    66"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/media-focus-point\n"
    77"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
    … …  
    1010"Content-Type: text/plain; charset=UTF-8\n"
    1111"Content-Transfer-Encoding: 8bit\n"
    12 "POT-Creation-Date: 2024-12-31T08:37:21+00:00\n"
     12"POT-Creation-Date: 2025-03-05T08:24:33+00:00\n"
    1313"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
    1414"X-Generator: WP-CLI 2.11.0\n"
    … …  
    1717#. Plugin Name of the plugin
    1818#: media-focus-point.php
     19#: media-focus-point.php:100
    1920msgid "Media Focus Point"
    2021msgstr ""
    … …  
    3536msgstr ""
    3637
    37 #: media-focus-point.php:32
     38#: media-focus-point.php:39
    3839msgid "Click on the image to set the focus point"
    3940msgstr ""
    4041
    41 #: media-focus-point.php:35
     42#: media-focus-point.php:42
    4243msgid "Cancel"
    4344msgstr ""
    4445
    45 #: media-focus-point.php:38
     46#: media-focus-point.php:45
    4647msgid "Save"
    4748msgstr ""
    4849
    49 #: media-focus-point.php:63
     50#: media-focus-point.php:64
     51msgid "This field contains the X-percentage"
     52msgstr ""
     53
     54#: media-focus-point.php:74
     55msgid "This field contains the Y-percentage"
     56msgstr ""
     57
     58#: media-focus-point.php:92
    5059msgid "Reset"
    5160msgstr ""
    52 
    53 #: media-focus-point.php:71
    54 msgid "Media Focus Point"
    55 msgstr ""

  • media-focus-point/trunk/media-focus-point.php

    r3236656 r3257865  
    33* Plugin Name: Media Focus Point
    44* Description: Ensures that your selected focus area of an image remains centered and visible, even when resized.
    5 * Version: 1.3
     5* Version: 1.4
    66* Author: WP Company
    77* Author URI: https://www.wpcompany.nl
    88* Text Domain: media-focus-point
    99* Domain Path: /languages
    10 * Tested up to: 6.7.1
     10* Tested up to: 6.7.2
    1111* License: GPLv3 or later
    1212* License URI: http://www.gnu.org/licenses/gpl-3.0.html
    … …  
    1919    function wpcmfp_media_add_media_custom_field( $form_fields, $post ) {
    2020        $field_value = get_post_meta( $post->ID, 'bg_pos_desktop', true );
    21         $disabled = ($field_value && $field_value!='50% 50%')?'':'style="display:none"';
    22         $label = ($field_value && $field_value!='50% 50%')?'Change':'Set';
    23         $desktop_text = ($field_value && $field_value!='50% 50%')? $field_value:'Centered (default)';
    24         $field_value = ($field_value)?$field_value:'50% 50%';
     21        $disabled = ($field_value && $field_value != '50% 50%') ? '' : 'style="display:none"';
     22        $label = ($field_value && $field_value != '50% 50%') ? 'Change' : 'Set';
     23        $field_value = ($field_value) ? $field_value : '50% 50%';
     24        $img_tag = wp_get_attachment_image( $post->ID, 'full' );
     25        // Add ondragstart attribute which prevents the image from being accidentally dragged and triggering the upload overlay
     26        $img_tag = str_replace('<img', '<img ondragstart="return false;"', $img_tag);
     27        // Turn string of percentages into array of numbers
     28        $field_value_array = str_replace( '%', '', $field_value );
     29        $field_value_array = explode( ' ', $field_value_array );
     30        $value_x = $field_value_array[0];
     31        $value_y = $field_value_array[1];
    2532
    2633        $html = '
    … …  
    4350                    <div class="container">
    4451                        <div class="pin"></div>
    45                         ' . wp_get_attachment_image( $post->ID, 'full' ) . '
     52                        ' . $img_tag . '
    4653                    </div>
    4754                </div>
    4855            </div>
    4956            <div class="focusp_label_holder">
    50                 <div id="desktop_value">' . $desktop_text . '</div>
     57                <div id="desktop_value">
     58                    <input
     59                        id="desktop_value_x"
     60                        type="number"
     61                        min="0"
     62                        max="100"
     63                        step="1"
     64                        title="' . __( 'This field contains the X-percentage', 'media-focus-point' ) . '"
     65                        value="' . $value_x . '"
     66                        onchange="onNumberInputChange(this)"
     67                    />%
     68                    <input
     69                        id="desktop_value_y"
     70                        type="number"
     71                        min="0"
     72                        max="100"
     73                        step="1"
     74                        title="' . __( 'This field contains the Y-percentage', 'media-focus-point' ) . '"
     75                        value="' . $value_y . '"
     76                        onchange="onNumberInputChange(this)"
     77                    />%
     78                    <div id="desktop_value_label"></div>
     79                </div>
    5180                <input
    5281                    type="button"

  • media-focus-point/trunk/readme.txt

    r3236654 r3257865  
    33Tags: focus, focal, center, image, background
    44Requires at least: 6.0
    5 Tested up to: 6.7.1
     5Tested up to: 6.7.2
    66Requires PHP: 7.4
    7 Stable tag: 1.3
     7Stable tag: 1.4
    88License: GPLv3 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    9494== Changelog ==
    9595
     96= 1.4 =
     97* Images are no longer draggable while setting a focus point.
     98* Corrected image boundaries when setting a focus point by clicking on an image.
     99* Focus point is now shown in number fields to allow for further fine-tuning.
     100* Fixed a bug where image dimensions were sometimes read too early causing division by zero.
     101
    96102= 1.3 =
    97103* New function MFP_Background to dynamically generate background position for background images.

  • media-focus-point/trunk/script.js

    r3216402 r3257865  
    11let d_left = null;
    22let d_right = null;
    3 let bgX = null;
    4 let bgY = null;
     3let bgX = 0;
     4let bgY = 0;
    55let centered_text = 'Centered (default)';
    66let imageWt = 0;
    … …  
    88let containerHt = 0;
    99let containerWt = 0;
     10
     11function onNumberInputChange() {
     12    const inputX = document.getElementById('desktop_value_x');
     13    const inputY = document.getElementById('desktop_value_y');
     14    const hidden_input = document.getElementById('bg_pos_desktop_id') ;
     15
     16    // As values are percentages and it doesn't make sense to place focus outside of the image, we use 100 as a maximum value
     17    if (inputX.value > 100) {
     18        inputX.value = 100;
     19    }
     20    if (inputY.value > 100) {
     21        inputY.value = 100;
     22    }
     23
     24    // Concatenate number input values to correct CSS syntax
     25    hidden_input.value = `${inputX.value}% ${inputY.value}%`;
     26}
    1027
    1128function set_bg_values() {
    … …  
    2643    d_left = bgX;
    2744    d_right = bgY;
    28     document.getElementById('bg_pos_desktop_id').value = `${bgX}% ${bgY}%`;
    29     var changeEvent = new Event('change', {
    30         'bubbles': true,
    31         'cancelable': true
    32     });
    3345
    34     document.getElementById('bg_pos_desktop_id').dispatchEvent(changeEvent);
    35     if (bgX != 50 && bgY != 50) {
    36         document.getElementById('desktop_value').innerHTML = `${bgX}% ${bgY}%`;
     46    document.getElementById('bg_pos_desktop_id').value = `${bgX}% ${bgY}%`;
     47    document.getElementById('desktop_value_x').value = bgX;
     48    document.getElementById('desktop_value_y').value = bgY;
     49    // Trigger change event to save new values
     50    triggerChange(document.getElementById('bg_pos_desktop_id'));
     51
     52    if (bgX == 50 && bgY == 50) {
     53        document.getElementById("desktop_value_label").innerHTML = centered_text;
     54        document.getElementById("label_desktop").setAttribute('value', 'Set');
     55    } else {
     56        document.getElementById("desktop_value_label").innerHTML = '';
    3757        document.getElementById("label_desktop").setAttribute('value', 'Change');
    3858        document.getElementById("reset_desktop").style.display = 'inline';
    39     } else {
    40         document.getElementById("desktop_value").innerHTML = `${centered_text}`;
    41         document.getElementById("label_desktop").setAttribute('value', 'Set');
    4259    }
     60}
     61
     62function triggerChange(element) {
     63    console.log('test');
     64    if (element) {
     65        const changeEvent = new Event('change', {
     66            'bubbles': true,
     67            'cancelable': true
     68        });
     69
     70        element.dispatchEvent(changeEvent);
     71    }
     72}
     73
     74
     75function waitForImageLoad(image) {
     76    return new Promise((resolve) => {
     77        if (image.complete) {
     78            resolve(image);
     79        } else {
     80            image.onload = () => resolve(image);
     81        }
     82    });
    4383}
    4484
    … …  
    5090    attachImageClickListener();
    5191
    52     let container = document.querySelector(".image_focus_point .container");
    53     let image = document.querySelector(".image_focus_point img");
    54     containerHt = container.clientHeight;
    55     containerWt = container.clientWidth;
    56     imageWt = image.width;
    57     imageHt = image.height;
    58     let left = (imageWt * (d_left / 100)) + ((containerWt - imageWt) / 2);
    59     let top = (imageHt * (d_right / 100)) + ((containerHt - imageHt) / 2);
    60     document.querySelector('.pin').style.left = `${left}px`;
    61     document.querySelector('.pin').style.top = `${top}px`;
     92    // Use Promise to wait for image to complete loading to prevent width and height reading as 0
     93    (async () => {
     94        const container = document.querySelector(".image_focus_point .container");
     95        const image = document.querySelector(".image_focus_point img");
     96        await waitForImageLoad(image);
     97        containerHt = container.clientHeight;
     98        containerWt = container.clientWidth;
     99        imageWt = image.width;
     100        imageHt = image.height;
     101        const left = (imageWt * (d_left / 100)) + ((containerWt - imageWt) / 2);
     102        const top = (imageHt * (d_right / 100)) + ((containerHt - imageHt) / 2);
     103        document.querySelector('.pin').style.left = `${left}px`;
     104        document.querySelector('.pin').style.top = `${top}px`;
     105    })();
    62106}
    63107
    … …  
    76120        imgElement.addEventListener('click', function (e) {
    77121            let offset = imgElement.getBoundingClientRect();
     122            // Determine relative position of click on image
    78123            let relX = e.pageX - offset.left;
    79124            let relY = e.pageY - offset.top;
     125            // Convert relative position to percentage value
    80126            bgX = Math.round((relX / imageWt) * 100);
    81127            bgY = Math.round((relY / imageHt) * 100);
    82 
    83128            let left = (imageWt * (bgX / 100)) + ((containerWt - imageWt) / 2);
    84129            let top = (imageHt * (bgY / 100)) + ((containerHt - imageHt) / 2);
    … …  
    88133        });
    89134    } else {
    90         console.log("Image element not found!");
     135        console.error("Image element not found!");
    91136    }
    92137}
Note: See TracChangeset for help on using the changeset viewer.