Plugin behavior change– text overlaying thumbnail

When did this happen?

Can you try to clear the cache and see if this fixes it?

Hi Ajay-
CRP caching was turned ON. In this setting, only newly generated content was displaying the problem, old posts were showing correctly. It has been many months (a year?) since I had added new content, so the problem may have been present for a long time, and just not triggered because I’d not added new posts until recently. So, I tried turning CRP caching OFF, and cleared the CRP’s cache– it said it cleared 1078 rows. Now the problem shows on both new posts AND old posts.

I don’t see an obvious way to turn off the display of text altogether. Is there a way to do that until the problem is resolved?

Thanks

What was the difference between the old and the new posts? Have you customised the CSS from the default CSS?

The process between producing old and new posts was exactly the same– it is a largely automated process that creates products in WooCommerce, the products being images (stock photos). The primary plugin to automate that process is completely unchanged between the old and the new, but of course WordPress has gone through several updates, as have WooCommerce, and my theme, Avada. Those are all up to date.

I don’t recall ever editing the CSS, and certainly not between the old and the new posts, but here it is in case it needs to be changed:

.crp_related {
clear: both;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px !important;
/*next line is border box around image and title– comment out to remove*/
border: 1px solid #313131;
padding: 6px;
}
.crp_related li:hover {
/*next line is color of hover over background*/
background: #67b7e1;
border-color: #bbb;
}
.crp_related a {
width: 150px;
height: 225px;
text-decoration: none;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related img {
max-width: 150px;
margin: auto;
}

/*below is text for pic titles*/
.crp_related .crp_title {
position: absolute;
height: inherit;
bottom: 6px;
left: 6px;
padding: 3px;
width: 144px; /* = 150px – (3px * 2) */
color: #fff;
font-size: .9em;
text-shadow: #000 .1em .1em .2em;
background: rgb(0.5, 0.5, 0.5);
background: rgba(0, 0, 0, 0.5);
}
.crp_related li:hover .crp_title {
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

.crp_related .crp_thumb, .crp_related li, .crp_related .crp_title {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.crp_clear {
clear: both;
}

Also, is there a way to turn off the text altogether, so that the thumbnails display nicely until the problem is resolved and I can turn the text back on?
Thanks

To disable the text, it would be

.crp_title {
display: none;
}

It seems like you have some custom text there in the Settings page. Can you please save a copy of this and empty the box. Then change the setting to Rounded Thumbnails in the settings page

Thanks, Ajay-
I removed the custom CSS, enabled Rounded Thumbnails, and it then displayed correctly according to those settings. Experimenting, I found that as long as Rounded Thumbnails was selected, any custom CSS was ignored, and wanting to customize the appearance, I disabled Rounded Thumbnails, then went to work tweaking the custom CSS. Thank you for providing the code to remove the text altogether, using that I was able to get an appearance I liked, decided I liked it better without the text at all. I imagine there’s some CSS code left that doesn’t need to be there, but it seems to be working correctly, now, without the text.

Glad to know you got it to work the way you wanted it.

Hi @scenicor! I modified the code a bit. If you like use on your page. I have it installed on my website: https://casinoduende.com/juegos-online/vip-european-roulette/
Also the css code you have it here:https://codepen.io/casinoduende/pen/vWKBqq

.crp_related {
clear: both;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px !important;
/*next line is border box around image and title– comment out to remove*/
border: 1px solid #ccc;
padding: 4px;
}
.crp_related li:hover {
/*next line is color of hover over background*/
background: #ccc;
border-color: #bbb;
}
.crp_related a {
width: 125px;
height: 140px;
text-decoration: none;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related img {
max-width: 125px;
margin: auto;
}

/*below is text for pic titles*/
.crp_related .crp_title {
position: absolute;
display: block;
height: 30px;
bottom: 2px;
left: 0px;
padding: 0px;
width: 125px; /* = 150px – (3px * 2) */
color: #fff;
font-size: 14px;
line-height: 15px;
text-align: center;
text-shadow: #000 .1em .1em .2em;
background: rgb(0.5, 0.5, 0.5);
background: rgba(0, 0, 0, 0.5);
}
.crp_related li:hover .crp_title {
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

.crp_related .crp_thumb, .crp_related li, .crp_related .crp_title {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.crp_clear {
clear: both;
}