Myanmar National Portal

1<style> 

2    .img-fluid1 { 

3        max-width: 100%; 

4        height: auto; 

5        min-height: 200px; 

6    } 

7 

8    button.mfp-arrow { 

9        overflow: visible; 

10        cursor: pointer; 

11        background: transparent; 

12        border: 0; 

13        -webkit-appearance: none; 

14        display: none; 

15        outline: 0; 

16        padding: 0; 

17        z-index: 1046; 

18        box-shadow: none; 

19        touch-action: manipulation; 

20    } 

21 

22    .mnp_body .lightbox-item:hover .video-image--wrapper img { 

23        transform: scale(1.5); 

24        transition: transform .2s; 

25    } 

26 

27    .mnp_body .lightbox-video { 

28    width: 100%; 

29    height: 200px; 

30    margin-bottom: 80px; 

31} 

32</style> 

33 

34<#if entries?has_content> 

35    <#assign dlAppServiceUtil=serviceLocator.findService("mnp.custom.dlfile.util.DLFileUtilService") /> 

36    <#assign portlet_display=portletDisplay /> 

37    <#assign portlet_title=htmlUtil.escape(portlet_display.getTitle()) /> 

38    <section id="team" class="team section-bg"> 

39        <div class="container-fluid"> 

40            <div class="photoandmedia"> 

41                <div class="row photoText"> 

42                    <div class="col-6"> 

43                        <span class="bold">${portlet_title}</span> 

44                    </div> 

45                    <div class="col-6 videoText"> 

46                        <span class="bold"> <a style="float:right;color:black" href="/photos-and-videos"> 

47                                <@liferay_ui["message"] key="mnp-explore-more" /> >> 

48                            </a></span> 

49                    </div> 

50                </div> 

51            </div> 

52            <div class="row"> 

53				<#assign index= 1> 

54                <#list entries as entry> 

55                    <#assign assetRenderer=entry.getAssetRenderer() entryTitle=entry.getTitle(locale) 

56                        entrySummary=entry.getSummary(locale) journalArticle=assetRenderer.getArticle() 

57                        document=saxReaderUtil.read(journalArticle.getContent()) rootElement=document.getRootElement() 

58                        thumbnail="" image="" /> 

59                    <#list rootElement.elements() as dynamicElement> 

60                        <#if "image"==dynamicElement.attributeValue("name") 

61                            || "photo"==dynamicElement.attributeValue("name")> 

62                            <#assign image=dynamicElement.element("dynamic-content") thumbnail=thumbnail + 

63                                dynamicElement.element("dynamic-content").getData()> 

64                        </#if> 

65                    </#list> 

66 

67 

68                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos-delay="100"> 

69                        <div class="lightbox-item lightbox-video"> 

70 

71                            <div class="member"> 

72                                <div class="member-img popup-gallery"> 

73                                    <a href="${image.getData()}" class="video-image--wrapper"> 

74                                        <#assign fileEntryIdStr = image.attributeValue("fileEntryId") /> 

75										<#if fileEntryIdStr?? && fileEntryIdStr?has_content> 

76											<#attempt> 

77												<#assign fileEntryId = fileEntryIdStr?number /> 

78												<#assign fileVersion = dlAppServiceUtil.getFileVersion(fileEntryId) /> 

79												<#if fileVersion??> 

80													<@adaptive_media_image["img"] fileVersion=fileVersion class="img-responsive" /> 

81												<#else> 

82													<img src="${image.getData()}" class="img-responsive"> 

83												</#if> 

84											<#recover> 

85												<img src="${image.getData()}" class="img-responsive"> 

86											</#attempt> 

87										<#else> 

88											<img src="${image.getData()}" class="img-responsive"> 

89										</#if> 

90                                    </a> 

91 

92                                    <#assign youtubeURL="" image="" value1='["value 1"]' value2='["value 2"]' 

93                                        videoType="" uploadVideo="" /> 

94                                    <#list rootElement.elements() as dynamicElement> 

95                                        <#if "linkVideo"==dynamicElement.attributeValue("name")> 

96                                            <#assign youtubeURL=dynamicElement.element("dynamic-content").getData()> 

97                                        </#if> 

98                                        <#if "image"==dynamicElement.attributeValue("name")> 

99                                            <#assign imageContent=dynamicElement.element("dynamic-content") 

100                                                image=dynamicElement.element("dynamic-content").getData()> 

101                                        </#if> 

102                                        <#if "uploadVideo"==dynamicElement.attributeValue("name")> 

103                                            <#assign uploadVideo=dynamicElement.element("dynamic-content").getData()> 

104                                        </#if> 

105                                        <#if "VideoType"==dynamicElement.attributeValue("name")> 

106                                            <#assign videoType=dynamicElement.element("dynamic-content").getData()> 

107                                        </#if> 

108                                    </#list> 

109 

110 

111                                    <#if (videoType==value1)> 

112                                        <a href="#" class="open-popup-link-${index}"> 

113                                            <div class="port-img-overlay"> 

114                                                <#assign fileEntryIdNumber=imageContent.attributeValue("fileEntryId") /> 

115                                                <#if fileEntryIdNumber?? && fileEntryIdNumber?has_content> 

116                                                    <#assign fileEntryIdNumber=imageContent.attributeValue("fileEntryId")?number /> 

117                                                    <#if dlAppServiceUtil.getFileVersion(fileEntryIdNumber)?? && dlAppServiceUtil.getFileVersion(fileEntryIdNumber)?has_content> 

118                                                        <@adaptive_media_image["img"] fileVersion=dlAppServiceUtil.getFileVersion(fileEntryIdNumber) /> 

119                                                        <#else> 

120                                                            <img class="port-main-img" src=${image} alt="img"> 

121                                                    </#if> 

122                                                    <#else> 

123                                                        <img class="port-main-img" src=${image} alt="img"> 

124                                                </#if> 

125                                            </div> 

126                                        </a> 

127                                        <div id="mnp-video-popup-${index}" class="white-popup mfp-hide"> 

128                                            <video width="720px" height="480px" controls> 

129                                                <source src="${uploadVideo}" type="video/mp4"> 

130                                                Your browser does not support the video tag. 

131                                            </video> 

132                                        </div> 

133                                        <script> 

134                                            $(document).ready(function () { 

135                                                $('.open-popup-link-${index}').magnificPopup({ 

136                                                    items: { 

137                                                        src: $('#mnp-video-popup-${index}'), 

138                                                        type: 'inline', 

139                                                        midClick: true, 

140                                                        mainClass: 'custom-popup-class' 

141                                                    } 

142                                                }); 

143                                            }); 

144 

145                                        </script> 

146                                        <#assign index=index + 1> 

147                                            <#elseif (videoType==value2)> 

148 

149                                                <a href="${youtubeURL}" class="popup-youtube"> 

150                                                    <div class="port-img-overlay"> 

151                                                        <#assign 

152                                                            fileEntryIdNumber=imageContent.attributeValue("fileEntryId") /> 

153                                                        <#if fileEntryIdNumber?? && fileEntryIdNumber?has_content> 

154                                                            <#assign 

155                                                                fileEntryIdNumber=imageContent.attributeValue("fileEntryId")?number /> 

156                                                            <#if dlAppServiceUtil.getFileVersion(fileEntryIdNumber)?? && dlAppServiceUtil.getFileVersion(fileEntryIdNumber)?has_content> 

157                                                                <@adaptive_media_image["img"] fileVersion=dlAppServiceUtil.getFileVersion(fileEntryIdNumber) /> 

158                                                                <#else> 

159                                                                    <img class="port-main-img" src=${image} alt="img"> 

160                                                            </#if> 

161                                                            <#else> 

162                                                                <img class="port-main-img" src=${image} alt="img"> 

163                                                        </#if> 

164                                                    </div> 

165                                                    <div class="port-overlay-cont"> 

166                                                        <div class="port-btn-cont"> 

167                                                            <i class="fa fa-play"></i> 

168                                                        </div> 

169                                                    </div> 

170                                                </a> 

171                                    </#if> 

172 

173                                </div> 

174                                <div class="member-info"> 

175                                    <span>${stringUtil.shorten(entryTitle,40)}</span> 

176                                </div> 

177                            </div> 

178                        </div> 

179                    </div> 

180 

181                </#list> 

182            </div> 

183        </div> 

184    </section> 

185 

186    <#else> 

187        <h1>${themeDisplay.translate("mnp-no-data-available")}</h1> 

188</#if>