2021.04.17 사진의 모델 생성, 갤러리 페이지 코드 변경

2021.04.16 갤러리 페이지 수정

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.13 - [개발 일지/한라열쇠..

brightnightsky77.tistory.com

지난번에 만들었던 갤러리 페이지의 사진들은 하나하나 하드코딩으로 올린 상태였습니다.

하지만 django를 공부하면서 갤러리에 올라갈 사진들에 대한 모델을 구상하고 관리자 페이지에서 사진들과 그에 대한 각종 부가 설명들을 같이 올릴 수 있는 법에 대해서 알게 되었습니다.

고치기 전에는 사진 파일들과 설명들을 일일이 넣은 상태였습니다.

<!-- Masonry 갤러리 -->
<div class="container">
    <div class="grid">
    	<div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>
        <!-- 고치기 전에는 사진 하나하나 하드코딩해서 만든 상태. 현재는 수정함 -->
        <a data-lightbox-gallery="gallery" href="{% static 'photo/main/한라열쇠 네이버 지도 사진.jpg' %}"
            title="한라열쇠 네이버 지도 사진" class="gallery">
            <div class="grid-item">
            	<img src="{% static 'photo/main/한라열쇠 네이버 지도 사진.jpg' %}" />
            </div>
        </a>
        <a data-lightbox-gallery="gallery" href="{% static 'photo/main/가게 내부 사진1-1.jpg' %}" title="가게 내부 사진"
            class="gallery">
            <div class="grid-item">
            	<img src="{% static 'photo/main/가게 내부 사진1-1.jpg' %}" alt="" />
            </div>
        </a>
        <a data-lightbox-gallery="gallery" href="{% static 'photo/main/가게 내부 사진2-1.jpg' %}" title="가게 내부 사진"
            class="gallery">
            <div class="grid-item">
            	<img src="{% static 'photo/main/가게 내부 사진2-1.jpg' %}" alt="" />
            </div>
        </a>
        <a data-lightbox-gallery="gallery" href="{% static 'photo/main/가게 내부 사진3-1.jpg' %}" title="가게 내부 사진"
            class="gallery">
            <div class="grid-item">
            	<img src="{% static 'photo/main/가게 내부 사진3-1.jpg' %}" alt="" />
            </div>
        </a>
        <a data-lightbox-gallery="gallery" href="{% static 'photo/gallery_photo/디지털도어락 설치 완료1.jpg' %}"
            title="디지털도어락 설치 완료" class="gallery">
            <div class="grid-item">
                <img src="{% static 'photo/gallery_photo/디지털도어락 설치 완료1.jpg' %}" alt="" />
            </div>
        </a>
        <a data-lightbox-gallery="gallery" href="{% static 'photo/gallery_photo/디지털도어락 설치 완료2.jpg' %}"
            title="디지털도어락 설치 완료" class="gallery">
            <div class="grid-item">
                <img src="{% static 'photo/gallery_photo/디지털도어락 설치 완료2.jpg' %}" alt="" />
            </div>
        </a>
    </div>
</div>

이제는 갤러리 페이지에 들어가는 사진의 모델을 만들어서 관리자 페이지에서 사진 정보를 등록하면

갤러리 페이지에 나오게 만들었습니다.

그런데, 지금은 이미지 서버를 따로 만든 상태가 아니라 관리자 페이지를 통해서 사진을 등록시키더라도

프로젝트 내부의 폴더에 이미지 파일이 저장되는 상태입니다.

공부한 책의 내용을 보면 AWS의 S3를 이미지 서버로 사용합니다.

홈페이지를 배포할 때가 되면 저도 AWS의 S3를 이미지 서버로 구축하여 배포해보는 포스팅을 올려보겠습니다.

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

2021.04.18 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.18 AWS S3로 이미지 서버 구축, Heroku로 배포해보기

2021.04.18 AWS S3로 이미지 서버 구축, Heroku로 배포해보기

brightnightsky77.tistory.com

저작자표시 비영리 변경금지

2021.04.17 사진의 모델 생성, 갤러리 페이지 코드 변경

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

댓글

티스토리툴바