Lightwidget - 설정하기

Lightwidget - 설정하기

Lightwidget에 관련된 기초 정보는 아래의 포스팅을 참고하시면 됩니다.

https://cloud-library.tistory.com/136

Lightwidget - 인스타그램, 페이스북 연동하여 자료 가져오기

 

① Posts Layout

레이아웃에서 선택가능한것은 3가지로 1. 그리드 형태, 2.슬라이더 형태, 3.벽돌 형태 입니다.

 

1. 그리드 형태

격자형태를 뜻하는 그리드, 인스타그램의 피드를 그대로 옴겼다 생각하시면 좋을듯 합니다.

 

2.슬라이드 형태

좌우로 움직이는 슬라이드 형태 입니다. 한줄로 되어 있으며 좌우로 넘기면 자료를 더 볼 수 있는 형태 입니다.

 

3.벽돌 형태

벽돌형태는 핀터레스트 형태처럼 컨텐츠 크기 많큼 쌓입니다.

인스타그램의 경우 주로 1:1 비율 이미지가 많기 때문에 위의 모드는 사용하는것을 비추 합니다.

(상황에 따라서 자유롭게 사용하시면됩니다.)

 

② 기타 정보들

레이아웃을 설정하였다면 기타 정보들을 셋팅해야 됩니다.

차례로 어떤 항목들이 어떠한 역할을 하는지 알아보겠습니다.

 

1.Number of columns

한줄에 들어가는 자료의 갯수를 뜻합니다. 기본 3으로 설정되어 있는데

숫자를 늘리면 한줄에 들어가는 자료의 숫자도 변하게 됩니다.

 

2.Number of photos

가져올 자료의 갯수 입니다. api를 통해 몇개의 자료를 가져올지 설정 할 수 있습니다.

 

3.Padding

페딩은 html에서 안쪽여백을 뜻합니다. 즉 자료와 자료 사이의 여백이지요 

padding의 값이 올라갈수록 자료들 간의 사이가 멀어질 것이고, 낮을수록 자료와 자료가 가까워 지게 됩니다.

 

③Slider arrows

 

Slider arrows는 layout에서 2번 슬라이더 형태를 설정했을 때에만 선택가능한 옵션으로

슬라이더의 화살표 표시를 설정하게 해주는 기능입니다. 

 

Hidden은 화살표를 보이지 않게 설정하는 것입니다.

Visible은 Hidden과 반대로 화살표를 보이게 설정하는 것입니다.

Visible on hover는 마우스를 슬라이더에 올렸을 때 화살표를 보이게 해주는 기능입니다.

 

④Post

 

Post는 자료의 형태를 설정하는 옵션입니다.

 

Image format (사진 설정1)

Square - 정사각형 모양 1:1 으로 나타나게 하는 것을 설정합니다.

Original - 원본 사이즈로 노출합니다. - 주로 영상자료일 때 크기를 키울수 있습니다.

 

Carousel posts display option (사진 설정2)

First photo only - 첫번째 사진만 노출 시킵니다.

Show all - 모든 사진을 노출 시킵니다.

 

Post click action (클릭 이벤트)

Go to post - 클릭시 해당 포스트로 이동합니다.

Go to profile - 클릭시 프로필 화면으로 이동합니다.

Block click - 클릭을 못하게 막습니다.

 

Post hover effect (마우스 올렸을 때 효과 설정)

None - 아무효과 없음

Fade in - 마우스 올렸을 때 자료가 밝아짐

Fade out - 마우스 올렸을 때 자료가 어두워짐

Zoom in - 마우스 올렸을 때 자료가 커짐

Zoom out - 마우스 올렸을 때 자료가 작아짐 

Zoom and rotate - 마우스 올렸을 때 커지며 회전함

Loupe icon - 마우스 올렸을 때 돋보기 모양이 보임

Instagram icon - 마우스 올렸을 때 인스타그램 아이콘이 보임

Show captopn - 마우스 올렸을 때 자료 하단에 내용이 일부 보임

 

⑤Advanced

 

 

Lay-load images 

이미지 불러올때 지연 화면을 사용할지 여부를 체크하는 곳 (체크 해두면 된다)

 

Widget width for tablet setting 

테블릿 환경에서 전체 너비 값 설정

 

Widget width for mobile setting 

모바일 환경에서 전체 너비 값 설정

 

Widget language

위젯 언어 설정(한국어 있음)

 

Custom CSS

위젯에 css를 적용하고 싶을 경우 css코드를 입력하면 됩니다.