메인 슬라이드 우측 하단 이미지 링크 삽입

슬라이드 이미지 링크 추가 수정작업 기록

 

어제 수정하다 XE구문 오류로 미뤄뒀던 "메인 슬라이드 페이지 바로가기 링크를 수정 하였다.

이제 업로드된 다섯가지 이미지로 페이지를 연결하는 링크를 구현할수 있다(디폴트 적용된 이미지는 웹폴더에 올라있는 한개의 이미지만 사용가능)

 

이론상으론 이런식으로 스킨에 추가 작업을 해주면 여러 이미지를 등록하여 링크 거는 슬라이드 베너 기능을 구현할수있다.

수정한 작업 내용을 잊지않기 위해 기록으로 남기고 태그를 남겨야겠다.

 

일단 수정한 부분의 이미지는 이렇다.

 

 

 

 

 

 

 

 

 

 

위에 나열된 이미지와 같이 메인 슬라이드의 텍스트 대체 이미지의 레이아웃 기능에 업로드된 개인 이미지의 링크태그가 없어서 메인 레이아웃의 디폴트 이미지로만 가능한데 이 디폴트 이미지는 웹 폴더에 저장되는 한개의 기본 이미지만 링크가 걸린다..(업로드 하는 개인 이미지들은 그냥 악세서리;;;;)

거기다 위치도 맞지않아 시각적으로도 않좋다

 

그래서 이 업로드되는 5개의 이미지에 사용자 정의에서 걸어두는 바로가기 링크를 적용할수있는 태그작업이 주목적이다.

 

① 수정 파일 경로 : ../layouts\Door_cpA_limit/slide/camera.html

 

위 경로의 camera.html 문서를 열고 아래 특정된 부분을 수정한다.

 

<!-- 메인 슬라이드 -->

<div class="WSlide">

<div class="wrap_slides" cond="$layout_info->slide_img2">

<div class="camera_wrap camera_emboss" id="camera_wrap">

<block cond="$layout_info->slide_img1">

<div data-src="{$layout_info->slide_img1}" title="{$layout_info->slide_title1}" />

<div class="caption">

<h2 class="{$layout_info->slide_imgB_p1}"><img src="{$layout_info->slide_imgB1}" alt="{$layout_info->slide_title1}" /></h2>

<p class="{$layout_info->slide_imgP_p1}">

<img src="{$layout_info->slide_imgP1}" alt="" />

<a cond="$layout_info->slide_url1" class="view_more" href="{$layout_info->slide_url1}">view more</a>

</p>

</div>

</div>

</block>

 

위 부분을 보면 링크태그가 없다 

아래 부분에 백그라운드 요소로 불려오는 View_more.pmg파일에 링크가 걸려있어 

업로드 되는 개인 이미지는 그저 악세서리 역활만할뿐 기능적인 역활은 없다.

 

이부분에 아래 코드를 추가함으로 이미지에 링크를 걸고 이것을 5개 블록에(block)의 코드에 모두 하드코팅 한다.

 

<p class="{$layout_info->slide_imgP_p1}">

<!--/*이미지 링크 수정중 항목1*/-->

             <a  class="" href="{$layout_info->slide_url1}">

<span cond="$layout_info->slide_imgP1"><img src="{$layout_info->slide_imgP1}" alt="" /></span>

</a>

<!--/*여기까지 */-->

<a cond="$layout_info->slide_url1" class="view_more" href="{$layout_info->slide_url1}">view more</a>

 

이렇게 함으로 업로드되는 이미지에 링크를 거는 구문을 만들수있다.

 

이후 업로드된 아이콘+비손푸드뱅크 라는 디자인의 이미지를 각 링크되는 페이지나 게시판의 성격에 맞게 조정하면 작업은 끝난다.

코딩후 크롬에서 오류 검사를 시행해보니 아래의 이미지 처럼 

기존에 오류가 있던 카카오센드링크 (kakao sendlink.js 파일의 오류코드만 찍힌다.

 

이후에 이 센드린크 오류도 잡아 보도록 하자..