XpressEngine에 관련 내용에 대해서 이야기 합니다.
글 수 193
가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 간나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라위와 같은 식으로 본문에 이미지를 좌,우측에 붙게해서 자연스러운 글씨는 사용가능하지만
div 같이 특정 메뉴등을 추가해서는 안되죠.
이걸 본문안에도 div 를 사용할 수 있게 해주는 방식을 알려드릴까 합니다.
먼저 view_document.html 에 아래 코드를 삽입하세요.
-- 기본스킨 기준입니다. --
경로 : ./modules/board/skins/xe_board/view_document.html
<div class="readBody">
<div class="contentBody">
<!--@if($oDocument->isSecret() && !$oDocument->isGranted())-->
<!--%import("filter/input_password.xml")-->
<div class="secretContent">
<form action="./" method="get" onsubmit="return procFilter(this, input_password)">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="page" value="{$page}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<div class="title">{$lang->msg_is_secret}</div>
<div class="content"><input type="password" name="password" id="cpw" class="inputTypeText" /><span class="button"><input type="submit" value="{$lang->cmd_input}" accesskey="s" /></span></div>
</form>
</div>
<!--@else-->
<div id="임의 특정ID_{$oDocument->document_srl}" class="임의 className">입력될 내용</div>
{$oDocument->getContent()}
<!--@end-->
<div class="clear"></div>
</div>
$oDocument->document_srl를 입력해서 블로그나 다른 처리시 충돌이 나지 않게 합니다.<div class="contentBody">
<!--@if($oDocument->isSecret() && !$oDocument->isGranted())-->
<!--%import("filter/input_password.xml")-->
<div class="secretContent">
<form action="./" method="get" onsubmit="return procFilter(this, input_password)">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="page" value="{$page}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<div class="title">{$lang->msg_is_secret}</div>
<div class="content"><input type="password" name="password" id="cpw" class="inputTypeText" /><span class="button"><input type="submit" value="{$lang->cmd_input}" accesskey="s" /></span></div>
</form>
</div>
<!--@else-->
<div id="임의 특정ID_{$oDocument->document_srl}" class="임의 className">입력될 내용</div>
{$oDocument->getContent()}
<!--@end-->
<div class="clear"></div>
</div>
-----------------------
CSS의 경우는 아래 해당하는 내용을 경로상의 파일에 아무(알맞은) 위치에 추가해주세요.
경로 : ./modules/board/skins/xe_board/css/common.css
.임의 className {float:right; width:200px; height:200px;}
그밖에 임의 className 안에서 따로 사용할 스타일을 만드셔도 무관합니다.
---------------
일단 이 두개로 끝났습니다.
헌데, 위에까지만 해놓으면 이미지 사진이 들어가고 이미지가 클경우에 문제가 생깁니다.
원래 본문 넓이보다 이미지가 크면 zbXE 기본 애드온인 리사이즈 애드온으로 이미지가 줄죠
헌데 그렇게 줄어도 만들어 놓은 div로 인해서 균형이 깨지고 맙니다.
이 부분을 자연스럽게 div의 가로세로 크기에 맞춰서 알맞게 리사이즈를 수정해주는 내용도 추가해주세요.
경로 : ./addons/resize_image/js/resize_image.js
resizeImageContents() 함수 중 아래의 내용을 삽입,수정하세요. (약 29번째 줄 부터...)
// if(parent.parentNode) xWidth(parent, xWidth(parent.parentNode));
// parent.style.width = '100%';
// parent.style.overflow = 'hidden'; <- 이곳 주석 처리 해주세요.
var parent_width = xWidth(parent);
if(parent.parentNode && xWidth(parent.parentNode)<parent_width) parent_width = xWidth(parent.parentNode);
var obj_width = xWidth(obj);
var obj_height = xHeight(obj);
var rgExp = /\d+/;
var chr_var = parent.className.match(rgExp);
var citem = {};
citem.id = xGetElementById('임의 특정ID_'+chr_var);
if(citem.id){
citem.width = citem.id.offsetWidth;
citem.height = citem.id.offsetHeight;
citem.top = citem.id.offsetTop;
citem.left = citem.id.offsetLeft;
citem.down = citem.top + citem.height;
parent_width -= (obj.offsetTop > citem.down)? 0:citem.width;
}
// 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌)
if(obj_width > parent_width - 2) {
중략.....
위와 같이 내용을 추가하게 되시면 만들어 놓으신 div의 사이즈를 더 계산해서 이미지 파일을 리사이징 합니다.// parent.style.width = '100%';
// parent.style.overflow = 'hidden'; <- 이곳 주석 처리 해주세요.
var parent_width = xWidth(parent);
if(parent.parentNode && xWidth(parent.parentNode)<parent_width) parent_width = xWidth(parent.parentNode);
var obj_width = xWidth(obj);
var obj_height = xHeight(obj);
var rgExp = /\d+/;
var chr_var = parent.className.match(rgExp);
var citem = {};
citem.id = xGetElementById('임의 특정ID_'+chr_var);
if(citem.id){
citem.width = citem.id.offsetWidth;
citem.height = citem.id.offsetHeight;
citem.top = citem.id.offsetTop;
citem.left = citem.id.offsetLeft;
citem.down = citem.top + citem.height;
parent_width -= (obj.offsetTop > citem.down)? 0:citem.width;
}
// 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌)
if(obj_width > parent_width - 2) {
중략.....
또한 height 크기까지 계산해서 div 와 가로상에 걸리지 않는 경우는 원래 리사이징을 합니다.
댓글에도 이 기능을 비슷하게 적용하셔도 무관합니다. (단 div를 댓글 본문 출력 내용 바로 위에 넣어주셔야 합니다.)
위와 같이 해두면 div 내용안에 좌,우측에 넣을 위젯 등을 본문안에 넣어서 3단 위젯 이나 위젯보다 본문이 길 경우
좌,우측 메뉴가 무의미하게 휭~ 하게 보이지 않아서 좋은 것 같습니다.
