Q&A

#2 게시글과 댓글란의 서로다른 사진 업로드 크기 조정에 대해서

2024.09.29 04:37
129
0
CMS/프레임워크 Rhymix 2.1
개발 언어 PHP 8.3

안녕하세요.. 예전에 동일한 제목으로 질문을 올려드렸습니다. 

 아직 해결을 못했기에 조그마한 팁을 주시면 감사하겠습니다.ㅜㅜㅜㅜㅜ

 

저의 목표는

 댓글란의 에디터는 본문에디터와 다르게, 좀더 작은 사이즈의 사진만 올라오도록 값을 달리하여 리사이징되도록 하는것입니다.

 *현재 업로드 버튼을 눌러서 이미지 업로드하는 리사이징 크기 조정은 성공하였습니다. 

 ****1f62d.png하지만, 에디터 텍스트 범위내에 이미지를 붙여넣을때 나타나는 리사이징 크기 조정 구현은 실패하고있습니다. 

 

 

제가 시도한 방법은 다음과 같습니다. 

1. 실패)  에디온 작성 ( 파일업로드 이벤트를 가로채서 커스텀 업로드 로직을 구현 , 후킹에는 성공하나, 원하는 사이즈로 리사이징 실패.. ) 

2. 실패)  modules/file/file.controller.php  /  의 코어파일 수정 ( 댓글용 class에 따른 다른크기의 리사이징 ) 

 

 [참조]  게시글과 댓글란의 서로다른 사진 업로드 크기 조정에 대해서 

  https://xetown.com/questions/1838003


제가 파악한 사진 리사이징 로직정보는 다음과같습니다. (만약에 제 인식이 틀렸다면 지적부탁드립니다.)

 

 1. /modules/file/tpl/upload_config.html 및 /modules/file/tpl/file_module_config.html 파일에서 관리자가 max_image_width 값을 입력하고 제출합니다. 예를 들어, 500을 입력할 수 있습니다.
 2. /modules/file/file.admin.controller.php에 제출된 max_image_width 값을 받아와 $config->max_image_width에 저장합니다. 이 과정에서 Context::get() 함수를 사용하여 입력된 값을 가져옵니다.
 3. /modules/file/file.controller.php에서 $config->max_image_width 값을 호출하여 이미지 리사이징 로직에서 사용합니다. 

 4. common/js/plugins/jquery.fileupload/js/main.js는 에디터에 붙여넣기를 할때 이미지 HTML을 생성합니다. 
if (filename.match(/\.(gif|jpe?g|png|webp)$/i) && opt.autoinsertTypes.image) {
    temp_code = self.generateHtml($container, result);
}
....
html = '<img src="' + file.download_url + '" alt="' + file.source_filename + '"'
    + ' editor_component="image_link" data-file-srl="' + file.file_srl + '" />';
....
editor.insertHtml(html, 'unfiltered_html');

 

5. modules/editor/skins/ckeditor/js/editor.js    * Legacy function to get the container element for CKEditor.
function _getCkeContainer(editor_sequence) {
    return $('#ckeditor_instance_' + editor_sequence);
}

 

리사이징 프로세스는 다음과 같이 작동할 것으로 추정됩니다:

1. 에디터에서 사용자가 이미지를 업로드하거나 붙여넣기 합니다.
2. 이미지는 서버로 전송됩니다.
3. file.controller.php에서 이미지 을 처리합니다:

    설정된 max_image_width와 비교하여 이미지 크기를 확인합니다.
    필요한 경우 이미지를 리사이징합니다.
4. 리사이징된 이미지를 저장하고 URL을 반환합니다.

5. 클라이언트 측 스크립트 (예: main.js)는 서버에서 반환된 URL을 사용하여 이미지를 에디터에 삽입합니다.
 CKEditor는 이 과정에서 직접적으로 리사이징을 수행하지 않고, 대신 서버에서 처리된 이미지를 받아 표시하는 역할을 합니다.
 

이것을 토대로,  ckeditor_comment라는 스킨을 따로 생성해서,  클래스는 다음과 같이 바꾸었습니다.
  기존 class="rx_ckeditor"
  댓글용 class="rx_ckeditor_comment"

 

잘 부탁드립니다. ㅜㅜ

 

 

댓글 2

  • 2024.10.01 01:56 #1839741

    애드온 작성이 정석인데, 어디에서 막히던가요?

     

    1. 업로드한 파일을 처리하기 전, 즉 before_module_proc 시점에 끼어듭니다.

     

    2. 현재 act가 procFileUpload인지 확인합니다. 아니면 리턴~

     

    $current_act = Context::get('act');

    if ($current_act !== 'procFileUpload') {

        return;

    }

     

    3. 파일 업로드 대상이 댓글인지 확인합니다. 아니면 리턴~

     

    $editor_sequence = Context::get('editor_sequence');

    if ($_SESSION['upload_info'][$editor_sequence]->upload_target_type !== 'com') {

        return;

    }

     

    4. 파일 모듈 설정을 불러와서 조작합니다.

     

    $config = ModuleModel::getModuleConfig('file');

    $config->max_image_width = 400;

    $config->max_image_height = 300;

     

    이렇게 해놓으면 file.controller.php에서 사진을 리사이즈할 때

    님이 조작해 놓은 설정을 불러와서 작업하겠죠?

    님이 직접 사진을 리사이즈할 필요가 전혀 없습니다.

    임시로 설정을 바꿔놓기만 하면, 나머지는 file.controller.php에서 알아서 하니까요.

  • 2024.10.02 15:37 #1839850
    기진곰님 정말정말 감사드립니다. 직접 답변을 들을 수 있어서 기쁩니다.

    정상적으로 잘 작동합니다. 저는 아래의 내용을 깨닫지못하고 약 2주동안 헤매었네요;;

    before_module_proc 기점으로 끼어들기.
    [$editor_sequence]->upload_target_type !== 'com') // 댓글인지 구분하는것.

    전반적인 구조 파악을 하는것이 중요하는것을 새삼 깨닫습니다. 저의 공부 부족입니다;;
    바쁘신와중에 시간 내주어시고 상세히 팁과 함께 답변해주셔서 감사합니다.