워드프레스 구텐베르크 에디터 사진 가로 정렬하는 방법

본문 글에 사진이나 이미지를 가로로 정렬해서 넣을 때 블로그 서비스에 따라 아이템을 가로로 드래그&드롭하면 된다. 아쉽게도 워드프레스 설치형 블로그에서는 해당 기능이 없는데 대신 gallery 기능을 사용하면 가로 정렬이 가능하다.

참고로 Gallery는 클래식 에디터가 아닌 구텐베르크(블록) 에디터에서 사용할 수 있다.



1. Gallery로 이미지 정렬

먼저 글쓰기 화면 빈 곳의 ‘Type / to choose a block or..’ 영역을 클릭한 다음, 화면 왼쪽 위의 Block 요소에서 Gallery를 추가하면 된다.


Block 창을 여는 것이 번거롭다면 글쓰기 화면 빈 곳에 ‘/gallery’ 입력 후 아이콘을 선택할 수 있다.


이후 과정은 일반 이미지를 추가할 때와 같다. 새 파일이면 Upload를 클릭하고 이미 올린 사진이면 Media Library에서 선택하면 된다.


목록에서 가로 정렬이 필요한 사진을 클릭한 다음 Insert gallery를 클릭하자.


이후 갤러리 블록에 이미지 두 장이 동일한 비율로 잘 정렬된 것을 볼 수 있다.


이미지 목록 아래 설명 글을 더하려면 … 아이콘 클릭 후 caption을 추가하면 된다.



2. Gallery 이미지 제한

Gallery 기능을 활용하면 사진을 가로 정렬할 수 있지만 숫자에는 제한이 있다. 먼저 위는 PC 버전 화면인데 가로 최대 3장까지 가능하다.

사진을 올리면 올린 숫자에 따라 시스템이 자동으로 배열하는데 사진 순서를 바꿔야 하는 경우, 화면 왼쪽 블록 요소에서 이미지 블록을 드래그&드롭 하면 된다.


화면 폭이 좁은 모바일에서는 최대 2장까지 가로 배열이 가능하다. HTML 코드를 잘 알면 가로 사진 수 제한을 변경할 수 있겠지만 2장이면 충분하지 않을까 싶다.

Leave a Comment