Commit 206036e9 authored by Bert Leunis's avatar Bert Leunis

ESSENTIALS-1033 change markup of banners and carousel templates so the result...

ESSENTIALS-1033 change markup of banners and carousel templates so the result is always a single dom element
parent 19ff0f2c
......@@ -9,5 +9,7 @@
</div>
<#-- @ftlvariable name="editMode" type="java.lang.Boolean"-->
<#elseif editMode>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
<div>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
</div>
</#if>
......@@ -16,5 +16,7 @@
</a>
</div>
<#elseif editMode>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
<div>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
</div>
</#if>
......@@ -45,6 +45,20 @@
<a class="left carousel-control" href="#${componentId}" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#${componentId}" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</#if>
<#--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
-->
<#if editMode>
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</#if>
</div>
<@hst.headContribution category="htmlHead">
......@@ -52,7 +66,6 @@
/* Carousel base class */
#${componentId} {
height: ${cparam.carouselHeight}px;
/*width: ${cparam.carouselWidth}px;*/
margin-bottom: 60px;
}
......@@ -83,21 +96,8 @@
<script type="text/javascript" src="<@hst.webfile path="/js/bootstrap.min.js"/>"></script>
</@hst.headContribution>
<#--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
-->
<#if editMode>
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</#if>
<#elseif editMode>
<div>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/carousel.png'/>"> Click to edit Carousel
</div>
</#if>
<%@ include file="/WEB-INF/jsp/include/imports.jsp" %>
<%--@elvariable id="document" type="{{beansPackage}}.Banner"--%>
<div>
<a href="<hst:link hippobean="${requestScope.document.link}" />">
<figure style="position: relative">
<img src="<hst:link hippobean="${requestScope.document.image}"/>" alt="${fn:escapeXml(requestScope.document.title)}"/>
<figcaption style="position:absolute; top:20px; left:20px; z-index:100; color:white; background: rgba(51, 122, 183, 0.7); width:60%; padding:0 20px 20px 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);">
<c:if test="${not empty requestScope.document.title}">
<h3>${requestScope.document.title}</h3>
</c:if>
<hst:html hippohtml="${requestScope.document.content}"/>
</figcaption>
</figure>
</a>
</div>
<c:if test="${requestScope.document ne null}">
<div>
<a href="<hst:link hippobean="${requestScope.document.link}" />">
<figure style="position: relative">
<img src="<hst:link hippobean="${requestScope.document.image}"/>" alt="${fn:escapeXml(requestScope.document.title)}"/>
<figcaption style="position:absolute; top:20px; left:20px; z-index:100; color:white; background: rgba(51, 122, 183, 0.7); width:60%; padding:0 20px 20px 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);">
<c:if test="${not empty requestScope.document.title}">
<h3>${requestScope.document.title}</h3>
</c:if>
<hst:html hippohtml="${requestScope.document.content}"/>
</figcaption>
</figure>
</a>
</div>
</c:if>
<%--@elvariable id="editMode" type="java.lang.Boolean"--%>
<c:if test="${requestScope.editMode && (requestScope.document eq null)}">
<img src="<hst:link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
<div>
<img src="<hst:link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
</div>
</c:if>
......@@ -45,31 +45,47 @@
<a class="left carousel-control" href="#${componentId}" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#${componentId}" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</c:if>
<%--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
--%>
<c:if test="${editMode}">
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</c:if>
</div>
<style type="text/css">
/* Carousel base class */
#${componentId} {
height: ${requestScope.cparam.carouselHeight}px;
/*width: ${requestScope.cparam.carouselWidth}px;*/
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
background: rgba(51, 122, 183, 0.7);
}
<hst:headContribution category="htmlHead">
<style type="text/css">
/* Carousel base class */
#${componentId} {
height: ${requestScope.cparam.carouselHeight}px;
margin-bottom: 60px;
}
/* Declare heights because of positioning of img element */
#${componentId} .item {
height: ${requestScope.cparam.carouselHeight}px;
background-color: ${requestScope.cparam.carouselBackgroundColor};
}
/* center images*/
.carousel-inner > .item > img {
margin: 0 auto;
}
</style>
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
background: rgba(51, 122, 183, 0.7);
}
/* Declare heights because of positioning of img element */
#${componentId} .item {
height: ${requestScope.cparam.carouselHeight}px;
background-color: ${requestScope.cparam.carouselBackgroundColor};
}
/* center images*/
.carousel-inner > .item > img {
margin: 0 auto;
}
</style>
</hst:headContribution>
<hst:headContribution category="htmlBodyEnd">
<script type="text/javascript" src="<hst:webfile path="/js/jquery-2.1.0.min.js"/>"></script>
......@@ -79,23 +95,10 @@
<script type="text/javascript" src="<hst:webfile path="/js/bootstrap.min.js"/>"></script>
</hst:headContribution>
<%--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
--%>
<c:if test="${editMode}">
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</c:if>
</c:if>
<c:if test="${requestScope.editMode && (requestScope.pageable eq null || requestScope.pageable.total lt 1)}">
<img src="<hst:link path='/images/essentials/catalog-component-icons/carousel.png'/>"> Click to edit Carousel
<div>
<img src="<hst:link path='/images/essentials/catalog-component-icons/carousel.png'/>"> Click to edit Carousel
</div>
</c:if>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment