managed_file
Form API 유형을 사용하여 이미지 파일을 업로드했지만 이미지를 업로드 한 후 필드 옆에 썸네일로 표시되지 않습니다. 렌더링되는 것은 이미지에 대한 링크와 작은 아이콘이있는 이미지의 파일 이름입니다.
이미지를 업로드 한 후 이미지의 축소판을 표시하려면 어떻게해야합니까 (예 : 핵심 이미지 필드의 이미지 미리보기)?
또한 옆에 기본 이미지를 표시하는 방법은 무엇입니까 (기본값이있는 경우)?
이것은 내 코드입니다.
$form['logo'] = array(
'#title' => t('Logo'),
'#type' => 'managed_file',
'#required' => TRUE,
'#default_value' => variable_get('logo', ''),
'#upload_location' => 'public://',
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
'file_validate_size' => array(0.3*1024*1024),
)
답변
간단한 수정으로 문제를 해결했습니다. 테마 요소를 “tbs_thumb_upload”양식에 추가하고 테마 파일에서 테마 파일 코드에 언급 된대로 요소를 제공 할 수 있습니다.
// THIS IS THE FILE FIELD
$form['logo'] = array(
'#type' => 'managed_file',
'#title' => t('Logo'),
'#description' => t('Allowed extensions: gif png jpg jpeg'),
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
// Pass the maximum file size in bytes
'file_validate_size' => array(1 * 1024 * 1024),
),
'#theme' => 'tbs_thumb_upload',
'#upload_location' => 'public://society/',
'#attributes' => array('default_image_path' => TBS_IMAGE_DEFAULT_SOCIETY)
);
// THIS IS THE THEME FILE : THEME : tbs_thumb_upload : Theme file code
if (!empty($form['#file'])) {
$uri = $form['#file']->uri;
$desc = FALSE;
}else {
$uri = $form['#attributes']['default_image_path'];
$desc = TRUE;
}
// Render form element
print drupal_render_children($form);
답변
필드에서 테마를 정의하고 코드 구조를 시뮬레이션하여 방금 업로드 한 이미지를 미리보십시오. 내 해결책은 다음과 같습니다.
$form['abc_field']['abc_filename'] = array(
'#type' => 'managed_file',
'#title' => t('abc image'),
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
'file_validate_size' => array(1 * 1024 * 1024),
),
'#theme' => 'abc_thumb_upload',
'#upload_location' => 'public://abc/'
);
hook_theme ()에서
return array(
'abc_thumb_upload' => array(
'render element' => 'element',
'file' => 'abc.module',
));
theme_abc_thumb_upload ()에서
function theme_abc_thumb_upload($variables) {
$element = $variables['element'];
if (isset($element['#file']->uri)) {
$output = '<div id="edit-logo-ajax-wrapper"><div class="form-item form-type-managed-file form-item-logo"><span class="file">';
$output .= '<img height="50px" src="' . file_create_url($element['#file']->uri) . '" />';
$output .= '</span><input type="submit" id="edit-' . $element['#name'] . '-remove-button" name="' . $element['#name'] . '_remove_button" value="Remove" class="form-submit ajax-processed">';
$output .= '<input type="hidden" name="' . $element['#name'] . '[fid]" value="' . $element['#file']->fid . '">';
return $output;
}
}
답변
$form['logo'] = array(
'#title' => t('Logo'),
'#type' => 'managed_file',
'#required' => TRUE,
'#default_value' => variable_get('logo', ''),
'#upload_location' => 'public://',
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
'file_validate_size' => array(0.3*1024*1024),
'file_validate_image_resolution'=>array('100x100'),
)
답변
제거 버튼을 위해 HTML을 해킹하면 작동하지 않습니다. 이미지를 제거하지 않고 페이지를 새로 고칩니다. 대신에있는 핵심 이미지 필드의 theme_image_widget
콜백에서 복사 했습니다 docroot/modules/image/image.field.inc
.
/**
* Implements theme_mymodule_thumb_upload theme callback.
*/
function theme_mymodule_thumb_upload($variables) {
$element = $variables['element'];
$output = '';
$output .= '<div class="image-widget form-managed-file clearfix">';
// My uploaded element didn't have a preview array item, so this didn't work
//if (isset($element['preview'])) {
// $output .= '<div class="image-preview">';
// $output .= drupal_render($element['preview']);
// $output .= '</div>';
//}
// If image is uploaded show its thumbnail to the output HTML
if ($element['fid']['#value'] != 0) {
$output .= '<div class="image-preview">';
// Even though I was uploading to public:// the $element uri was pointing to temporary://system, so the path to the preview image was a 404
//$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => 'public://'.$element['#file']->filename, 'getsize' => FALSE));
$output .= '</div>';
}
$output .= '<div class="image-widget-data">';
if ($element['fid']['#value'] != 0) {
$element['filename']['#markup'] .= ' <span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> ';
}
// The remove button is already taken care of by rendering the rest of the form. No need to hack up some HTML!
$output .= drupal_render_children($element);
$output .= '</div>';
$output .= '</div>';
return $output;
}
이 테마 기능을 사용하여 요소를 렌더링하십시오.
/**
* Implements hook_theme().
*/
function mymodule_theme() {
return array(
'mymodule_thumb_upload' => array(
'render element' => 'element',
)
);
}
양식 요소 정의 :
$form['upload_image'] = array(
'#type' => 'managed_file',
'#default_value' => $value,
'#title' => t('Image'),
'#description' => t('Upload an image'),
'#upload_location' => 'public://',
'#theme' => 'mymodule_thumb_upload',
'#upload_validators' => array(
'file_validate_is_image' => array(),
'file_validate_extensions' => array('jpg jpeg gif png'),
'file_validate_image_resolution' => array('600x400','300x200'),
),
);
답변
이미지 미리보기에 대한 마크 업을 포함 할 다른 양식 요소를 추가하십시오. 아래 코드에서 $ v는 관심있는 양식 값을 포함합니다. 특정 사례는 노드, 양식 상태 또는 다른 곳에서 가져올 수 있습니다. 배열로 캐스트 된 파일 객체입니다.
// If there is a file id saved
if (!empty($v['fid'])) {
// If there is no file path, a new file is uploaded
// save it and try to fetch an image preview
if (empty($v['uri'])) {
$file = file_load($v['fid']);
// Change status to permanent so the image remains on the filesystem.
$file->status = FILE_STATUS_PERMANENT;
$file->title = $v['title'];
// Save.
file_save($file);
global $user;
file_usage_add($file, 'node', 'node', $user->uid);
$v = (array)$file;
}
$form['photos']['items'][$i]['preview']['#markup'] = theme(
'image_style',
array(
'style_name' => 'form_image_preview',
'path' => file_build_uri(file_uri_target($v['uri']))
)
);
}
파일 상태를 영구적으로 저장하고 다시 저장합니다. 업로드 된 이미지를 올바르게 미리보기위한 것입니다. 임시 저장소의 이미지에는 이미지 스타일을 생성 할 수 없으므로 이미지 스타일을 perm으로 플래그 지정해야합니다. 사용 사례 및 워크 플로에 따라 “고아”이미지를 처리해야 할 수도 있습니다.
내 양식 구조 ($ form [ ‘photos’] [ ‘items’] [$ i])는 다중 입력 이미지 필드를위한 것입니다. 그것들을 모아서 drupal_add_tabledrag에 넣는 테마 템플릿이 있습니다 . 양식 배열 구조가 다를 수 있습니다.