오션갤러리 썸네일 모바일출력, 최신글뷰 문제...

안녕하세요. 말씀 정말 감사합니다. 어제 답변글 보고 적용을 시도했보았는데요..3번(모바일 해상도)은 해결이 되었는데

1,2번이 잘 수정이 안되네요..

사이트는 WWW.SUMDAY.NET 이고 STORE 카테고리에서 오션을 쓰고 있습니다.

 

1. PC상에 썸네일 크기와 배치는 제가 원하는 사이즈로 두고 모바일에서만 한줄에 2개씩 배치하고 싶습니다.

예전까지는 썸네일 넓이를 적당히 142정도로 통일하니 모바일에서 2개로 나오길래 그대로 두었는데 PC에서는 이크기로 보려니 너무 작더라구요..ㅠ

알려주신 아래내용에서 넓이와 높이만 제가 원하는 사이즈로 바꾸고 대시보드에서 추가해보니

pc화면에서 백그라운드이미지가 틀어지고 간격이 너무 넓어집니다..  모바일에서는 2개가 나오긴하나 썸네일끼리 서로 포개지는등 난리가 났네요 흑....

#kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { width: 40%; }
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail img { display: inline; margin: 0; width: 213px; height: 300px; vertical-align: middle; max-width: 100%; }

 

위 내용을 추가하니 pc화면상에서는 간격이 너무 넓어지면서 한줄에 3개정도 나와야할 사이즈인데 2개만 나오구요..

PC화면에서는 기본 간격을 유지하며  썸네일이 크게 나와도 모바일에서만 작게.. 한줄에 2개씩 출력되는 방법좀 부탁드립니다... 가로폭을 140정도로 줄여놓으면 되는데 이사이즈는 pc화면에서 보기에 너무 작네요.. 

 

 

2. 최신글뷰 게시판을 실행하면 기본 오션갤러리와 같은모양으로 출력하고 싶다고 질문드렸었는데요. 이것도 말씀하신 내용대로 수정했는데 다르게 보여집니다..

대시보드도 수정하고 latest.php 도 수정했습니다만...왜이런지 알수 있을까요..

STORE 라는 상위 카테고리를 바로 클릭하면 하위에 MAN, WOMEN 게시판의 최신글이 전부 같은 모양으로 나오게끔 하고 싶습니다.

 

 

3. 제목이 길어지면 정렬이 흐트러집니다.

제사이트에서 썸네일 아래에 들어가는 제목이 길어지니 썸네일 자체가 위쪽으로 흐트러지네요..이문제는 어떻게 해야할까요...

제목이 다보이면서도 썸네일이 흐트러지지 않게 수정이 가능할까요...

그리고 오션갤러리 이전 버전은 제목 폰트 굵기가 지금보다 조금 두꺼웠는데...그렇게 하려면 어디를 수정해야하는지 알려주시면 감사하겠습니다...

 

연속으로 질문해서 죄송합니다.

기초적인건데 잘 모르는 부분이 많네요... 부탁드리고 항상 감사합니다.

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

    홈페이지 주소 알려주셔서 다시 확인해봤습니다.

     

    1. 이전 답변에서 알려드린 코드는 지워주세요.

    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { width: 40%; }
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail img { display: inline; margin: 0; width: 220px; height: 155px; vertical-align: middle; max-width: 100%; }

     

    2. 아래 코드를 CSS 쪽에 적용해 보세요. ( 모바일 화면에서만 한 줄에 2개씩 배치하는 코드입니다. )

    @media screen and (max-width: 600px) {
    	#kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { width: 45%; display: block; float: left; padding: 0 0 15px 0; margin: 0 2.5%; }
    	#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail { width: 100%; }
    }

     

    3. STORE 페이지에 최신글뷰(모아보기) 숏코드를 추가하셨는지요?

    그렇다면 우선 스킨을 먼저 바꿔주셔야 합니다.

    워드프레스 관리자 -> KBoard -> 최신글뷰(모아보기) -> 선택 -> 최신글 스킨 선택 설정에서 ocean-gallery 를 선택해주세요.

     

    그 다음 /wp-content/plugins/kboard/skin/ocean-gallery/latest.php 파일을 수정해주셔야 합니다.

    아래 코드는 기본 오션 갤러리 스킨의 코드입니다.

    <div id="kboard-ocean-gallery-list">
    	<!-- 리스트 시작 -->
    	<div class="kboard-list">
    	<?php while($content = $list->hasNextNotice()): $resize_img_src = $content->getThumbnail(440, 310);?>
    		<div class="kboard-gallery-item">
    			<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
    				<div class="kboard-gallery-thumbnail">
    					<?php if($resize_img_src):?>
    					<img src="<?php echo $resize_img_src?>" alt="">
    					<?php else:?>
    					<div class="kboard-no-image"><i class="icon-picture"></i></div>
    					<?php endif?>
    					<div class="kboard-gallery-foreground"><img src="<?php echo KBOARD_URL_PATH . '/skin/ocean-gallery/images/over-foreground.png'?>" alt=""></div>
    					<div class="kboard-gallery-username"><?php echo date("Y/m/d", strtotime($content->date))?> by. <?php echo $content->member_display?></div>
    				</div>
    				<div class="kboard-gallery-title">[<?php echo __('Notice', 'kboard')?>] <?php echo $content->title?></div>
    			</a>
    		</div>
    	<?php endwhile?>
    	<?php while($content = $list->hasNext()): $resize_img_src = $content->getThumbnail(440, 310);?>
    		<div class="kboard-gallery-item">
    			<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>">
    				<div class="kboard-gallery-thumbnail">
    					<?php if($resize_img_src):?>
    					<img src="<?php echo $resize_img_src?>" alt="">
    					<?php else:?>
    					<div class="kboard-no-image"><i class="icon-picture"></i></div>
    					<?php endif?>
    					<div class="kboard-gallery-foreground"><img src="<?php echo KBOARD_URL_PATH . '/skin/ocean-gallery/images/over-foreground.png'?>" alt=""></div>
    					<div class="kboard-gallery-username"><?php echo date("Y/m/d", strtotime($content->date))?> by. <?php echo $content->member_display?></div>
    				</div>
    				<div class="kboard-gallery-title"><?php echo $content->title?></div>
    			</a>
    		</div>
    	<?php endwhile?>
    	</div>
    	<!-- 리스트 끝 -->
    </div>


    http://sumday.net 홈페이지 확인해보니 오션 갤러리 스킨을 수정하셨는데요.

    그래도 적용하셔도 괜찮지만, 수정하신 list.php 파일의 내용을 latest.php 파일에 넣어주시면 됩니다.

    그리고

    <?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>

    위 코드를 찾아서 아래 코드로 교체해주시면 링크가 정상 동작할겁니다.

    <?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>

     

    4. 제목 정렬이 깨지는건 잘 모르겠습니다.

    아래 CSS 코드를 추가하시면 리스트에서 제목을 굵게 표시할 수 있습니다.

    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-title { font-weight: bold; }


    저희 답변 대로 적용해보시고 추후 제대로 적용이 안된 부분이 있다면 다시 답변 드리겠습니다.

    고맙습니다.

  • 대시보드에서 #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail img 부분에 height: 100% 까지 적용하니 완벽하게 딱맞아떨어지네요.

    정말 너무나 친절한 답변에 감사드립니다.

    답변 덕분에 어디가 문제였는지 찾아냈습니다. 정말 너무너무나 감사드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기