fix: Packagings display improvements on product page (#7938)

* display weight of packaging unit * make images clickable to zoom, in addition to zoom button * display packaging image
openfoodfacts · Jan 4, 2023 · 7bab391 · 7bab391
1 parent ce432ab
commit 7bab391
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/lib/ProductOpener/KnowledgePanels.pm b/lib/ProductOpener/KnowledgePanels.pm
@@ -698,7 +698,8 @@ sub create_environment_card_panel ($product_ref, $target_lc, $target_cc, $option
 		$panel_data_ref, $product_ref, $target_lc, $target_cc, $options_ref);
 
 	# Create the environment_card panel
-	create_panel_from_json_template("environment_card", "api/knowledge-panels/environment/environment_card.tt.json",
+	$panel_data_ref->{packaging_image} = data_to_display_image($product_ref, "packaging", $target_lc),
+		create_panel_from_json_template("environment_card", "api/knowledge-panels/environment/environment_card.tt.json",
 		$panel_data_ref, $product_ref, $target_lc, $target_cc, $options_ref);
 	return;
 }

diff --git a/templates/api/knowledge-panels/environment/environment_card.tt.json b/templates/api/knowledge-panels/environment/environment_card.tt.json
@@ -30,7 +30,7 @@
                 "panel_ids": ["carbon_footprint"],
             },
         },
-        [% END %]     
+        [% END %]    
         [% IF panels.packaging_recycling.defined %]
         {
             "element_type": "panel_group",
@@ -40,6 +40,9 @@
                 "panel_ids": [
                     "packaging_recycling"
                 ],
+                [% IF panel.packaging_image.defined %]
+                "image": [% encode_json(panel.packaging_image) %],
+                [% END %]
             },
         },
         [% END %]

diff --git a/templates/api/knowledge-panels/environment/packaging_recycling.tt.json b/templates/api/knowledge-panels/environment/packaging_recycling.tt.json
@@ -92,7 +92,7 @@
                                     [% IF packaging.quantity_per_unit %][% packaging.quantity_per_unit %] [% END %]
                                 </strong>
                                     [% IF packaging.material %]
-                                        ([% display_taxonomy_tag_name('packaging_materials',packaging.material) %][% IF packaging.weight_per_unit %] [% packaging.weight_per_unit %] g[% END %])
+                                        ([% display_taxonomy_tag_name('packaging_materials',packaging.material) %][% IF packaging.weight_measured %][% sep %]: [% packaging.weight_measured %] g[% END %])
                                     [% END %]
                                     <br>
                             [% END %]

diff --git a/templates/web/panels/image.tt.html b/templates/web/panels/image.tt.html
@@ -4,7 +4,9 @@
 
 <figure itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="margin-bottom:0">
 
-    <img style="border-radius:10px;margin-bottom:0.5rem;" [% IF image.type == 'front' %]id="og_image" [% END %] class="product_image" src="[% image.sizes.400.url %]" width="[% image.sizes.400.width %]" height="[% image.sizes.400.height %]" alt="[% image.alt %]" itemprop="thumbnail" loading="lazy">
+    <a data-reveal-id="drop_[% image.type %]">
+        <img style="border-radius:10px;margin-bottom:0.5rem;" [% IF image.type == 'front' %]id="og_image" [% END %] class="product_image" src="[% image.sizes.400.url %]" width="[% image.sizes.400.width %]" height="[% image.sizes.400.height %]" alt="[% image.alt %]" itemprop="thumbnail" loading="lazy">
+    </a>
 
     <meta itemprop="imgid" content="[% image.type %]">