How to display featured image in inherited format

Hi, @bdienes

Thank you for your question.

You can overwrite the CSS of this plugin from other files.
Or you can remove the initial styles.

Modify the default style
shortcode: [ccc_my_favorite_list_results]

#ccc-my_favorite-list[data-ccc_my_favorites-list-style="1"] .list-ccc_favorite .img-post-thumbnail img { ... }

Please see the related topic for usage. (Third to last thread)

Also, you can customize the list view.

shortcode: [ccc_my_favorite_list_custom_template]

Please see the related topic for usage. (Third to last thread)

Thanks

Thanks for the idea.
I have tried editing the settings, but it makes no change to the display.
If I want to display a square image, instead of a clipped image that is a rectangle, how would I code that? I tried setting object-fit to scale-down, but it made no difference. I need the height to be the same as the width.

#ccc-my_favorite-list[data-ccc_my_favorites-list-style="1"] .list-ccc_favorite .img-post-thumbnail {
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 */
  position: relative;
}
#ccc-my_favorite-list[data-ccc_my_favorites-list-style="1"] .list-ccc_favorite .img-post-thumbnail img {
  object-fit: scale-down;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Hi, @bdienes
Thanks for the reply.

How about the following settings?
padding-bottom: 100%; /* 1:1 */

#ccc-my_favorite-list[data-ccc_my_favorites-list-style="1"] .list-ccc_favorite .img-post-thumbnail {
  width: 100%;
  padding-bottom: 100%;  /* 1:1 */
  position: relative;
}

Please try it.
Thanks

Thanks! That restores the square image,
Unfortunately it places the post title way below it at the bottom of the page, instead of directly below the featured image.
If I switch to position: absolute, the bottom of the square is cut off, and the post title disappears.

Hi, @bdienes

Unfortunately, I don’t know why the title is moving to the bottom of the page even though you just changed the padding-bottom from 56.25% to 100%.

I don’t know how it relates to other CSS, so it may be difficult to give you an accurate answer.

In such cases, it may be better for you to set your own style instead of using the initial style.

Style your own
shortcode: [ccc_my_favorite_list_results style="your_style_name"]

#ccc-my_favorite-list[data-ccc_my_favorites-list-style="your_style_name"] {
 ...
}

Please, try it.

Also, you can customize the list view.

shortcode: [ccc_my_favorite_list_custom_template]

Please see the related topic for usage.

Thanks