Images in Responsive Grid View

  • Hi,

    First, thanks for your great plugin. Every time I think there is something it can’t do, I discover that you’ve actually done it and documented it somehwere.

    I was able to make minor changes to the Custom CSS for a grid view of the list to get pretty close to what I am trying to do. But there are two things I am still trying to figure out:

    • I’d like to have each of the records in the grid display as a square image with the linked record name below. This works for the majority of records, but not all of the images associated with my records are squares…and a couple of them are low resolution. Is there a way to set the container for the image to always be a square (even if that means sometimes there is white space around the image)? Right now, I have made this edit to your sample code: `/* sets the size of the image element */
      .pdb-list-grid .pdbiex-image-field-wrap,
      .pdb-list-grid .image-field-wrap img {
      width: 100%;
      height: 100%;`
    • In some cases there is no image with the record. Is there a way to set a default image that only displays in this grid view?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author xnau webdesign

    (@xnau)

    It is possible to set up the CSS so that the image will always display the same size, but there really is no substitute for having images of the correct size and aspect ratio.

    I can’t give you the exact CSS rules you need, but the way to achieve this is to set the image tag container to the specific size you need. You need to do this in such a way as to not also affect other plugin displays.

    For example:

    .pdb-list-grid .pdbiex-image-field-wrap {
   width: 100px;
   height: 100px;
}

    If the aspect ratio of the image is not a square, this will result in some blank space, but the image element will be the same size for all records and so the layout will be consistent.

    For your second questions, it’s not possible to configure the default image to be different in a specific case, you need to use a custom template for that.

    Not sure it’s relevant for your specific purpose, but object-fit CSS3 property can:

    Cut off the sides of an image, preserving the aspect ratio, and fill in the space.

    More information:
    https://www.w3schools.com/cssref/css3_pr_object-fit.asp

    • This reply was modified 4 years, 11 months ago by norlam.
    • This reply was modified 4 years, 11 months ago by norlam.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Images in Responsive Grid View’ is closed to new replies.

Tags