이미지선택형 방명록 구현하기

 

방명록에 프로필이 아닌 사진을 선택하여 글을 작성하는 방법을 소개하고자 합니다.

이 방법은 13년도에 의뢰를 받아서 제작되었으며 XE 게시판 스킨에 대한 이해가 있어야 적용 가능합니다.

(개발자 ‘BJ람보’ 님의 도움으로 개선되었습니다)

 


 

해당 방법은 확장변수(사용자정의 – 단일선택)를 이용합니다.

* 방명록형 스킨 타입에 적용하셔야 하며 댓글에는 적용하실 수 없습니다.

 

1. JS파일을 다운로드 받습니다.

changetitlealt

파일을 받아 스킨 내에 원하는 위치에 넣어주고 해당 파일을 로드시켜 줍니다.

(type=”body” 는 삭제하시면 안됩니다)

<load target="changetitlealt.js"  type="body" />

 

2. 글을 작성하는 문서 내에 아래의 코드를 넣어줍니다.

{@ $image_array = array($module_info->image01,$module_info->image02,$module_info->image03,$module_info->image04,$module_info->image05,$module_info->image06,$module_info->image07,$module_info->image08,$module_info->image09,$module_info->image10);}

[수정할 부분]

$module_info->image01,$module_info->image02,$module_info->image03,$module_info->image04,$module_info->image05,$module_info->image06,$module_info->image07,$module_info->image08,$module_info->image09,$module_info->image10

<script type="text/javascript">
  function Change(value){ // 선택한 selectbox의 인덱스 번호에 따른 이미지 주소 선택
  switch(value){
    case 0 : imgsrc = "{$module_info->image01}"; break;
    case 1 : imgsrc = "{$module_info->image02}"; break;
    case 2 : imgsrc = "{$module_info->image03}"; break;
    case 3 : imgsrc = "{$module_info->image04}"; break;
    case 4 : imgsrc = "{$module_info->image05}"; break;
    case 5 : imgsrc = "{$module_info->image06}"; break;
    case 6 : imgsrc = "{$module_info->image07}"; break;
    case 7 : imgsrc = "{$module_info->image08}"; break;
    case 8 : imgsrc = "{$module_info->image09}"; break;
    case 9 : imgsrc = "{$module_info->image10}"; break;
    case 10 : imgsrc = "{$module_info->image11}"; break;
    default : imgsrc = "{$module_info->image01}"}document.all.imgpro.src=imgsrc; //선택한 이미지 변경, 기본은 1
  }
</script>

[수정할 부분]

$module_info->image**

document.all.imgpro.src=imgsrc;

 

3. 글을 작성하는 Form 내에 아래의 코드를 넣어줍니다.

* ID/클래스는 다른 모듈/애드온/스킨 등과 충돌이 되지 않도록 값을 조정합니다.

<img src="{$module_info->image01}" id="imgpro" />

<div class="exForm" cond="count($extra_keys)" >
  <block loop="$extra_keys=>$key,$val">{$val->getFormHTML()}</block>
</div>

[수정할 부분]

id=”imgpro

class=”exForm

 

* exForm 값을 변경하실 경우 JS파일 내에 exForm 을 찾아 변경하시길 바랍니다.

 

4. skin.xml

이미지를 등록할 수 있도록 xml을 구성하고 사용할 이미지를 등록합니다.

<var name="image01" type="image">
  <title xml:lang="ko">선택이미지01</title>
  <description />
</var>

[수정할 부분]

name=”image01

 

5. 게시판 설정 – 사용자 정의

스크린샷 2017-11-17 오전 9.03.53.png

사용자 정의 이름, 입력항목 이름은 사용자에 맞게 정의하시면 됩니다.

형식은 단일 선택(single select) 하셔야 합니다.

이미지 선택을 해야하니 필수항목 [예]로 하셔야 합니다.

기본값은 스킨상에 구현해놓은 개수 미만(ex. 10개 미만)으로 정의하시면 됩니다.

 

6. 글 등록 후 이미지 출력 부분

반복문 외부에 아래의 코드를 입력합니다.

{@ $getExtraVars = $oDocument->getExtraVars();}
<!--@foreach($getExtraVars[1] as $key => $val)-->
  <!--@if ($key == 'default') -->
    {@ $AA = $val}
    {@ $photo = explode(",", $AA)}
    {@ $img01 = $photo[0];
       $img02 = $photo[1];
       $img03 = $photo[2];
       $img04 = $photo[3];
       $img05 = $photo[4];
       $img06 = $photo[5];
       $img07 = $photo[6];
       $img08 = $photo[7];
       $img09 = $photo[8];
       $img10 = $photo[9];
       $img11 = $photo[10];}
  <!--@end-->
<!--@end-->

[수정할 부분]

{@ $AA = $val}

{@ $photo = explode(“,”, $AA)}

 

반복문 내부에 아래의 코드를 입력합니다.

<img src="{$module_info->image01}"|cond="$oDocument->getExtraValueHTML(1) == $img01" src="{$module_info->image02}"|cond="$oDocument->getExtraValueHTML(1) == $img02" src="{$module_info->image03}"|cond="$oDocument->getExtraValueHTML(1) == $img03" src="{$module_info->image04}"|cond="$oDocument->getExtraValueHTML(1) == $img04" src="{$module_info->image05}"|cond="$oDocument->getExtraValueHTML(1) == $img05" src="{$module_info->image06}"|cond="$oDocument->getExtraValueHTML(1) == $img06" src="{$module_info->image07}"|cond="$oDocument->getExtraValueHTML(1) == $img07" src="{$module_info->image08}"|cond="$oDocument->getExtraValueHTML(1) == $img08" src="{$module_info->image09}"|cond="$oDocument->getExtraValueHTML(1) == $img09" src="{$module_info->image10}"|cond="$oDocument->getExtraValueHTML(1) == $img10"  src="대체이미지"|cond="!$oDocument->getExtraValueHTML(1)" id="imgpro" />

[수정할 부분]

해당 부분은 사용할 이미지 수량에 맞춰 코드를 변경해 주셔야 합니다.

“대체이미지” 는 말 그대로 아무것도 선택안할시(랜덤 제외) 선택되는 이미지입니다.

id=”imgpro” 는 3번 부분과 동일한 ID값이어야 합니다.

 

7. 랜덤 이미지 선택 구현(옵션)

# 추가되는 코드

{@ $random = mt_rand(0,$module_info->image_su);}

위의 코드는 이미지선택 액션이 있는 곳에 넣으시면 됩니다.

<var name="image_su" type="text">
  <title xml:lang="ko">랜덤이미지수</title>
  <description />
</var>

위의 코드는 스킨 xml 문서에 넣으시면 됩니다.

 

[수정할 부분]

{@ $random = mt_rand(0,$module_info->image_su);}

<var name=”image_su” type=”text”>

 

# 기본코드수정

<img src="{$image_array[$random]}"  id="imgpro" />

<div class="exForm" cond="count($extra_keys)" >
  <block loop="$extra_keys=>$key,$val">
    <script type="text/javascript" cond="$module_info->image_su != '0'">
      document.getElementsByName('extra_vars{$key}')[0].selectedIndex = '{$random}';
      document.getElementsByName('extra_vars{$key}').fireEvent("onChange");
    </script>
  </block>
</div>

[수정할 부분]

<img src=”{$image_array[$random]}”  id=”imgpro” />

<div class=”exForm” cond=”count($extra_keys)” >

<script type=”text/javascript” cond=”$module_info->image_su != ‘0’“>

document.getElementsByName(‘extra_vars{$key}’)[0].selectedIndex = ‘{$random}’;

 


 

[수정할 부분] 으로 수정해야할 부분을 따로 적어놓긴 했습니다만 기본적이며 고정적인 부분입니다.

아이디/클래스 및 변수명도 사용자에 맞춰서 수정하여 사용하시면 됩니다.

예시는 10개로 작성되었지만 원하는 수량에 맞춰 늘려서 사용하시면 됩니다.

(스킨 수정하실 정도의 능력자시라면 충분히 쉽게 하실 수 있습니다)

첫번째 확장변수를 이용한 방식이므로 잘 확인하시길 바랍니다.

 

select.gif

제대로 동작하게 되면 위와 같이 출력됩니다.

댓글 남기기