view 페이지에 이미지를 세로로 한줄이 아닌 바둑판식으로 출력되게 하고자 합니다
본문
제목 처럼 view 페이지에 이미지를 세로로 한줄이 아닌 바둑판식으로 출력되게 하려고 아래와 같이 view 페이지의 소스를 변경하여 바둑판식으로 출력이 되는데 아래 회색으로 색칠한 것처럼 출력이 되어야 하는데 황토색으로 칠한 부분 처럼 이미지가 없는 div 태크가 생깁니다. 없애는 방법이 어떻게 될까요?
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
foreach($view['file'] as $view_file) {
echo get_file_thumbnail($view_file);
}
}?> 이와 같이 되어 있는 곳을 아래와 같이 div 테그를 이용하여 변경하였을때~~
궁금한 것이 있어 질문올립니다.
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
foreach($view['file'] as $view_file) {
echo "<div class='grid-item ' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>\n";
echo get_file_thumbnail($view_file);
echo "</div>\n";
}
}?>
위 처럼 소스를 변경하고 출력한다음 소스보기하면 아래와 같은데
<div class='grid-item mt-0' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'></div>
<div class='grid-item mt-0' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>
<a href="https://beomsu.com/bbs/view_image.php?bo_table=gallery&fn=32962373_UexnbtFa_b10ad0c277f203aa5daf74e73ff4014a07686b98.jpg" target="_blank" class="view_image"><img src="https://beomsu.com/data/file/gallery/32962373_UexnbtFa_b10ad0c277f203aa5daf74e73ff4014a07686b98.jpg" alt="" width="2000" height="1500" ></a>
</div>
<div class='grid-item mt-0' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>
<a href="https://beomsu.com/bbs/view_image.php?bo_table=gallery&fn=32962373_UAdusQfz_95feec8337c5ec6498e4af727d1afbd6d7d06265.jpg" target="_blank" class="view_image"><img src="https://beomsu.com/data/file/gallery/32962373_UAdusQfz_95feec8337c5ec6498e4af727d1afbd6d7d06265.jpg" alt="" width="1500" height="2000" ></a>
</div>
<div class='grid-item mt-0' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>
<a href="https://beomsu.com/bbs/view_image.php?bo_table=gallery&fn=32962373_FlmNMJ2R_00a4da788b02aeadda888596b87e48cf4bcda038.jpg" target="_blank" class="view_image"><img src="https://beomsu.com/data/file/gallery/32962373_FlmNMJ2R_00a4da788b02aeadda888596b87e48cf4bcda038.jpg" alt="" width="2000" height="1500" ></a>
</div>
<div class='grid-item mt-0' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>
<a href="https://beomsu.com/bbs/view_image.php?bo_table=gallery&fn=32962373_UxTAuD6z_7a68981960ee08a681153e20580d2f45f1eb0312.jpg" target="_blank" class="view_image"><img src="https://beomsu.com/data/file/gallery/32962373_UxTAuD6z_7a68981960ee08a681153e20580d2f45f1eb0312.jpg" alt="" width="1500" height="2000" ></a>
</div>
위에서 노란 부분 안나오게 하려면 어떻게 하면 될까요?
답변 8
황토색이 출력되는 부분은
데이터가 있는것만 출력을 하게끔 수정을 해주시면 될듯합니다.
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
foreach($view['file'] as $view_file) {
if( !$view_file ) continue; //데이터가 없는것은 패스하고 그다음 로직으로 이동
echo "<div class='grid-item ' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>\n";
echo get_file_thumbnail($view_file);
echo "</div>\n";
}
}?>
세로로 쭉우욱 나오는 것을 가로로 나오는 부분은 css파일을 수정을 해주시면 좋을듯 한데,
제가 그누보드의 모든 스킨을 파악한 상태가 아니라서 이렇게 수정을 해주시면 됩니다.라고 콕찝어서 설명드리기 힘듭니다
^^; (사실 그누보드에 대해서 잘모릅니다 ㅋㅋ)
그 부분은 div 정렬에 대해서 구글링 해보시면 좋을것 같습니다^^
답변 감사합니다.. 그런데 데이터가 없는 곳이 없는데도 불구하고 황토색부분이 소스보기에서 생기네요..
바둑판처럼 출력은 masonry js 소스로 잘되고 있읍니다.. 그런데 정열부분에서 황토색 부분의 div 태그가 생겨서 약간 보기가 싫어서요..
아~ 그리고
if( !$view_file ) continue; //데이터가 없는것은 패스하고 그다음 로직으로 이동 을 넣고 해봐도 같은 결과가 나오네요.. 첨부이미지에서 빨간 동그라미 부분이 안맞아서 소스보기하니 황토색 부분의 div 태그가 있어서요~~.하여간 다시 한번 감사드립니다.
로직의 느낌만 봐주시면 됩니다^^;
print_r($view['file']); 로 디버깅을 해보셔서 황토색되는 부분이 어떤값을 가지고 있는지 찾아보시면 될것같습니다.
그 패턴을 잡아내서 그 부분만 패스하게끔 해주시면 될것 같습니다.
print_r($view['file']); 로 디버깅 하는 방법은 php 초보라 알지못해서 못해보았습니다만 황토색 부분은 그냥 div 태그만 있습니다. 데이터는 없구요.. 그런데 스타일지정 때문에 공백의 자리를 차지하네요~~
print_r($view['file']); 찍어서 보여주시면 원인을 해결해 드릴수 있을듯 합니다.
이 코드는 $v_img_count = count($view['file']); 이코드 바로 아래 붙여주시면 될듯합니다.
<?php
// 파일 출력
$v_img_count = count($view['file']);
print_r($view['file']);
if($v_img_count) {
// echo "<div class='grid' id=\"bo_v_img\">\n";
echo "<div class='grid'>\n";// 이미지 여백 때문에 id=\"bo_v_img\" 제거함
foreach($view['file'] as $view_file) {
if( !$view_file ) continue; //데이터가 없는것은 패스하고 그다음 로직으로 이동
echo "<div class='grid-item ' style='border: 10px solid hsla(0, 0%, 0%, 0.0);'>\n";
echo get_file_thumbnail($view_file);
echo "</div>\n";
}
echo "</div>\n";
}?>
위처럼 코드를 작성하고 실행 시켰더니 첨부이미지와 같이 출력되네요...바둑판식으로 안되고요...
아래에 작은 썸네일 이미지도 함께 출력 되었습니다
if( !$view_file ) continue; 코드를
if( !trim($view_file->href) ) continue; 또는 if( !trim($view_file[href]) ) continue;
이렇게 시도 부탁드리겠습니다.
만약 안되신다면
--------------------------
print_r($view_file);
echo "</br>";
---------------------------
이코드를 foreach($view['file'] as $view_file) 안에다 붙여주셔서 확인 부탁드립니다.
if( !trim($view_file[href]) ) continue;
위 코드를 넣었더니 첨부한 그림의 상단처럼 깔끔하게 정열 되었네요..~~대단하십니다~~아주 감사합니다.. 속이 시원합니다...
잘되셨다니 다행입니다. 채택부탁드립니다.
요즘 부업을 찾고 있어서 레벨올려서 제작의뢰 게시판을 이용을 하려고 합니다^^
채택 부탁드립니다 ~~^^ 좋은밤되세요~
혹시 가능하다면 한수 더 알려 주실수 있나요~?
echo get_file_thumbnail($view_file);
위 코드부분이 원본이미지를 팝업창으로 띠우는 부분인듯한데요...
위 코드부분을 <a href ="원본이미지주소">echo get_file_thumbnail($view_file); </a> 와 같은 형식으로 작성하여 원본 이미지를 띠우려면 원본이미지주소 부분을 어떻게 넣으면 되는지도 좀 알려주실수 있나요~ 염치가 좀 없지만요~ 현재는 클릭하면 팝업창으로 잘 뜨지만 fancy box라는 것으로 구현해보려구요~
제가 이 스킨에 대해서 잘모르지만
주신 로그기반으로 설명을 드리겠습니다.
아래 코드가 원본 경로일겁니다.
$view_file[href]."/".$view_file[source]
echo"<a data-fancybox='gallery' data-caption='$list[$i]['subject']' href=".$view_file[href]."/".$view_file[source].">";
echo get_file_thumbnail($view_file);
echo"</a>";
위처럼 했는데 아무 반응이 없네요~ 클릭하면 원본이미지가 팝으로는 잘 뜹니다
그리구
echo"주소: $view_file[href]/$view_file[source]";
위와 같이하고 출력되는 주소를 보니
https://beomsu.com/bbs/download.php?bo_table=gallery&wr_id=6&no=0&page=10/20210413_170235.jpg 이렇게 나오는데 인터넷 브라우져 주소창에 복사해 넣고 실행하면 이미지가 안뜨네요 그리구 팝업으로 $url1 과 $url2 를 지정해 주세요 라고 메세지가 뜹니다..
이게 원본이미지 경로인가 봅니다.
$view_file[path]."/".$view_file[source]
echo"주소: $view_file[href]/$view_file[source]";
로 하고 실행하면 주소가 아래와 같이 뜹니다만
https://beomsu.com/data/file/gallery/20210413_165256.jpg
위 주소를 크롬에 주소 입력하고 실행하면 오류가 뜨고 이미지는 안보입니다
아래와 같이 뜨고 원본이미지가 안뜨는 것을 보니 컴퓨터 상의 주소인가봅니다.
요청한 URL
https://beomsu.com:443/data/file/gallery/20210413_165256.jpg
실제 경로
C:\g54151\data\file\gallery\20210413_165256.jpg
