글쓰기 페이지에서 첨부파일 필드로 첨부하면 이미지로 나오게 할 수 있나요?

글쓰기 페이지에서

고객이 첨부파일필드에서 jpg, png 등 이미지 파일을 올리면

파일명이 글씨로 나오는게 아니라 이미지로 나올 수 있나요?

 

스킨명 : ask-one

 

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

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

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

    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);

     

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

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

  • 감사합니다~

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요