안녕하세요~^^

이전에도 비슷한 문의가 있었습니다.

아래 관련 링크를 참고 부탁드립니다.

https://www.cosmosfarm.com/threads/document/37429

고맙습니다.

첨부파일이 이미지일 때 미리보기 기능을 활용하시려면

이전 댓글의 코드 대신 아래의 코드를 활용해보세요.

add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20210222', 10, 4);
function kboard_get_template_field_html_20210222($field_html, $field, $content, $board){
	if($field['field_type'] == 'attach' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		$meta_key = (isset($field['meta_key']) && $field['meta_key']) ? $field['meta_key'] : '';
		$field_name = (isset($field['field_name'])&&$field['field_name']) ? $field['field_name'] : $field['field_label'];
		$url = new KBUrl();
		
		ob_start();
		?>
		<?php if($board->meta->max_attached_count > 0):?>
			<!-- 첨부파일 시작 -->
			<?php for($attached_index=1; $attached_index<=$board->meta->max_attached_count; $attached_index++):?>
			<div class="kboard-attr-row <?php echo esc_attr($field['class'])?> attach-<?php echo $attached_index?>">
				<label class="attr-name" for="kboard-input-file<?php echo $attached_index?>"><span class="field-name"><?php echo esc_html($field_name)?></span><?php echo $attached_index?></label>
				<div class="attr-value">
					<?php if(isset($content->attach->{"file{$attached_index}"})):?><?php echo $content->attach->{"file{$attached_index}"}[1]?> - <a href="<?php echo $url->getDeleteURLWithAttach($content->uid, "file{$attached_index}")?>" onclick="return confirm('<?php echo __('Are you sure you want to delete?', 'kboard')?>');"><?php echo __('Delete file', 'kboard')?></a><?php endif?>
					<input type="file" id="kboard-input-file<?php echo $attached_index?>" name="kboard_attach_file<?php echo $attached_index?>">
					<?php if(isset($field['description']) && $field['description']):?><div class="description"><?php echo esc_html($field['description'])?></div><?php endif?>
					<p class="kboard-attatch-preview kboard-input-file<?php echo $attached_index?>">
						<?php if(isset($content->attach->{"file{$attached_index}"})&&$content->attach->{"file{$attached_index}"}):?>
							<?php $extension = strtolower(pathinfo($content->attach->{"file{$attached_index}"}[0], PATHINFO_EXTENSION))?>
							<?php if(in_array($extension, array('gif','jpg','jpeg','png'))):?>
								<img src="<?php echo site_url($content->attach->{"file{$attached_index}"}[0])?>" alt="<?php echo $content->attach->{"file{$attached_index}"}[1]?>">
							<?php endif?>
						<?php endif?>
					</p>
				</div>
			</div>
			<?php endfor?>
			<!-- 첨부파일 끝 -->
		<?php endif?>
		<?php
		$field_html = ob_get_clean();
	}

	return $field_html;
}

add_action('kboard_skin_header', 'kboard_skin_header_20210222', 10, 1);
function kboard_skin_header_20210222($builder){
	$board = $builder->board;
	if(kboard_builder_mod() == 'editor' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		?>
		<script>
		jQuery(document).ready(function(){
			jQuery('.kboard-attr-attach input[type="file"]').on('change', function(){
				kboard_update_attachment(this);
			});
		});
		
		function kboard_update_attachment(input){
			var attachment_id = jQuery(input).attr('id');
			
			if(input.files && input.files[0]){
				var reader = new FileReader();
				reader.onload = function(e){
					jQuery('.'+attachment_id).html('<img src='+e.target.result+'>');
				}
				reader.readAsDataURL(input.files[0]);
			}
			else{
				jQuery('.'+attachment_id).html('');
			}
		}
		</script>
		<?php
	}
}

위의 코드에서 $board->id == '1' 부분은 모두 실제 게시판 id로 적용해주세요.

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가하시면 미리보기 이미지의 너비를 조절하실 수 있습니다.

.kboard-attatch-preview { max-width: 200px; }

고맙습니다.

첨부파일을 올리고 나서 글수정 페이지에서는 보이는데

제가 처음부터 미리보기 기능이라고 했어야 했는데 말 전달이 잘못된거 같습니다.

첨부파일 첨부시 미리보기 기능입니다ㅜㅜ

이전 댓글에 안내해드린 코드를 적용하시면

이미지의 확장자가 'gif','jpg','jpeg','png'일 때 글 수정 시 이미지 태그를 활용해서 이미지를 표시하게 하실 수 있습니다.

첨부파일 필드와 이미지를 동시에 표시되게 하시려면

이전 댓글의 코드 중 $field_html = ob_get_clean(); 부분을 $field_html .= ob_get_clean();로 교체해보시겠어요?

고맙습니다.

그러면 첨부파일을 첨부했을때,

파일명.jpg 이렇게 나오는게 아니라 이미지로 띄울 수 있을까요?

KBoard 플러그인의 첨부파일 필드의 메타키는 attach 입니다.

별도로 파일 필드를 추가하신 건지요?

어떤 이유로 필드 타입을 변경하셨는지 알려주시겠어요?

고맙습니다.

if($field['field_type'] == 'attach' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.

attach를 file로 수정하니 필드가 사라지고,

첨부파일을 올렸을때, 이미지가 보이고 싶은데 글자로만 나오내요~

글쓰기 페이지에서 첨부파일 이미지를 표시하시려면

아래의 코드를 활용해보시겠어요?

add_filter('kboard_get_template_field_html', 'kboard_get_template_field_html_20210219', 10, 4);
function kboard_get_template_field_html_20210219($field_html, $field, $content, $board){
	if($field['field_type'] == 'attach' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
		ob_start();
		?>
		<?php foreach($content->getAttachmentList() as $key=>$attach): $extension = strtolower(pathinfo($attach[0], PATHINFO_EXTENSION));?>
			<?php if(in_array($extension, array('gif','jpg','jpeg','png'))):?>
				<p class="thumbnail-area"><img src="<?php echo site_url($attach[0])?>" alt="<?php echo $attach[1]?>"></p>
			<?php else: $download[$key] = $attach; endif?>
		<?php endforeach?>
		<?php
		$field_html = ob_get_clean();
	}

	return $field_html;
}

위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해보세요.

테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.

고맙습니다.

보내주신 링크는

본문페이지에서 동작하는거 같은데,

$document = new KBContent();

$document->initWithUID($content_uid);

위에 저부분만 글쓰기페이지로 연동하면 댈까요??

저는 글쓰기 페이지에서 적용하고 싶습니다.

감사합니다~