{"id":1620,"date":"2012-07-25T17:15:54","date_gmt":"2012-07-25T21:15:54","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/07\/25\/change-preview-style\/"},"modified":"2021-08-16T23:38:18","modified_gmt":"2021-08-17T03:38:18","slug":"change-preview-style","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/","title":{"rendered":"How to modify image preview style in Drupal 7"},"content":{"rendered":"

When working with content types in Drupal 7 and you decide to add an image, a preview of that image will show in the editor area after you link it to your page. This preview can be sized differently, depending on your content type. This means you have the ability to set the preview for a specific size and it will appear that way in all pages for that specific content type. For example, all Articles will display the preview the same way, all Basic pages the same, etc.<\/p>\n

This is a setting that is only for the user creating the page and will not display anything any differently for site visitors. Setting the Image Preview Style in Drupal 7 can be done by following the steps below.<\/p>\n

Setting the Image Preview Style in Drupal 7<\/b><\/p>\n

    \n
  1. Log into the Drupal 7 admin dashboard<\/a>.<\/li>\n
  2. Using the top menu bar, locate and click on the Structure <\/strong>option.
    \"structure\"<\/a>\n
    <\/div>\n<\/li>\n
  3. From this next page, click on the Content Types<\/strong> link.
    \"content-types\"<\/a>\n
    <\/div>\n<\/li>\n
  4. On the Content Types<\/strong> page, find the type of content you want to work with. For example, I have been working with Basic Pages<\/strong> so I will choose that for this tutorial as well. After locating your desired content type, click on the appropriate Manage Fields<\/strong> link.
    \"manage-fields\"<\/a>\n
    <\/div>\n<\/li>\n
  5. Next, find the Image<\/strong> row and then click on the Edit<\/strong> link to take you to the settings page.
    \"image-edit\"<\/a>\n
    <\/div>\n<\/li>\n
  6. You are now on the settings page for the image<\/strong> field. From here, scroll down and find the Preview Image Style <\/strong>setting. This setting is a dropdown with the following default options (<no preview>, thumbnail, medium, large<\/em>). Click on the selection of your choice.|
    \"image-preview-style\"<\/a>\n
    <\/div>\n<\/li>\n
  7. Once you have selected your Preview Image Style<\/strong>, click on the Save Settings<\/strong> button at the bottom of the page to save it. Whenever you add an image for this content type, that image will preview according to this selected size in the admin area. Below are samples of the each of the default settings.

    \n\n\n\n\n
    thumbnail<\/th>\nmedium<\/th>\nlarge<\/th>\n<\/tr>\n
    \"image-preview-thumb\"<\/a>\n
    <\/div>\n<\/td>\n
    		\"image-preview-med\"<\/a>\n
    <\/div>\n<\/td>\n
    		\"image-preview-lg\"<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    When working with content types in Drupal 7 and you decide to add an image, a preview of that image will show in the editor area after you link it to your page. This preview can be sized differently, depending on your content type. This means you have the ability to set the preview for Read More ><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[372],"tags":[],"class_list":["post-1620","post","type-post","status-publish","format-standard","hentry","category-drupal"],"acf":[],"yoast_head":"\nHow to modify image preview style in Drupal 7 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to modify image preview style in Drupal 7 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-25T21:15:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:38:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png\" \/>\n<meta name=\"author\" content=\"Scott Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"How to modify image preview style in Drupal 7\",\"datePublished\":\"2012-07-25T21:15:54+00:00\",\"dateModified\":\"2021-08-17T03:38:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\"},\"wordCount\":339,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png\",\"articleSection\":[\"Drupal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\",\"name\":\"How to modify image preview style in Drupal 7 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png\",\"datePublished\":\"2012-07-25T21:15:54+00:00\",\"dateModified\":\"2021-08-17T03:38:18+00:00\",\"description\":\"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png\",\"width\":952,\"height\":654,\"caption\":\"structure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to modify image preview style in Drupal 7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\",\"name\":\"Scott Mitchell\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to modify image preview style in Drupal 7 | InMotion Hosting","description":"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/","og_locale":"en_US","og_type":"article","og_title":"How to modify image preview style in Drupal 7 | InMotion Hosting","og_description":"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-07-25T21:15:54+00:00","article_modified_time":"2021-08-17T03:38:18+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png","type":"","width":"","height":""}],"author":"Scott Mitchell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Scott Mitchell","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"How to modify image preview style in Drupal 7","datePublished":"2012-07-25T21:15:54+00:00","dateModified":"2021-08-17T03:38:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/"},"wordCount":339,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png","articleSection":["Drupal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/","name":"How to modify image preview style in Drupal 7 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png","datePublished":"2012-07-25T21:15:54+00:00","dateModified":"2021-08-17T03:38:18+00:00","description":"This article walks you through changing the image preview style in your Drupal 7 admin area when creating pages of content.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/03\/edu_Drupal_7_Structure_structure.png","width":952,"height":654,"caption":"structure"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/change-preview-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to modify image preview style in Drupal 7"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed","name":"Scott Mitchell","url":"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1620"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1620\/revisions"}],"predecessor-version":[{"id":85776,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1620\/revisions\/85776"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}