How to make circle images in OSU Drupal 10

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.

While there might be many ways to do this, this is what I do.

Here’s image code from media module:

<drupal-media data-entity-type="media" data-entity-uuid="c1a84f83-4bb2-4514-b2fb-3be9b8651927"></drupal-media>

You can’t just add a class to that “drupal-media” bit o’ things. The following won’t work:

<drupal-media data-entity-type="media" class="image-circle" data-entity-uuid="c1a84f83-4bb2-4514-b2fb-3be9b8651927"></drupal-media>

You need to add a <div> around that and apply the classes in it:

<div class="image-circle">
<drupal-media data-entity-type="media" data-entity-uuid="c1a84f83-4bb2-4514-b2fb-3be9b8651927"></drupal-media>
</div>

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.

The following classes are pixel based:

.image-circle-150
.image-circle-200
.image-circle-220
.image-circle-550

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.

Also note, if you have a freaking huuuuuge square image and apply .image-circle-150, the display size will be 150px diameter – but the entire freaking huge image will bog down the page and user’s device as it downloads.

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… but whatever.)

Other width option

On occasion I’ve used additional width classes for image display size.

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.

<div class="image-circle text-center margin-inline-auto mw40ch">
<drupal-media data-entity-type="media" data-entity-uuid="c1a84f83-4bb2-4514-b2fb-3be9b8651927"></drupal-media>
</div>

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.

Both of those are custom classes.

Rounded, not round

I’ve also started using a smaller border radius to give larger, not square images a softer feel. I use “brp5em-img” custom css class in place of the “image-circle” class.

It basically stands for Border Radius Point 5em

I chose em instead of rem for some silly reason I can’t recall.

Custom css classes

Here are the classes I add to the css injector for my example.

.image-circle,
.image-circle img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50% !important;
    margin-inline: auto;
    margin-block: 1em;
}



.image-circle-150,
.image-circle-150 img {
    width: 150px;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50% !important;
    margin-inline: auto;
    margin-block: 1em;
}


.image-circle-200,
.image-circle-200 img {
    width: 200px;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50% !important;
    margin-inline: auto;
    margin-block: 1em;
}

.image-circle-220,
.image-circle-220 img {
    width: 220px;
    height: 220px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50% !important;
    margin-inline: auto;
    margin-block: 1em;
}


.image-circle-550,
.image-circle-550 img {
    width: 550px;
    height: 550px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50% !important;
    margin-inline: auto;
    margin-block: 1em;
}


.margin-inline-auto {
    margin-inline:auto !important;
}

.mw40ch {
    max-width:40ch !important;
}

.brp5em-img img {
    border-radius: 0.5em !important;
}