{"id":1033,"date":"2024-04-10T13:25:40","date_gmt":"2024-04-10T20:25:40","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/calverta\/?p=1033"},"modified":"2024-09-24T11:50:09","modified_gmt":"2024-09-24T18:50:09","slug":"how-to-make-circle-images-in-osu-drupal-10","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","title":{"rendered":"How to make circle images in OSU Drupal 10"},"content":{"rendered":"\n<p>Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10&#8217;s media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.<\/p>\n\n\n\n<p>While there might be many ways to do this, this is what I do.<\/p>\n\n\n\n<p>Here&#8217;s image code from media module:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;drupal-media data-entity-type=&quot;media&quot; data-entity-uuid=&quot;c1a84f83-4bb2-4514-b2fb-3be9b8651927&quot;&gt;&lt;\/drupal-media&gt;\n\n<\/pre><\/div>\n\n\n<p>You can&#8217;t just add a class to that &#8220;drupal-media&#8221; bit o&#8217; things. The following won&#8217;t work:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;drupal-media data-entity-type=&quot;media&quot; class=&quot;image-circle&quot; data-entity-uuid=&quot;c1a84f83-4bb2-4514-b2fb-3be9b8651927&quot;&gt;&lt;\/drupal-media&gt;\n\n<\/pre><\/div>\n\n\n<p>You need to add a &lt;div&gt; around that and apply the classes in it:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;image-circle&quot;&gt;\n&lt;drupal-media data-entity-type=&quot;media&quot; data-entity-uuid=&quot;c1a84f83-4bb2-4514-b2fb-3be9b8651927&quot;&gt;&lt;\/drupal-media&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>That version of the class will simply apply a 50% border radius to the image, but the image will still display at actual size. There are a couple of variations of that class I use.<\/p>\n\n\n\n<p>The following classes are pixel based:<\/p>\n\n\n\n<p>.image-circle-150<br>.image-circle-200<br>.image-circle-220<br>.image-circle-550<\/p>\n\n\n\n<p>Note: the image you upload needs to already be cropped at a 1:1 ratio (square) otherwise these classes will make more of a pill shape.<\/p>\n\n\n\n<p>Also note, if you have a freaking huuuuuge square image and apply .image-circle-150, the display size will be 150px diameter &#8211; but the entire freaking huge image will bog down the page and user&#8217;s device as it downloads.<\/p>\n\n\n\n<p>Typically all my on-page profile images (nearly only type of image I make a circle of) are pre-cropped to 220px square and optimized using https:\/\/squoosh.app\/ as webp, full effort, 85% quality. (even that is a little higher quality than necessary&#8230; but whatever.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Other width option<\/h3>\n\n\n\n<p>On occasion I&#8217;ve used additional width classes for image display size.<\/p>\n\n\n\n<p>I used the following for a nearly obnoxiously large image of a student in a two column section with a quote from them in one column and image in the other column.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;image-circle text-center margin-inline-auto mw40ch&quot;&gt;\n&lt;drupal-media data-entity-type=&quot;media&quot; data-entity-uuid=&quot;c1a84f83-4bb2-4514-b2fb-3be9b8651927&quot;&gt;&lt;\/drupal-media&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>I used margin-inline-auto to center the div (and therefore also the image) and mw40ch to make the diameter of the image 40 ch units diameter max.<\/p>\n\n\n\n<p>Both of those are custom classes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Rounded, not round<\/h2>\n\n\n\n<p>I&#8217;ve also started using a smaller border radius to give larger, not square images a softer feel. I use &#8220;brp5em-img&#8221; custom css class in place of the &#8220;image-circle&#8221; class.<\/p>\n\n\n\n<p>It basically stands for Border Radius Point 5em <\/p>\n\n\n\n<p>I chose em instead of rem for some silly reason I can&#8217;t recall.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Custom css classes<\/h2>\n\n\n\n<p class=\"has-text-align-center\">Here are the classes I add to the css injector for my example. <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.image-circle,\n.image-circle img {\n    -o-object-fit: cover;\n    object-fit: cover;\n    border-radius: 50% !important;\n    margin-inline: auto;\n    margin-block: 1em;\n}\n\n\n\n.image-circle-150,\n.image-circle-150 img {\n    width: 150px;\n    height: 150px;\n    -o-object-fit: cover;\n    object-fit: cover;\n    border-radius: 50% !important;\n    margin-inline: auto;\n    margin-block: 1em;\n}\n\n\n.image-circle-200,\n.image-circle-200 img {\n    width: 200px;\n    height: 200px;\n    -o-object-fit: cover;\n    object-fit: cover;\n    border-radius: 50% !important;\n    margin-inline: auto;\n    margin-block: 1em;\n}\n\n.image-circle-220,\n.image-circle-220 img {\n    width: 220px;\n    height: 220px;\n    -o-object-fit: cover;\n    object-fit: cover;\n    border-radius: 50% !important;\n    margin-inline: auto;\n    margin-block: 1em;\n}\n\n\n.image-circle-550,\n.image-circle-550 img {\n    width: 550px;\n    height: 550px;\n    -o-object-fit: cover;\n    object-fit: cover;\n    border-radius: 50% !important;\n    margin-inline: auto;\n    margin-block: 1em;\n}\n\n\n.margin-inline-auto {\n    margin-inline:auto !important;\n}\n\n.mw40ch {\n    max-width:40ch !important;\n}\n\n.brp5em-img img {\n    border-radius: 0.5em !important;\n}\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10&#8217;s media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.<\/p>\n","protected":false},"author":1766,"featured_media":1069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161733],"tags":[],"class_list":["post-1033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to make circle images in OSU Drupal 10 | Bad Advice Alan<\/title>\n<meta name=\"description\" content=\"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10&#039;s media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make circle images in OSU Drupal 10 | Bad Advice Alan\" \/>\n<meta property=\"og:description\" content=\"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10&#039;s media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/\" \/>\n<meta property=\"og:site_name\" content=\"Bad Advice Alan\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-10T20:25:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-24T18:50:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AlanCalvert\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan\" \/>\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:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/\"},\"author\":{\"name\":\"Alan\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/#\\\/schema\\\/person\\\/b4e02e8d5dd36413742b99a2c292fcde\"},\"headline\":\"How to make circle images in OSU Drupal 10\",\"datePublished\":\"2024-04-10T20:25:40+00:00\",\"dateModified\":\"2024-09-24T18:50:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/\"},\"wordCount\":409,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/1105\\\/files\\\/2024\\\/04\\\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"articleSection\":[\"Howto\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/\",\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/\",\"name\":\"How to make circle images in OSU Drupal 10 | Bad Advice Alan\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/1105\\\/files\\\/2024\\\/04\\\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"datePublished\":\"2024-04-10T20:25:40+00:00\",\"dateModified\":\"2024-09-24T18:50:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/#\\\/schema\\\/person\\\/b4e02e8d5dd36413742b99a2c292fcde\"},\"description\":\"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/1105\\\/files\\\/2024\\\/04\\\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/1105\\\/files\\\/2024\\\/04\\\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/how-to-make-circle-images-in-osu-drupal-10\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make circle images in OSU Drupal 10\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/#website\",\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/\",\"name\":\"Bad Advice Alan\",\"description\":\"How and why I do the things I do in OSU Drupal\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/#\\\/schema\\\/person\\\/b4e02e8d5dd36413742b99a2c292fcde\",\"name\":\"Alan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"caption\":\"Alan\"},\"description\":\"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.\",\"sameAs\":[\"https:\\\/\\\/alancalvert.carrd.co\\\/\",\"https:\\\/\\\/instagram.com\\\/alancalvert\",\"https:\\\/\\\/x.com\\\/AlanCalvert\"],\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/calverta\\\/author\\\/calverta\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make circle images in OSU Drupal 10 | Bad Advice Alan","description":"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.","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:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","og_locale":"en_US","og_type":"article","og_title":"How to make circle images in OSU Drupal 10 | Bad Advice Alan","og_description":"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.","og_url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","og_site_name":"Bad Advice Alan","article_published_time":"2024-04-10T20:25:40+00:00","article_modified_time":"2024-09-24T18:50:09+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg","type":"image\/jpeg"}],"author":"Alan","twitter_card":"summary_large_image","twitter_creator":"@AlanCalvert","twitter_misc":{"Written by":"Alan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#article","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/"},"author":{"name":"Alan","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"headline":"How to make circle images in OSU Drupal 10","datePublished":"2024-04-10T20:25:40+00:00","dateModified":"2024-09-24T18:50:09+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/"},"wordCount":409,"commentCount":0,"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","articleSection":["Howto"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","name":"How to make circle images in OSU Drupal 10 | Bad Advice Alan","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#primaryimage"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","datePublished":"2024-04-10T20:25:40+00:00","dateModified":"2024-09-24T18:50:09+00:00","author":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"description":"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.","breadcrumb":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#primaryimage","url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","contentUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.oregonstate.edu\/calverta\/"},{"@type":"ListItem","position":2,"name":"How to make circle images in OSU Drupal 10"}]},{"@type":"WebSite","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website","url":"https:\/\/blogs.oregonstate.edu\/calverta\/","name":"Bad Advice Alan","description":"How and why I do the things I do in OSU Drupal","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.oregonstate.edu\/calverta\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde","name":"Alan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","caption":"Alan"},"description":"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.","sameAs":["https:\/\/alancalvert.carrd.co\/","https:\/\/instagram.com\/alancalvert","https:\/\/x.com\/AlanCalvert"],"url":"https:\/\/blogs.oregonstate.edu\/calverta\/author\/calverta\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","jetpack-related-posts":[{"id":942,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-anchor-links-in-osu-drupal-10\/","url_meta":{"origin":1033,"position":0},"title":"How to make anchor links in OSU Drupal 10","author":"Alan","date":"2024\/01\/09","format":false,"excerpt":"Until there is a button, here's how to add anchor links manually.","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1030,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","url_meta":{"origin":1033,"position":1},"title":"Add a little call out box in OSU Drupal 10 with CSS classes","author":"Alan","date":"2024\/04\/10","format":false,"excerpt":"Sometimes it\u2019s nice to give a visual little call out in the middle of some block of text. Perhaps it\u2019s a notification or you really just want to make a small section of stuff semantically stay together.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1084,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","url_meta":{"origin":1033,"position":2},"title":"Line Width in Digital Typography for Accessibility and Comprehension","author":"Alan","date":"2025\/12\/09","format":false,"excerpt":"The measure Choosing the right line width (called the \"measure\") for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules. Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Visual guide on line width. Lines that are too long (>80 CPL) cause eye strain and missed returns, while lines that are too short (","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":205,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/howto-post-moore-family-center-blog\/","url_meta":{"origin":1033,"position":3},"title":"Howto: Post to the Moore Family Center Blog","author":"Alan","date":"2014\/09\/16","format":false,"excerpt":"This post will show the steps OSUDI's need to take to set up their accounts on the MFC Blog as well as their avatar\/profile image through the use of Gravatar, and finally the process of how to send posts to the CPHHS's web coordinator for final posting to the MFC\u2026","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":891,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-i-archive-raw-photo-files\/","url_meta":{"origin":1033,"position":4},"title":"How I archive RAW photo files","author":"Alan","date":"2023\/02\/17","format":false,"excerpt":"RAW files are important to keep in order to retain full editing potential. Here's how I back mine up to protect them and save space on my computer.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/users\/1766"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/comments?post=1033"}],"version-history":[{"count":12,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1033\/revisions"}],"predecessor-version":[{"id":1071,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1033\/revisions\/1071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media\/1069"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media?parent=1033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/categories?post=1033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/tags?post=1033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}