{"id":2209,"date":"2013-01-25T20:48:28","date_gmt":"2013-01-26T01:48:28","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/01\/25\/create-preview-style\/"},"modified":"2021-08-16T23:23:36","modified_gmt":"2021-08-17T03:23:36","slug":"create-preview-style","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/","title":{"rendered":"How to create an image preview style in Drupal 7"},"content":{"rendered":"

After learning how to set the Image Style Preview<\/a> in the last article, you may need or want a bit more customized image style. Perhaps you want to add a setting between thumbnail and medium, or even one larger than the current large setting. There is a setting in Drupal 7 that allows you to create your own Image Style Preview<\/strong>. Follow the steps below to learn how to create or modify an image preview style in Drupal 7.<\/span><\/p>\n

Creating an 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 Configuration <\/strong>option.
    \"_main-dashboard-configuration\"<\/a>\n
    <\/div>\n<\/li>\n
  3. From this next page, click on the Image Styles<\/strong> link found under the Media category.
    \"media-image-style\"<\/a>\n
    <\/div>\n<\/li>\n
  4. This screen is the Image Styles<\/strong> list screen. From here, click on the Add Style<\/strong> link found at the top of the page.
    \"add-image-style\"<\/a>\n
    <\/div>\n<\/li>\n
  5. The next page only asks for a Style Name<\/strong>. In this example, I am going to create a new Image Style setting named \u2018small<\/em>\u2018. After naming your new style, click the Create New Style<\/strong> button.
    \"add-small\"<\/a>\n
    <\/div>\n<\/li>\n
  6. After creating the style, you need to add effects to the preview style. In our example, we will mimic the effects of the default settings while making our small<\/em> option. The effects dropdown has several options, shown in the table below. For our example, we will choose the Scale <\/strong>option. Once you choose your option, select the Add <\/strong>button to the right.

    \n\n\n\n\n\n\n\n\n
    Crop<\/td>\n<\/tr>\n
    Desaturate<\/td>\n<\/tr>\n
    Resize<\/td>\n<\/tr>\n
    Rotate<\/td>\n<\/tr>\n
    Scale<\/td>\n<\/tr>\n
    Scale and Crop<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \"image-style-settings\"<\/a><\/p>\n

    <\/div>\n<\/li>\n
  7. This takes us to another page to further design the scaling effect. Here we will set the max settings to 150 width and 150 height. This means that the image will scale, keeping proper dimensions, until either height or width hits 150 pixels. The Allow Upscaling setting, if checked, will increase the image size if it was below 150 x 150\u00a0 until it hits the same 150 pixels or, if unselected, will keep its original size. In this case, we selected the option. Click on the Add Effect button once completed.
    \"edit-scale\"<\/a>\n
    <\/div>\n<\/li>\n
  8. You are taken back to the page to edit the style. You can add additional effects if you like. Once you are finished, click the Update Style button. This will conclude adding your new image preview style. The screenshot below shows the new style as it appears in the dropdown when you modify the Image Style Preview<\/a>.
    \"image-style-after\"<\/a>\n
    <\/div>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    After learning how to set the Image Style Preview in the last article, you may need or want a bit more customized image style. Perhaps you want to add a setting between thumbnail and medium, or even one larger than the current large setting. There is a setting in Drupal 7 that allows you to 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-2209","post","type-post","status-publish","format-standard","hentry","category-drupal"],"acf":[],"yoast_head":"\nHow to create an image preview style in Drupal 7 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.\" \/>\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\/create-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 create an image preview style in Drupal 7 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-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=\"2013-01-26T01:48:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:23:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.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\/create-preview-style\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"How to create an image preview style in Drupal 7\",\"datePublished\":\"2013-01-26T01:48:28+00:00\",\"dateModified\":\"2021-08-17T03:23:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/\"},\"wordCount\":396,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png\",\"articleSection\":[\"Drupal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/\",\"name\":\"How to create an 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\/create-preview-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png\",\"datePublished\":\"2013-01-26T01:48:28+00:00\",\"dateModified\":\"2021-08-17T03:23:36+00:00\",\"description\":\"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png\",\"width\":1018,\"height\":509,\"caption\":\"_main-dashboard-configuration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create an 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 create an image preview style in Drupal 7 | InMotion Hosting","description":"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.","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\/create-preview-style\/","og_locale":"en_US","og_type":"article","og_title":"How to create an image preview style in Drupal 7 | InMotion Hosting","og_description":"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-01-26T01:48:28+00:00","article_modified_time":"2021-08-17T03:23:36+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.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\/create-preview-style\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"How to create an image preview style in Drupal 7","datePublished":"2013-01-26T01:48:28+00:00","dateModified":"2021-08-17T03:23:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/"},"wordCount":396,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png","articleSection":["Drupal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/","name":"How to create an 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\/create-preview-style\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png","datePublished":"2013-01-26T01:48:28+00:00","dateModified":"2021-08-17T03:23:36+00:00","description":"This Drupal 7 article will give you a walkthrough on creating your own image preview style in the admin dashboard.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Configuration__main-dashboard-configuration.png","width":1018,"height":509,"caption":"_main-dashboard-configuration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/create-preview-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to create an 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\/2209","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=2209"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2209\/revisions"}],"predecessor-version":[{"id":85019,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2209\/revisions\/85019"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}