name = 'image'; $this->label = 'Image'; $this->category = 'content'; } public function render( $field, $value = '', $name = null ) { $name = $name ?: "metaforge[{$field['name']}]"; $attachment_id = ! empty( $value ) ? intval( $value ) : ''; // Fetch 'medium' size instead of 'thumbnail' to prevent WP from hard-cropping logos/banners $image_url = $attachment_id ? wp_get_attachment_image_url( $attachment_id, 'large' ) : ''; // Fallback to full size if medium isn't generated (e.g. for small logo files) if ( $attachment_id && ! $image_url ) { $image_url = wp_get_attachment_url( $attachment_id ); } $has_image = ! empty( $image_url ); echo '

'; if ( ! empty( $field['label'] ) ) { echo '' . esc_html( $field['label'] ) . ''; } echo '

'; echo ''; // --- Empty UI --- echo '

'; echo '

'; echo ''; echo '' . esc_html__( 'Add Image', 'metaforge-engine' ) . ''; echo '

'; echo '

'; // --- Filled UI --- // Always render the preview wrapper so JS can target it, // but hide it via inline style when no image is set. // The has-value / is-empty classes on the wrap already toggle // .show-if-value via CSS, but we also guard the wrapper itself. echo '

'; if ( $has_image ) { echo '

'; } echo '

'; echo ''; echo ''; echo '

'; // close actions echo '

'; // close preview echo '

'; // close wrap echo '

'; // close field } public function format_value( $value, $post_id, $field ) { $format = $field['image_return_format'] ?? 'array'; return metaforge_format_image( $value, $format ); } public function sanitize( $value, $field ) { return intval( $value ); } }