public static function ui( MEOW_Field $field ) { global $wf; $prop_inputs = self::prop_inputs($field, "attachment_id"); $fileurl = ""; $thumb = ""; $width = ""; $height = ""; $filesize = ""; $summary_thumb = ""; $filename = ""; $filetype = ""; $empty = ""; $orientation = ""; $no_image = __("( no image )", MASTERPRESS_DOMAIN); $view_image = __("View Image", MASTERPRESS_DOMAIN); // setup defaults for an empty image list($tw, $th) = array(120, 90); list($stw, $sth) = array(82, 39); $empty = "empty"; $orientation = "square"; $thumb = WOOF_Image::empty_mp_thumb(array("w" => $tw, "h" => $th, "no_image" => $no_image, "class" => "managed thumb") ); $summary_thumb = WOOF_Image::empty_mp_thumb(array("w" => $stw, "h" => $sth, "no_image" => $no_image, "class" => "managed summary-thumb" ) ); if (!$field->blank()) { $image = $field->file(); if ($image->exists()) { $empty = ""; $width = $image->width(); $height = $image->height(); $orientation = $height == $width ? "square" : ( $height > $width ? "portrait" : "landscape" ); list($tw, $th) = self::thumb_wh($width, $height); list($stw, $sth) = self::summary_thumb_wh($width, $height); $filesize = $image->filesize(); $filename = $image->basename(); $filetype = $image->filetype(); if ($image->is_external()) { $fileurl = $field->value(); $source_url = $fileurl; } else { $fileurl = $image->permalink(); } $thumb = $image->mp_thumb(array("w" => $tw, "h" => $th, "no_image" => $no_image, "class" => "thumb managed", "href" => $fileurl)); $summary_thumb = $image->mp_thumb(array("w" => $stw, "h" => $sth, "no_image" => $no_image, "class" => "managed summary-thumb", "thumb_only" => true ) ); } } else { $empty = "empty"; $orientation = "square"; } if (isset($source_url)) { $prop_source_url = $source_url; } else { $prop_source_url = $field->prop("source_url"); } $prop_alt = esc_attr( $field->prop("alt") ); $prop_title = esc_attr( $field->prop("title") ); $replace_image_label = __("Replace Image:", MASTERPRESS_DOMAIN); $choose_image_label = __("Choose Image:", MASTERPRESS_DOMAIN); $attributes_label = __("Attributes", MASTERPRESS_DOMAIN); $attributes_title = __("Edit HTML attributes (alternate text / title)", MASTERPRESS_DOMAIN); $url_label = __("Enter Image URL:", MASTERPRESS_DOMAIN); $alt_label = __("Alternate Text:", MASTERPRESS_DOMAIN); $title_label = __("Title:", MASTERPRESS_DOMAIN); $attributes_title = __("Image Tag Attributes", MASTERPRESS_DOMAIN); $button_replace_label = __("Replace Image…", MASTERPRESS_DOMAIN); $button_from_computer_label = __("From Computer…", MASTERPRESS_DOMAIN); $button_from_media_library_label = __("From Media Library…", MASTERPRESS_DOMAIN); $button_from_url_label = __("From URL…", MASTERPRESS_DOMAIN); $button_from_existing_uploads_label = __("From Existing Uploads…", MASTERPRESS_DOMAIN); $button_from_media_library_data_library = MasterPress::use_new_media() ? "new" : "legacy"; $button_clear_label = __("Clear", MASTERPRESS_DOMAIN); $button_delete_label = __("Delete", MASTERPRESS_DOMAIN); $button_download_label = __("Download", MASTERPRESS_DOMAIN); $button_cancel_label = __("Cancel", MASTERPRESS_DOMAIN); $button_clear_title = __("Clear field without deleting the image file", MASTERPRESS_DOMAIN); $button_delete_title = __("Clear field AND delete the image file", MASTERPRESS_DOMAIN); $w_times_h = __("width × height", MASTERPRESS_DOMAIN); $drop_label = __("Drop image<br />file here<br />to upload", MASTERPRESS_DOMAIN); $base_url = MASTERPRESS_CONTENT_URL; $dir = 'uploads/'; $media_library_progress_message = __("Fetching URL from Media Library...", MASTERPRESS_DOMAIN); $upload_progress_message = __("Uploading...", MASTERPRESS_DOMAIN); $fetching_info_message = __("Fetching Image Information...", MASTERPRESS_DOMAIN); $dowloading_progress_message = __("Downloading Image...", MASTERPRESS_DOMAIN); $href = ' href="'.$fileurl.'" '; if ($fileurl == "") { $href = ""; } // populate the media library dialog // $media_library_dialog $upload_html = ""; $download_html = ""; $clear_html = ""; $labels_html = ""; $ml_html = ""; $choose_html = ""; $readonly = WOOF_HTML::readonly_attr( !$field->is_editable() ); if ($wf->the_user->can("upload_files") && $field->is_editable()) { $choose_html = <<<HTML <div class="choose-controls"> <h5 class="replace-label">{$replace_image_label}</h5> <h5 class="choose-label">{$choose_image_label}</h5> <div class="buttons"> <div class="file-uploader { input: '#{{id}}', inputName: '{{id}}_file', ids: { drop: '{{id}}_drop_area' }, base_url: '{$base_url}', params: { dir: '{$dir}' }, limit: 1, lang: { buttonChoose: '{$button_from_computer_label}', buttonReplace: '{$button_from_computer_label}' } }"> <input id="{{id}}" name="{{name}}" value="{$fileurl}" type="hidden" class="value" autocomplete="off" /> <div class="uploader-ui"></div> </div> <!-- /.file-uploader --> <button type="button" class="button button-small button-from-url">{$button_from_url_label}</button> <button type="button" class="button button-small button-from-media-library" data-library="{$button_from_media_library_data_library}">{$button_from_media_library_label}</button> </div> </div> <!-- /.choose-controls --> HTML; $clear_html = <<<HTML <ul class="controls"> <li><button title="{$button_clear_title}" type="button" class="text with-icon clear">{$button_clear_label}</button></li> </ul> HTML; } else { $choose_html = <<<HTML <input id="{{id}}" name="{{name}}" value="{$fileurl}" type="hidden" class="value" autocomplete="off" /> HTML; } $html = <<<HTML <div class="ui-state {$empty}"> {$prop_inputs} <div class="thumbs {$orientation}"> <div id="{{id}}_drop_area" class="drop-area">{$drop_label}</div> {$summary_thumb} {$thumb} </div> <!-- /.thumbs --> <div class="info-controls"> <div class="name-controls"> <h5><a target="_blank" href="{$fileurl}" tabindex="-1" title="{$filename}" class="fancybox file-link with-icon"><span class="filename">{$view_image}</span></a></h5> {$clear_html} </div> <ul class="prop"> <li class="filetype">{$filetype}</li> <li class="dimensions" title="{$w_times_h}"><span class="width">{$width}</span> × <span class="height">{$height}</span></li> <li class="filesize">{$filesize}</li> <li class="attributes"><button type="button" class="text with-icon attributes" title="{$attributes_title}">{$attributes_label}</button></li> </ul> {$choose_html} <div class="media-library-progress"> <span class="fetching-message progress-message">{$media_library_progress_message}</span> <span class="fetching-info-message progress-message">{$fetching_info_message}</span> </div> <!-- /.media-library-progress --> <div class="upload-progress"> <span class="name"></span> <div class="progress-bar-with-val"> <div class="progress-bar"><div class="border"><div><span class="bar"> </span></div></div></div> <div class="val">0%</div> </div> <span class="uploading-message progress-message">{$upload_progress_message}</span> <span class="fetching-info-message progress-message">{$fetching_info_message}</span> </div> <!-- /.upload-progress --> <div class="from-url-ui"> <label for="{{id}}-url">{$url_label}</label> <input id="{{prop_id}}-source_url" name="{{prop_name}}[source_url]" type="text" value="{$prop_source_url}" class="text url" /> <div class="buttons"> <button type="button" class="button button-small download">{$button_download_label}</button> <button type="button" class="button button-small cancel">{$button_cancel_label}</button> </div> </div> <!-- /.from-url --> <div class="download-progress"> <span class="downloading-message progress-message">{$dowloading_progress_message}</span> <span class="fetching-info-message progress-message">{$fetching_info_message}</span> </div> <!-- /.download-progress --> </div> <!-- /.info-controls --> <div class="dialogs"> <div class="mpft-image-attributes-dialog mp-dialog mpv" data-title="{$attributes_title}"> <div class="pad"> <div class="f"> <label for="{{prop_id}}-alt">{$alt_label}</label> <div class="fw"> <input id="{{prop_id}}-alt" $readonly name="{{prop_name}}[alt]" value="{$prop_alt}" type="text" class="text alt" /> </div> <!-- /.fw --> </div> <!-- /.f --> <div class="f"> <label for="{{prop_id}}-title">{$title_label}</label> <div class="fw"> <input id="{{prop_id}}-title" $readonly name="{{prop_name}}[title]" value="{$prop_title}" type="text" class="text title" /> </div> <!-- /.fw --> </div> <!-- /.f --> </div> <!-- /.pad --> </div> </div> <!-- /.dialogs --> </div> <!-- /.ui-state --> HTML; return $html; }