Tina times circles

tinatimes.md

Homepage & Sidebar

There are two unique instances where featured images are shown in this theme. The first is a bit more simple since the theme loads the square formatted images. These can be properly "circled" with the following added to the style.css:

.type-post.has-post-thumbnail > a {
  line-height: 0;
  overflow: hidden;
  border-radius: 50%;
}

Available classes for the above

HOMEPAGE RECENT POSTS
simple-grid one-third first post-2308 post type-post status-publish format-standard has-post-thumbnail category-health-wellness entry

SIDEBAR MOST VIEWED
post-2070 post type-post status-publish format-standard has-post-thumbnail category-get-motivated category-inspiration category-something-to-do entry

Category pages

These ones are a bit more tough since the theme doesn't load the square image, but the original. This means the image will need to be manipulated to always be 100% the height of the container it lies within but unfortunately that assumes all images are landscape square, and not portrait.

Here's a rough attempt in pure CSS

img.post-image.entry-image {
  float: none;
  width:100%;
  height:100%;
}

header.entry-header > a {
  width: 215px; /* you wont want to hard code the height here, since widths will change based on browser window width */
  height: 215px;
  overflow: hidden;
  border-radius: 50%;
  display: block;
}

Available classes

simple-grid one-third odd first post-2070 post type-post status-publish format-standard has-post-thumbnail category-get-motivated category-inspiration category-something-to-do entry