웹마스터 팁
이미지 여러개 등록시 공백 팁입니다. 10.07.29 10:05 수정
2010.07.25 22:58
안녕하세요. 스카이피아입니다.
처음으로 XE 홈페이지에 팁을 올리는거 같아요.
이미지 여러개를 한번에 본문 삽입시 작은 사이즈의 이미지는
옆으로 붙어 나옵니다.
큰 이미지는 밀려서 밑으로 나오지만 이미지와 이미지 사이에 글을 쓸수가 없습니다.
이미지 클릭하고 오른쪽으로 한번 누른뒤 엔터 쳐주면 쓸수 있지만
번거로운 작업이죠.
반드시 먼저 백업해주세요!
modules/editor/tpl/js/uploader.js 파일을 좀 손봐주시면 쉽게 해결됩니다.
temp_code += " />\r\n"; 이 부분을 찾아 가고 아래 내용으로 고쳐주세요.
temp_code += " /></p>"; 이렇게요.
그리고 이미지 등록을 해보시면 이미지와 이미지 사이에 한칸이 생겨있는걸 보실 수 있습니다.
10.07.29 10:05 수정내용
위에 방법은 파폭, 크롬에서 적용이 안된다는걸 확인했습니다. 확인 결과 파폭이나 크롬에서는 </p> 태그를 사용해도
내용이 없으면 그냥 채워지는거 같아 검색좀 해보니 레이어를 사용해야 한다고 하더군요.
그래서 브라우저 체크후 익스플로러일때는 위에 방식을 사용하고 그외의 브라우저 일때는 레이어안에 br 태그를
넣어서 해결하였습니다.
temp_code += " />\r\n"; 이 부분을 아래처럼 고쳐주시면 됩니다.
if (navigator.appName == 'Microsoft Internet Explorer'){
//익스플로러일때
temp_code += " /></p>";
}
else { //기타 다른 브라우저
temp_code += " /><div><br></div>";
}
테스트 브라우저는 익스플로러8, 크롬5, 파이어폭스 3.6.8 입니다.
익스에서도 레이어에 br 넣는게 가능하지만 익스에서는 두칸이 뛰어지고 다른거에서는 한칸이 뛰어지기 때문에
저렇게 브라우저 체크를 했구요.
두칸, 한칸 상관 없으시다면 temp_code += " /><div><br></div>"; 이것만 넣으셔도 됩니다.
댓글 15
-
스카이피아
2010.07.25 22:59
-
Gekkou
2010.07.26 23:55
필요했던 팁인데 알려주셔서 고맙습니다.
그런데 실제로 해보니 잘되는건지 잘 모르겠습니다.
자동으로 아래줄로 내리기는 하는데, 한줄 더 띄어지지는 않는듯 합니다.
-
스카이피아
2010.07.27 09:34
현재는 글 작성시에는 한칸이 띄어져 있지만 글 등록을 하게되면 다시 붙습니다.
만약 작성시에 띄어진 공간에 내용을 입력하게 되면 그대로 그곳만 띄어진채로 등록이 가능합니다.
-
DRUNKEN
2010.07.28 21:52
저는 말씀하신대로 modules/editor/tpl/js/uploader.js 파일을 본문처럼 변경시켜도 변화가 없습니다.
역시나 작은 이미지는 계속 옆으로 붙어 나옵니다. 큰 이미지도 한줄 띄어지지도 않구요..
게시판은 Board EX 쓰고 있습니다. 필요한 기능인데 아쉽네요..
-
DRUNKEN
2010.07.28 21:56
어라.. 원인이 브라우저인것 같습니다. 위의 경우 파이어폭스로 테스트하였지만.. IE8로 해보니 한줄 띄어지는군요.
파이어폭스에서는 왜 안되는걸까요? 여러브라우저가 됬으면 정말 좋을텐데 아쉽네요~
-
DRUNKEN
2010.07.29 13:11
수정 감사합니다. 이제 파이어폭스에서도 되는군요 ~
-
스카이피아
2010.07.30 11:28
현재까지 문제가 발견되지 않고 있습니다.
매번 댓글 확인할 수 없으니 문제 발견하시면 쪽지 부탁드려요~
-
Song.
2010.07.31 01:12
멋진 내용입니다. 내용입력할때 애먹은 적이 한두번이 아니엇는데 말이죠~
-
가시밭
2011.05.03 03:09
정말 원하던 팁이예요.
감사합니다 ^^ -
konbau
2011.06.01 01:09
고맙습니다.꽤 불편했었는데....잘 해결이 되었습니다 -
엘카
2011.06.01 09:01
core 업데이트하면 다시 수정해야 되는게 번거롭겠네요.
게시판 상단(or 게시판하단 or 애드온 or 레이아웃 등)에 CSS 구문을 넣으면 마크업이나 유지보수면에서 더 편리할 것 같습니다.
<style type="text/css">
.xe_content img {
display:block; /* 이미지가 작을경우 옆으로 정렬되지 않고 항상 줄바꿈. (텍스트도 옆으로 정렬되지 않고 줄바뀜) */
margin-bottom:15px; /* 이미지 아래에 15px 여백을 추가 */
}
</style> -
Firstlove
2011.06.01 11:59
.xe_content img 이것은 게시판 본문을 열었을 때만 적용되는 것이 아닌가요?...
에디트로 게시물 작성중에는 효력이 없는 걸로 아는데...아닌가요? -
엘카
2011.06.03 08:26
에디터로 작성할 때는 스타일이 적용되지 않겠네요. -
감자가조아
2011.06.08 18:35
감사합니다.
css로 적용하니 정말 편하게 사용되네요. -
노란붕어
2012.06.21 16:44
modules/editor/tpl/js/uploader.js 에서
temp_code += " />\r\n"; 이 부분을
temp_code += " /><br/><br/>";
이렇게 바꿔주시면 공백이 나오더라구요. 익스플로러랑 파이어폭스랑 둘다 잘되요
지금 큰사이즈와 작은사이즈 모두 해봤는데 혹시나 문제 생긴다면 알려주세요~
쪽지로 알려주시면 더 빠르게 확인 가능하답니다^^