안녕하세요~^^

올려주신 링크에서 document.php 파일에 추가한 자바스크립트 코드를 보면

이미지 정보를 ul 태그와 li 태그로 표시를 하고 있습니다.

한 줄에 표시되게 하시려면 ul 태그와 li 태그가 아닌

div 태그에 원하시는 표시 방법을 적용해주셔야 할 듯합니다.

일부 사진에만 exif가 표시되는 건 올려주신 내용만으로는 원인을 파악하기 어렵습니다.

실제 이미지 파일에 exif 데이터가 있는지 확인해보셔야 할 듯합니다.

고맙습니다.

프로그램 코드를 올려야 할 경우 에디터의 코드 스니펫 삽입 기능을 사용해주세요.

div 태그는 기본적으로 block 속성이기 때문에 별도의 CSS 코드를 추가하지 않는다면

한 줄에 한 개씩 표시가 됩니다.

기존의 코드를 아래의 코드로 교체해서 확인해보시겠어요?

<script>
var my_kboard_exif_read_data_nonce = '<?php echo wp_create_nonce('my_kboard_exif_read_data_nonce')?>';
jQuery(document).ready(function(){
	jQuery('.kboard-content img').each(function(){
		var img = jQuery(this);
		jQuery.post('<?php echo admin_url('admin-ajax.php');?>', {action:'my_kboard_exif_read_data', security:my_kboard_exif_read_data_nonce, src:img.attr('src')}, function(res){
			if(!res.error){
				var ul = jQuery('<div></div>');
				var exif_data = [];
			
				if(res.ApertureFNumber) exif_data.push('조리개:' + res.ApertureFNumber);
				if(res.Model) exif_data.push('모델:' + res.Model);
				if(res.DateTimeOriginal) exif_data.push('날짜:' + res.DateTimeOriginal);
				if(res.ISOSpeedRatings) exif_data.push('ISO:' + res.ISOSpeedRatings);
				if(res.FocalLength) exif_data.push('초점거리:' + eval(res.FocalLength));
				if(res.ExposureTime) exif_data.push('노출시간:' + res.ExposureTime);
				
				if(res.GPSLatitude && res.GPSLongitude){
					var map_zoom = 11;
					var map_size_width = 300;
					var map_size_height = 200;
				
					var deg = eval(res.GPSLatitude[0]);
					var min = eval(res.GPSLatitude[1]);
					var sec = eval(res.GPSLatitude[2]);
					res.gps_lat = deg + ((min/60) + (sec/3600));
				
					deg = eval(res.GPSLongitude[0]);
					min = eval(res.GPSLongitude[1]);
					sec = eval(res.GPSLongitude[2]);
					res.gps_long = deg + ((min/60) + (sec/3600));

					exif_data.push('GPS:' + res.gps_lat + ',' + res.gps_long);
					exif_data.push('<a href="https://www.google.com/maps/place/'+res.gps_lat+','+res.gps_long+'" onclick="window.open(this.href);return false;"><img src="https://maps.googleapis.com/maps/api/staticmap?zoom='+map_zoom+'&amp;size='+map_size_width+'x'+map_size_height+'&amp;maptype=roadmap&#10;&amp;markers=color:blue%7Clabel:S%7C'+res.gps_lat+','+res.gps_long+'&amp;sensor=false" alt="" width="'+map_size_width+'" height="'+map_size_height+'" style="vertical-align:top;"></a>');
				}

				ul.append(exif_data.join(' | '));
				
				img.after(ul);
			}
		}, 'json');
	});
});
</script>

고맙습니다.

답변 감사드립니다. 아래와 같이 수정해보았는데 여전히 한줄씩 따로 나오네요.

아래 코드에서 어디를 수정해야하는지 다시 한번 확인 부탁드리겠습니다.

미리 감사드립니다.

<script>
var my_kboard_exif_read_data_nonce = '<?php echo wp_create_nonce('my_kboard_exif_read_data_nonce')?>';
jQuery(document).ready(function(){
    jQuery('.kboard-content img').each(function(){
        var img = jQuery(this);
        jQuery.post('<?php echo admin_url('admin-ajax.php');?>', {action:'my_kboard_exif_read_data', security:my_kboard_exif_read_data_nonce, src:img.attr('src')}, function(res){
            if(!res.error){
                var ul = jQuery('<div></div>');
 
                if(res.ApertureFNumber) ul.append(jQuery('<div></div>').text('조리개:' + res.ApertureFNumber));
                if(res.Model) ul.append(jQuery('<div></div>').text('모델:' + res.Model));
                if(res.DateTimeOriginal) ul.append(jQuery('<div></div>').text('날짜:' + res.DateTimeOriginal));
                if(res.ISOSpeedRatings) ul.append(jQuery('<div></div>').text('ISO:' + res.ISOSpeedRatings));
                if(res.FocalLength) ul.append(jQuery('<div></div>').text('초점거리:' + eval(res.FocalLength)));
                if(res.ExposureTime) ul.append(jQuery('<div></div>').text('노출시간:' + res.ExposureTime));
 
                if(res.GPSLatitude && res.GPSLongitude){
                    var map_zoom = 11;
                    var map_size_width = 300;
                    var map_size_height = 200;
 
                    var deg = eval(res.GPSLatitude[0]);
                    var min = eval(res.GPSLatitude[1]);
                    var sec = eval(res.GPSLatitude[2]);
                    res.gps_lat = deg + ((min/60) + (sec/3600));
 
                    deg = eval(res.GPSLongitude[0]);
                    min = eval(res.GPSLongitude[1]);
                    sec = eval(res.GPSLongitude[2]);
                    res.gps_long = deg + ((min/60) + (sec/3600));
 
                    ul.append(jQuery('<div></div>').text('GPS:' + res.gps_lat + ',' + res.gps_long));
                    ul.append(jQuery('<div></div>').append(jQuery('<a href="https://www.google.com/maps/place/'+res.gps_lat+','+res.gps_long+'" onclick="window.open(this.href);return false;"><img src="https://maps.googleapis.com/maps/api/staticmap?zoom='+map_zoom+'&amp;size='+map_size_width+'x'+map_size_height+'&amp;maptype=roadmap&#10;&amp;markers=color:blue%7Clabel:S%7C'+res.gps_lat+','+res.gps_long+'&amp;sensor=false" alt="" width="'+map_size_width+'" height="'+map_size_height+'" style="vertical-align:top;"></a>')));
                }
 
                img.after(ul);
            }
        }, 'json');
    });
});
</script>

수정해주신 코드로 문제가 잘 해결되었습니다. 

감사합니다.

안녕하세요. 보내주신 코드로 수정 잘 했습니다. 그런데 조리개 값이 출력이 되지 않는 것 같은데 어디를 수정해줘야하는지 궁금합니다.

아래가 자동으로 붙는 metadata 내용입니다. 

모델:NIKON D850 | 날짜:2021:02:25 08:16:56 | ISO:100 | 초점거리:160 | 노출시간:1/125

그럼 답변 기다리겠습니다.