모델에이드 운영과 관련한 다양한 이야기들을 주고 받는 곳입니다. 편하게 의견을 전해주세요.
기존의 작은 사이즈 이미지들만 있는 경우에는 확대 기능이 크게 의미가 없었지만...
새롭게 올라가기 시작하는 이미지들의 경우에는 그간 미디어 기술의 발달에 힘입어 매우 큰 것이 사실입니다.
이에 이미지 확대 기능은 필요할 것으로 예견됩니다.
현재 새롭게 기능을 추가한 상태인데 문제는 기존의 글들을 모두 수정해야 한다는 번거로움이 한가지 있고...
다른 하나는 별도의 프로그램 세트로 운영되는 포럼과 게시판에서는 어떻게 처리해야 하는가에 관한 이슈가 남아 있습니다.
CSS 에 사용자 정의 방식으로 모든 이미지에 강제로 옵션을 설정해 버리는 방식도 있을 듯 한데 그렇게 하는 경우에 사이트의 다른 기능에 영향을 미치지 않을까 걱정되는 부분이 있으니 은밀히 테스트를 해 보도록 하겠습니다.
사이트를 이용하는 누구나 번거로움이 예상되는 문제라면 근본적으로 해결해버리는 것이 바람직해 보입니다.
핵심적인 코드는 아래와 같음
<figure class="wp-block-image aligncenter size-large is-resized is-style-zoooom"><img loading="lazy" decoding="async" src="nipper1-1024x768.jpg" alt="" class="wp-image-4415" width="512" height="384" srcset="nipper1-1024x768.jpg 1024w, nipper1-300x225.jpg 300w, nipper1-768x576.jpg 768w, nipper1-1536x1152.jpg 1536w, nipper1-2048x1536.jpg 2048w, nipper1-1020x765.jpg 1020w, nipper1.jpg 2560w" sizes="(max-width: 512px) 100vw, 512px" /></figure>
이중 이미지 태그 안에 있는 것들은 화면 사이즈에 맞춰 적절한 크기의 이미지를 불러오는 것이라 생각되고...
<figure class="wp-block-image aligncenter size-large is-resized is-style-zoooom">
</figure>
영역이 줌 기능을 활성화시키는 것으로 예상되는데 이 부분만 별도로 이미지 태그 앞에 삽입한다면 해당 영역에서 줌 기능이 강제로 활성화될 것으로 예상됨
문제는 소스코드 단위에서 이미지 태그 앞에 저 태그를 어떻게 집어 넣는가 하는건데 이 부분은 조금 더 고민해 보겠음
ps. css class 로 정리해 뒀으면 얼마나 편했을까?
그냥 figure 가 아니라 image 안에 class 로 삽입해 볼까?