src/pyams_portal/portlets/image/zmi/preview.pt
changeset 66 5f2a36c93535
parent 60 d65ad9b7367a
child 105 a0f93a0744b6
equal deleted inserted replaced
65:5c9edb045032 66:5f2a36c93535
       
     1 <tal:var define="settings view.settings">
       
     2 	<tal:if condition="settings.visible">
       
     3 		<tal:if condition="settings.image">
       
     4 			<a class="fancybox" data-toggle
       
     5 			   data-ams-fancybox-type="image"
       
     6 			   tal:define="image settings.image;
       
     7 						   image_url extension:absolute_url(image);
       
     8 						   slot_config view.slot_configuration;
       
     9 						   slot_width slot_config.get_width();
       
    10 						   base_width 100 / 12;
       
    11 						   thumbnails extension:thumbnails(image);
       
    12 						   target python:thumbnails.get_thumbnail('800x600');"
       
    13 			   tal:attributes="href extension:absolute_url(target)">
       
    14 				<picture>
       
    15 					<tal:var define="width slot_width['lg']">
       
    16 						<source media="(min-width: 1200px)"
       
    17 								tal:condition="width"
       
    18 								tal:attributes="srcset string:${image_url}/++thumb++lg:w1200 1200w, ${image_url}/++thumb++lg:w512 512w, ${image_url}/++thumb++lg:w256 256w, ${image_url}/++thumb++lg:w128 128w;
       
    19 												sizes string:${round(base_width * width)}vw" />
       
    20 						<source media="(min-width: 1200px)"
       
    21 								srcset="/--static--/pyams_default_theme/img/dot.png"
       
    22 								tal:condition="not:width"
       
    23 								tal:attributes="sizes string:${round(base_width * width)}vw" />
       
    24 					</tal:var>
       
    25 					<tal:var define="width slot_width['md']">
       
    26 						<source media="(min-width: 992px)"
       
    27 								tal:condition="width"
       
    28 								tal:attributes="srcset string:${image_url}/++thumb++md:w992 992w, ${image_url}/++thumb++md:w512 512w, ${image_url}/++thumb++md:w256 256w, ${image_url}/++thumb++md:w128 128w;
       
    29 												sizes string:${round(base_width * width)}vw" />
       
    30 						<source media="(min-width: 992px)"
       
    31 								srcset="/--static--/pyams_default_theme/img/dot.png"
       
    32 								tal:condition="not:width"
       
    33 								tal:attributes="sizes string:${round(base_width * width)}vw" />
       
    34 					</tal:var>
       
    35 					<tal:var define="width slot_width['sm']">
       
    36 						<source media="(min-width: 768px)"
       
    37 								tal:condition="width"
       
    38 								tal:attributes="srcset string:${image_url}/++thumb++sm:w768 768w, ${image_url}/++thumb++sm:w512 512w, ${image_url}/++thumb++sm:w256 256w, ${image_url}/++thumb++sm:w128 128w;
       
    39 												sizes string:${round(base_width * width)}vw" />
       
    40 						<source media="(min-width: 768px)"
       
    41 								srcset="/--static--/pyams_default_theme/img/dot.png"
       
    42 								tal:condition="not:width"
       
    43 								tal:attributes="sizes string:${round(base_width * width)}vw" />
       
    44 					</tal:var>
       
    45 					<tal:var define="width slot_width['xs']">
       
    46 						<source media="(max-width: 767px)"
       
    47 								tal:condition="width"
       
    48 								tal:attributes="srcset string:${image_url}/++thumb++xs:w768 768w, ${image_url}/++thumb++xs:w512 512w, ${image_url}/++thumb++xs:w256 256w, ${image_url}/++thumb++xs:w128 128w;
       
    49 												sizes string:${round(base_width * width)}vw" />
       
    50 						<source media="(max-width: 767px)"
       
    51 								srcset="/--static--/pyams_default_theme/img/dot.png"
       
    52 								tal:condition="not:width"
       
    53 								tal:attributes="sizes string:${round(base_width * width)}vw" />
       
    54 					</tal:var>
       
    55 					<img style="width: 100%;" tal:attributes="src image_url" />
       
    56 				</picture>
       
    57 			</a>
       
    58 		</tal:if>
       
    59 		<tal:if condition="not settings.image">
       
    60 			<div class="text-center padding-y-5">
       
    61 				<span class="fa-stack fa-lg">
       
    62 					<i class="fa fa-picture-o fa-stack-1x"></i>
       
    63 					<i class="fa fa-ban fa-stack-2x text-danger"></i>
       
    64 				</span>
       
    65 			</div>
       
    66 		</tal:if>
       
    67 	</tal:if>
       
    68 	<tal:if condition="not settings.visible">
       
    69 		<div class="text-center padding-y-5">
       
    70 			<span class="fa-stack fa-lg">
       
    71 				<i class="fa fa-eye fa-stack-1x"></i>
       
    72 				<i class="fa fa-ban fa-stack-2x text-danger"></i>
       
    73 			</span>
       
    74 		</div>
       
    75 	</tal:if>
       
    76 </tal:var>