PHP Errors

Can you check what your thumbnail settings are in the Settings page? Do you have a value for the thumbnail height?

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.

I’ll add in some validation as I think that makes sense to do.

https://github.com/WebberZone/contextual-related-posts/issues/170

Let me look into that. I think that should work across the styles. The img has been one I’ve always been fighting to get right.

For the flex, I’ve kept it to be more dynamic as you’d have seen as most users would want something out of the box which should also respect the width and height – which can be overridden by advanced users if needed.

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.

@promostudio

Would you be able to look at a style (probably what you already might have) that as you mention above has minimal CSS. Probably, we call it “minimalist”! Idea would be to put the layout as you describe above. It can then allow a developer to override when they are building it for their clients.

The reason for all of these styles is that I think most of the plugin user base is general users who want a solution out of the box and don’t want to or know how to modify the CSS massively.

And, personally, my CSS knowledge is fairly basic enough to get the job done but not advanced enough to make a jazzy solution!

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.

@promostudio

Thank you for this. I will give it a test as well. I like how clean it is.

Ok, I hope it helps you!