{"id":6479,"date":"2024-04-14T18:37:46","date_gmt":"2024-04-14T10:37:46","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6479"},"modified":"2024-04-14T18:37:46","modified_gmt":"2024-04-14T10:37:46","slug":"picture-field","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/picture-field\/","title":{"rendered":"Picture field"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The picture field is a Collection field that enables you and your teammates to upload a picture for your Collection items and utilize it in your designs. Collection pictures can be utilized as a standard <a href=\"https:\/\/help.webflow.com\/article\/image-element\">image element<\/a> or a <a href=\"https:\/\/help.webflow.com\/article\/background-image\">background picture<\/a> within <a href=\"https:\/\/help.webflow.com\/article\/collection-pages\">Collection Pages<\/a> and <a href=\"https:\/\/help.webflow.com\/article\/collection-list\">Collection Lists<\/a>.<\/p>\n<p>You can also employ the picture field to sort a Collection List or establish conditional visibility on elements in Collection Lists and pages. Here are some typical uses for the picture field:<\/p>\n<ul>\n<li>Profile snapshot for authors or team members<\/li>\n<li>Symbols<\/li>\n<li>Backdrop pictures for sections<\/li>\n<li>Picture for Open Graph<\/li>\n<\/ul>\n<h5>In this tutorial<\/h5>\n<ol>\n<li>Create a picture field<\/li>\n<li>Insert a picture into the picture field<\/li>\n<li>Use the picture field in your designs<\/li>\n<li>Sort a Collection List using the picture field<\/li>\n<li>Establish conditional visibility using the picture field<\/li>\n<\/ol>\n<h2>Establish a picture field<\/h2>\n<p>A picture field can be appended to a new or existing Collection. In Collection configurations, tap <strong>New Field<\/strong> and then select the <strong>Picture<\/strong> field.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a8df7242ef49d8425ea_5e61314646e6b82189d23539_59926908e03d780001a55138_doc-252520cms252520field252520-252520image252520-25252000.png\" title=\"64b94a8df7242ef49d8425ea_5e61314646e6b82189d23539_59926908e03d780001a55138_doc-252520cms252520field252520-252520image252520-25252000\"><\/div>\n<\/figure>\n<p>And as with any field, you can determine if the field is compulsory or not.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/233092728\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/233092728\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Insert a picture into the picture field<\/h2>\n<p>To input pictures in the CMS, drag and drop a picture or click to upload one. You can upload any compatible <a href=\"https:\/\/help.webflow.com\/article\/image-file-types\">picture file type<\/a>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/233092733\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/233092733\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h6>The maximal file size for pictures is 4MB. Adaptive variations are formulated for these pictures upon upload. Nonetheless, these variations are utilized solely when the pictures are employed as image elements, not on background pictures.<\/h6>\n<h2>Utilize the picture field in your designs<\/h2>\n<p>In any Collection List or\u00a0Collection Page, you can link a picture field to various elements or styles to integrate your Collection pictures into your designs.<\/p>\n<h3>Link the picture field to image elements<\/h3>\n<ol>\n<li>Incorporate an image element to a Collection List or Collection Page<\/li>\n<li>Mark the <strong>Obtain picture from<\/strong> checkbox in the <strong>Picture Settings<\/strong><\/li>\n<li>Select the pertinent picture field from the dropdown<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/233092736\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/233092736\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>You can also access the picture settings by choosing the element and either tapping the settings icon next to the element label on the canvas, or by navigating to the Settings panel (D).<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"333px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a8df7242ef49d8425d7_5e613146df9df82d53ee3062_5992691b0a6863000119772c_doc-252520cms252520field252520-252520image252520-25252004.png\" title=\"64b94a8df7242ef49d8425d7_5e613146df9df82d53ee3062_5992691b0a6863000119772c_doc-252520cms252520field252520-252520image252520-25252004\"><\/div>\n<\/figure>\n<p>You can disconnect the connection by unchecking the <strong>Obtain picture from<\/strong>\u00a0checkbox under <strong>Picture Properties.<\/strong><\/p>\n<h3>Establish dynamic alt descriptors<\/h3>\n<p>To configure a dynamic alt text for these pictures:<\/p>\n<ol>\n<li>Select the picture<\/li>\n<li>Head to the\u00a0<strong>Settings<\/strong>\u00a0tab<\/li>\n<li>Beneath Picture properties, select the &#8220;<strong>Obtain Alt Text from:<\/strong>&#8221; checkbox<\/li>\n<li>Select the field that houses the Alt text for your pictures.<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"333px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94a8df7242ef49d8425de_5e6131455d6b0e899e887ba9_59b81c40e0661d00010b4227_dynamic-alt-text.png\" alt=\"Dynamic alt attribute\" title=\"64b94a8df7242ef49d8425de_5e6131455d6b0e899e887ba9_59b81c40e0661d00010b4227_dynamic-alt-text\"><\/div><figcaption><em>\u200d<\/em><\/figcaption><\/figure>\n<h3>Link the picture field to background pictures<\/h3>\n<p>You can designate Collection pictures as the <a href=\"https:\/\/help.webflow.com\/article\/background\">backdrop<\/a> of an element like a <a href=\"https:\/\/help.webflow.com\/article\/section\">section<\/a> or a <a href=\"https:\/\/help.webflow.com\/article\/div-block\">div block<\/a> to produce, for instance, blog thumbnail pictures or hero backdrop pictures. To establish a dynamic backdrop picture:<\/p>\n<h4>1 &#8211; Link the backdrop picture to a picture field<\/h4>\n<ol>\n<li>Earmark a section<\/li>\n<li>Visit the <strong>Settings Panel (D)<\/strong><\/li>\n<li>Opt for the <strong>Obtain BG picture from<\/strong> option<\/li>\n<li>Select an <strong>picture field<\/strong> from the field dropdown<\/li>\n<\/ol>\n<h4>2 &#8211; Modify the backdrop picture settings<\/h4>\n<p>While linking a picture field to a backdrop picture, the default backdrop picture settings are implemented. To supersede those settings:<\/p>\n<ol>\n<li>Whilst still picking the same section, insert a <strong>backdrop picture<\/strong> in the style panel<\/li>\n<li>Specify the size, position, and tiling settings for your backdrop picture<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/233092738\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/233092738\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h6>Any\u00a0<a href=\"https:\/\/help.webflow.com\/article\/background-image\">backdrop picture<\/a>\u00a0set on this element in the Styles Panel will be overridden with the Collection picture when this setting is selected for this element.<\/h6>\n<blockquote><p>Any other\u00a0backdrop styling\u00a0like a gradient or a solid color set on this element will reset the dynamic backdrop picture positioning.<\/p><\/blockquote>\n<h3>Eliminate the dynamic backdrop picture<\/h3>\n<p>You can detach the connection by unchecking the <strong>Obtain BG picture from<\/strong>\u00a0checkbox under <strong>Collection Style Settings.<\/strong><\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"333px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a8df7242ef49d8425e6_5e613147d21513e468bb1af6_59926930b5ff2a0001acad8d_doc-252520cms252520field252520-252520image252520-25252006.png\" title=\"64b94a8df7242ef49d8425e6_5e613147d21513e468bb1af6_59926930b5ff2a0001acad8d_doc-252520cms252520field252520-252520image252520-25252006\"><\/div>\n<\/figure>\n<h3>Link the picture field to a Lightbox<\/h3>\n<ol>\n<li>Insert a lightbox in a Collection List or Collection Page<\/li>\n<li>Choose the lightbox image placeholder<\/li>\n<li>In the <strong>Image Options<\/strong>, <strong>retrieve <\/strong>the <strong>picture from<\/strong> the relevant picture field<\/li>\n<li>In the Lightbox settings, <strong>acquire <\/strong>the <strong>media from<\/strong> the same picture field<\/li>\n<\/ol>\n<h2>Sort a Collection List using the picture field<\/h2>\n<p>In some scenarios, you may opt to showcase a Collection List that solely exhibits Collection items with a distinct picture field designated. For instance, you might wish to present only items that hold a thumbnail picture designated. To carry out this:<\/p>\n<ol>\n<li>Choose the Collection List you intend to sort<\/li>\n<li>Proceed to the <strong>Settings panel (D)<\/strong><\/li>\n<li>Include a <strong>sorting<\/strong> under <strong>Collection List Settings<\/strong><\/li>\n<li>Select the pertinent picture field in the primary dropdown: \u201cThumbnail Picture\u201d for this illustration<\/li>\n<li>Opt <strong>is assigned<\/strong> in the second section<\/li>\n<li>Press <strong>Save<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"333px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a8df7242ef49d8425e2_5e6131468d7690a858d32ee6_5992693be03d780001a55139_doc-252520cms252520field252520-252520picture252520-25252007.png\" title=\"64b94a8df7242ef49d8425e2_5e6131468d7690a858d32ee6_5992693be03d780001a55139_doc-252520cms252520field252520-252520picture252520-25252007\"><\/div>\n<\/figure>\n<p>The sorting regulations that can be utilized with the pictures field are:<\/p>\n<ul>\n<li><strong>Is Assigned<\/strong> &#8211; seeks Collection items that possess a picture for this picture field<\/li>\n<li><strong>Is Unassigned<\/strong> &#8211; seeks Collection items that lack a picture designated for this picture field<\/li>\n<\/ul>\n<p><a href=\"https:\/\/help.webflow.com\/article\/filtering-collection-lists\">Discover more regarding sorting Collection Lists<\/a>.<\/p>\n<h2>Establish conditional visibility utilizing the picture field<\/h2>\n<p>Similarly, you can fix a conditional visibility law on a picture component in your Collection List or Page. This will make sure that picture components will be visible solely when a picture is uploaded for a specified Collection item.<\/p>\n<ol>\n<li>Select a picture component that&#8217;s linked to a picture field<\/li>\n<li>Access the <strong>Settings panel (D)<\/strong><\/li>\n<li>Include a <strong>situation<\/strong> (when this component is visible) under <strong>Conditional Visibility<\/strong><\/li>\n<li>Select your picture field in the primary dropdown<\/li>\n<li>Opt for <strong>Is Assigned<\/strong> in the secondary dropdown<\/li>\n<li>Tap on <strong>Save<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"333px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a8df7242ef49d8425db_5e613146df9df84e69ee3063_599269477851aa0001d84ba7_doc-252520cms252520field252520-252520picture252520-25252008.png\" title=\"64b94a8df7242ef49d8425db_5e613146df9df84e69ee3063_599269477851aa0001d84ba7_doc-252520cms252520field252520-252520picture252520-25252008\"><\/div>\n<\/figure>\n<p><a href=\"http:\/\/help.webflow.com\/article\/conditional-visibility\">Delve into more details about conditional visibility.<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the image field to upload images in dynamic designs and template pages.","protected":false},"author":2,"featured_media":6480,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-6479","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6479"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6479\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6480"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}