Update

Corrects some article forms in order to use better image dimensions with the smd_thumbnail plugin.
cara-tm · Dec 21, 2018 · 7daf35d · 7daf35d
1 parent 8f2ed10
commit 7daf35d
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 22 deletions.
diff --git a/dist/simplr/forms/article/default.txp b/dist/simplr/forms/article/default.txp
@@ -8,11 +8,20 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),background:url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
-					<txp:if_plugin name="smd_thumbnail">
-						<txp:smd_thumbnail type="w_980"><img src="<txp:smd_thumbnail_info item="url" />" width="<txp:smd_thumbnail_info item="w" />" height="<txp:smd_thumbnail_info item="h" />" alt="<txp:smd_thumbnail_info item="alt" />" class="no-select" /></txp:smd_thumbnail>
-					<txp:else />
-						<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
+					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
 					</txp:if_plugin>
 				</picture>
 			</a>

diff --git a/dist/simplr/forms/article/default_black_white.txp b/dist/simplr/forms/article/default_black_white.txp
@@ -15,9 +15,21 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="width:100%;height:100%;background:url(), url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>>
-
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
 					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+					</txp:if_plugin>
 				</picture>
 			</a>
 			<figcaption>
@@ -40,7 +52,7 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 
 <txp:else />
 
-	<txp:if_article_image><div class="gallery">
+	<txp:if_article_image><div class="gallery lightbox-gallery">
 		<txp:output_form form="lightbox_images" />
 	</div></txp:if_article_image>
 	<txp:output_form form="article_metas" />

diff --git a/dist/simplr/forms/article/default_no_lightbox.txp b/dist/simplr/forms/article/default_no_lightbox.txp
@@ -8,11 +8,20 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),background:url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
-					<txp:if_plugin name="smd_thumbnail">
-						<txp:smd_thumbnail type="w_980"><img src="<txp:smd_thumbnail_info item="url" />" width="<txp:smd_thumbnail_info item="w" />" height="<txp:smd_thumbnail_info item="h" />" alt="<txp:smd_thumbnail_info item="alt" />" class="no-select" /></txp:smd_thumbnail>
-					<txp:else />
-						<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
+					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
 					</txp:if_plugin>
 				</picture>
 			</a>

diff --git a/dist/simplr/forms/article/default_no_lightbox_black_white.txp b/dist/simplr/forms/article/default_no_lightbox_black_white.txp
@@ -15,9 +15,21 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="width:100%;height:100%;background:url(), url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>>
-
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
 					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+					</txp:if_plugin>
 				</picture>
 			</a>
 			<figcaption>
@@ -40,7 +52,7 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 
 <txp:else />
 
-	<txp:if_article_image><div class="gallery">
+	<txp:if_article_image><div class="gallery lightbox-gallery">
 		<txp:output_form form="no_lightbox_images" />
 	</div></txp:if_article_image>
 	<txp:output_form form="article_metas" />

diff --git a/dist/simplr/forms/article/default_no_lightbox_saturated.txp b/dist/simplr/forms/article/default_no_lightbox_saturated.txp
@@ -15,9 +15,21 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="width:100%;height:100%;background:url(), url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>>
-
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
 					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+					</txp:if_plugin>
 				</picture>
 			</a>
 			<figcaption>
@@ -40,7 +52,7 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 
 <txp:else />
 
-	<txp:if_article_image><div class="gallery">
+	<txp:if_article_image><div class="gallery lightbox-gallery">
 		<txp:output_form form="no_lightbox_images" />
 	</div></txp:if_article_image>
 	<txp:output_form form="article_metas" />

diff --git a/dist/simplr/forms/article/default_saturated.txp b/dist/simplr/forms/article/default_saturated.txp
@@ -15,9 +15,21 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 		<txp:images form="images" limit="1" id='<txp:variable name="first_pic" />' break="">
 		<figure class="aspect-ratio">
 			<a href="<txp:permlink />">
-				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="width:100%;height:100%;background:url(), url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>>
-
+				<picture<txp:smd_if_thumbnail type="w_tiny27"> style="background:url(),url(<txp:smd_thumbnail type='w_tiny27' display='url' id='<txp:image_info type="id" />' />) center center no-repeat;background-size:100% 100%"</txp:smd_if_thumbnail>min-height:150px">
+				<txp:if_plugin name="smd_thumbnail">
+					<img src="<txp:smd_thumbnail type='w_320' display='url' id='<txp:image_info type="id" />' />" 
+			srcset="<txp:smd_thumbnail type='w_320' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_980' id='<txp:image_info type="id" />' form="img_srcset" />, 
+			<txp:smd_thumbnail type='w_1280' id='<txp:image_info type="id" />' form="img_srcset" />" 
+			sizes="(min-width: 1200px) 1140px, 
+			(min-width: 992px) 940px, 
+			(min-width: 768px) 720px, 
+			calc(100vw - 20px)" 
+			alt="<txp:image_info type='alt' />" />
+
+				<txp:else />
 					<img src="<txp:image_url link='0' />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" alt="<txp:image_info type='alt' />" lazyload="on" class="no-select" />
+					</txp:if_plugin>
 				</picture>
 			</a>
 			<figcaption>
@@ -40,7 +52,7 @@ $variable['first_pic'] = strtok(custom_field(array('name'=>'article_image')), ',
 
 <txp:else />
 
-	<txp:if_article_image><div class="gallery">
+	<txp:if_article_image><div class="gallery lightbox-gallery">
 		<txp:output_form form="lightbox_images" />
 	</div></txp:if_article_image>
 	<txp:output_form form="article_metas" />