상현에 하루하루
개발자의 하루

media srcset을 효과적으로 관리 할 수없을까?

( 업데이트: )

워드프레스4.4버전부터 이미지를 크롭해서 4가지 또는 5가지의 이미지로 나눠준다

  • Thumbnail
  • Medium
  • Medium Large
  • Large

하지만 이것은 원본 이미지를 설정한 사이즈에 맞게 잘라주는 것이지 <img srcset="에 관한 것을 없었다 플러그인으로 기능이 있을까? 찾아봤지만 찾아보기 힘었다.

구글에 검색해봐도 어려운 내용으로 워드프레스의 functions.php를 수정해서 자동으로 만들어주는 훅과 필터를 제작하는 것이었다 하지만 나에게는 너무나 어려웠다.

한가지 이미지에 여러가지 이미지를 미디어쿼리에 맞에 등록시킬 수는 없을까? 그게 가장 쉬운 방법일 것같은데

어떻게 할까 고민하다가 위에 말한 것처럼 한가지 이미지에 이미지를 등록하는 방법으로 시도해보았다.

커스텀 필드를 이용하는 것인데 나는 ACF로 구성했다. 그냥 커스텀 필드를 훅으로 추가해도 된다.

커스텀 필드로 이미지의 source라는 이름으로 필드의 속성은 Flexible Content로 추가할 수 있는 템플릿 필드를 만들고 속성은 이미지, 기준(미디어쿼리), 필드들을 속성으로 설정해서 구성해봤다.

아주 만족스럽게 작동한다. 사용할때는 PHP의 템플릿으로 제작할때만 사용하는데 나에게는 아주 적절한 사용법이었다.

해결되지 않은 문제

업로드한 미디어쿼리에 맞게 사용하는 이미지들을 미디어에서 보여질 필요가 없는데 어떻게 숨길까? 숨기는게 맞을까? 하지만 난 숨기고싶은데? 이런 고민이든다.