그리드 이미지 - Githubissues

redgoose-dev commented 4 years ago

여러개의 이미지를 본문에 넣을때가 생기는데 일렬로 이미지를 넣으면 너무 길어진다.
참고 이미지들을 한눈으로 보고싶을때가 생기는데 뭔가 좋은 방법을 찾아야했다.

grid-image

하나의 방법은 이미지를 작게 썸네일화 시키고 이미지를 누르던지 하면 큰 이미지로 보이게 하는 프로세스로 하는것인데 이제 제작해봐야 할것이다.

그리드를 구성하는 스타일시트는 쉬운 방법으로 구현해야 한다. display: grid;를 사용하는것이 최선일 것이다. grid-template-columns: repeat(3, 1fr); 형식으로 컬럼을 구현할 수 있을것이다.

redgoose-dev commented 4 years ago

이미지 표시 이슈로 사이즈에 따라 컬럼수가 달라지면 한줄에 표시되는 이미지 갯수가 달라져야한다. css variable와 html attribute값을 이용하여 윈도우 사이즈에 따라 컬럼수를 컨트롤 할 수 있을것이다.

그러면 규칙이 되는 엘리먼트는 이렇게 되지 않을까..

<figure grid col-mobile="2" col-tablet="3" col-desktop="4" col-desktop-large="6">
  <img/>
  <img/>
  <img/>
</figure>

redgoose-dev commented 4 years ago

클라이언트 앱에서의 표시는 각자 판단에 맡기도록 한다. 하지만 :first-child와 :last-child 같은 부분들에 대한 대처도 필요해 보인다.

썸네일을 누르면 라이트박스에 관한 대처도 각자 앱에 맡겨야 한다.

하지만 기본적으로는 원래 이미지대로 그대로 늘려주는데 부담이 없어야 한다.

redgoose-dev commented 4 years ago

그리드를 감싸는 그룹도 필요할 것이다. 단독으로 그리드 컴포넌트가 들어가 있으면 마진이 클것인데 다양한 컬럼으로 마진을 조절해야하는 경우가 생긴다면 그리드 컴포넌트를 여러개 넣을때 그룹으로 감싸야할것이다.

<div grid-group>
  <figure grid col-mobile="2"/>
  <figure grid col-mobile="3"/>
  <figure grid col-mobile="4"/>
</div>

이런식으로 컴포넌트가 구조가 만들어질것이라고 예상된다.

예제로 만든 프로토타입 링크: https://codepen.io/redgoose/pen/XWdxveq

redgoose-dev commented 3 years ago

엘리먼트 속에 마크다운이 들어있으면 파서에 따라 해석이 되기도 하고 안되기도 한다.

<figure>
![image-name](image-name.jpg)
</figure>

Marked 파서는 이미지 마크다운이 파싱이 되는데 erusev/parsedown은 파싱이 안되는걸 확인했다.

그래서 매니저를 좀 고쳐서 파일 첨부 컴포넌트에서 html 코드로 넣을 수 버튼을 추가했다. 마크다운 텍스트와 html을 선택해서 이미지를 넣을 수 있도록 선택권을 늘렸다.

redgoose-dev / goose-manager