Fernando García

Ok, I hope it helps you!

Hello Ajay!

Yes, this is the CSS I have implemented in a site, disabling plugin styles.

Theme is GeneratePress. It should be tested in other sites and themes

/* CONTEXTUAL RELATED POSTS */
/* Disable plugin styles! */
/* The container */
div.crp_related {
}
/* The list (flex display): */
/* Negative lateral margin (-15px) to align the li lateral padding(15px).
div.crp_related ul {  
  list-style-type: none;
  padding: 0;
  margin: 0px -15px 0px -15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
/* Each item list (flex childs) */
div.crp_related ul li {
  padding: 0px 15px;
  margin-bottom: 20px;
  width: 33.33%;
}
/* 2 columns for tablet & mobile */
@media (max-width: 1024px) {
  div.crp_related ul li {
    width: 50%;
  }
}
/* The link (figure & span) */
div.crp-related ul li a.crp_link {
  display: block;  
}
/* The CRP figure & image */
div.crp_related ul li a.crp_link figure {
  margin-bottom: 5px;
  overflow:hidden; /* This is only for the scale effect */
}

div.crp_related ul li a.crp_link figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid var(--rv-base-2);
  transform: scale(1);
  transition: transform 400ms 0ms ease;   
}
div.crp_related ul li a.crp_link figure img:hover {
  transform: scale(1.5);
  transition: transform 400ms 0ms ease;   
}
/* The CRP post title */
div.crp_related ul li a.crp_link span {
  display: inline-block;
  line-height: 1.25em;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

You can see in https://radioke.es/ella-siempre-esta-ready/

• This reply was modified 2 years, 6 months ago by Fernando García.

Hello Ajay,

One thing is clear: Designs must be responsive, and all absolute width sizes will break it.

About thumbnails, I think the unique useful option is to select the WP thumbnail size, according to the max width the image will be shown. Other extra HTML or CSS with absolute widths should not be used.

If want to maintain proportions, aspect-ratio and object-fit are properties supported by all actual browsers.

And of course, use flex or grid for the columns/rows. A very interesting option would be number of columns in desktop, tablet and mobile, using the same WP standard breakpoints.

Also I think any plugin should maintain minimal CSS. Setting border radius, or shadows, or other ornaments, forces to overwrite CSS when don’t like, while any WP administrator should know how to add that CSS small details that never break the layout.

I can help you about this, as I am very interested in a good related posts plugin, as this.

Regards!

• This reply was modified 2 years, 6 months ago by Fernando García.
• This reply was modified 2 years, 6 months ago by Fernando García.

Hello Ajay!

Yes, PHP errors are when thumbnail height & width are empty, and in the round thumbnails with CSS grid styling.

I was trying to set a solid (responsive & elegant) layout but is impossible with the plugins options and styles. Fortunately, we can deactivate them.

For thumbnails, I only need to set a thumbnail register size, don’t need the rest of options for responsive design, because plugin breaks the layout.

Also, none of the four layouts work well, they overflow or aren’t 100% width.

Solution is easy: setting the ul container as flex, and li items with relative widths in each breakpoint (for example 33.3% in desktop and 50%-100% in mobile). Also forcing images to 100% with of their container, and if we want set an aspect ratio, as this:

div.crp_related ul li a.crp_link figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

Regards.

Hello Vicky, yes I know, it is a development site.

Also block options appear malformed.

I’ll wait for new version.

Thank you!

Hello Jason,

I have installed Github development version in localhost with debug an it shows a lot of glitches on activation, basically PHP Notice: Undefined index: …

After, visits are not counted and debug.log shows PHP Fatal error: Uncaught Error: Class ‘slim_ua_parser’ not found in…

I’ll wait for the production version.

Thank you!

Hello Andy,

Accordion body background-color option is important, despite it can be solved easily with CSS out of the plugin.

Other icons can be add with unicode characters or with SVG inline (perhaps the best design way and also efficient).

Also transitions/animations can be improved.

Thank you!

• This reply was modified 2 years, 8 months ago by Fernando García.

Done!

Updated, thank you!

Hello Andy,

Yes, adding that condition the PHP notice disappears.

I am using PHP 7.2.15 in localhost with WP_DEBUG=true.

I’ll wait for your next update.

Thank you!

Hello Phil. Yes, I know I can change PHP version, but because of updates, it would be better if you can do it in future versions.

Thank you!

Ok thank you!

Try this:

div.lwptoc {
border-radius: 10px;
}

Yes, now it works!!!

(But I dont like that design ??

Regards.

Hello Iulia.

In my local installation, after updated to 6.0.2, these options are not saved (always empty as before updating):

– Crop medium large image to exact dimensions (normally medium large images are proportional)
– Crop large image to exact dimensions (normally large images are proportional)

Also in the plugin page, to select the default crop, it doesn’t appear for medium-large and large sizes.

Tell me if you need more details.

Regars.