[Gelöst] view returns images at different sizes to what they should appear as.

[Author]

Artikel

[veronicaG-2]

I am trying to: have the images fit within a specific sized layout space - 300px max height and width - image should resize proportionally to fit that space and be centered in that space. I am using the following custom css to make this happen in the theme (see screenshot browse_results)....however, with the search page I am using a views template and I have the same css ...yet it continually returns different results (I included a few screenshots made by putting various words in the search box - famous, bike, vintage, figurative, people)

.products .fusion-flexslider .slides img {
max-height: 300px !important;
width: auto !important;
margin: 0 auto !important;
text-align: center;
}

I visited this URL:www.topartllc.com and used browse and the top right search box to view items...

I expected to see: a grid style (as appears when you use the browse drop down menu)

Instead, I got: various sized images

[Arvish Mungur]

Hello veronicaG-2,

Thank you for contact Toolset Support.

I will be happy to help you with your issue.

Based on your description of the issue, please note that with a CSS fix, the width of the images will not resize proportionally as they do not all possess the same aspect ratio.

Therefore, could you please share the following information to help me better formulate a solution for you:

- Is the aim to have all images appear in the same size - same width, same height without distorting the image?
- The current view code for the search results.

Awaiting your reply

Kind regards

[veronicaG-2]

The aim to have all images appear centered in the same size "space" - Since they are all different (we are an Art Company) sizes, we want them to appear proportionally within a 300px area without distorting the image. Similar to the browse_results1.jpg screenshot.

I'm not sure what you mean by "The current view code for the search results" What would I do to get you that? I did take a couple of screenshots of the search used below with inspect element open. File names are search_results-lily1.jpg and search_results-lily2.jpg

I used "lily" in the following search results, please note our items are grouped items where the grouped item should be the only thing that is shown when searching or browsing... All of the simple product items are set to Hide under Catalog Visibility. I don't know if this is part of the same problem or something different....if it's different please let me know and I will start a new support thread. I've included 3 screenshots (...lilyA..., ...lilyB..., ...lilyC...) to demonstrate what I am talking about. The specific example is item ABR5656 (only this item should appear) and ABR5656GP Digital Print on Paper 12 x 12" (this item should not appear when searching or browsing)

[Arvish Mungur]

Hello veronicaG-2,

Thank you for elaborating.

Based on your approach, to get the desired alignment, the CSS required is as follows:

.products .fusion-flexslider .slides{
  float: none;
}

.products .fusion-flexslider .slides li{
  display: inline !important;
  text-align: center;
}

.products .fusion-flexslider .slides .woocommerce-main-image{
  display: inline-block;
}

.products .fusion-flexslider .slides img{
  max-height: 300px;
  width: auto;
}

You should remove the following CSS:

.products .fusion-flexslider .slides img {
  max-height: 300px !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center;
}

Please let me know if this fixes it.

Kind regards

[veronicaG-2]

That didn't fix the sizing problem, but it did center the image is the space available. Is there something we can add or change to fix the sizing problem?

[Arvish Mungur]

Hello veronicaG-2,

Thank you for your reply.

Could you please replace the previous CSS with the following one:

.fusion-flexslider .slides{
  float: none;
}
 
.fusion-flexslider .slides li{
  display: inline !important;
  text-align: center;
}
 
.fusion-flexslider .slides .woocommerce-main-image{
  display: inline-block;
}
 
.fusion-flexslider .slides img{
  max-height: 300px;
  width: auto;
}

Please let me know if this fixes it.

Kind regards

[veronicaG-2]

Ok. Now the images are staying within their size restrictions...however some are appearing smaller than they should be.

I've attached three screenshots here to show what I mean.
search_results_toosmallA.jpg - shows that now when I choose to browse from the top menu (which was displaying the images correctly) some of the images appear about half the size they should be (the two square images in the middle should be the same size yet, they are not)

search_results_toosmall-musicA.jpg - shows that if I search using the word music those same two images will appear as they should.

search_results_toosmall-musicA.jpg - however, the search does still have the same issue happening please note the 1st image and the 3rd image - these should also be the same size.

[Arvish Mungur]

Hello veronicaG-2,

Thank you for your reply.

Try adding a ‘max-width’ attribute to the following CSS declaration:

.fusion-flexslider .slides img {
    max-height: 280px;
    width: auto;
    max-width: 250px;
}

You might have to play around with the ‘max-height’ and ‘max-width’ sizes to get the desired fit.

Please let me know if it fixes the issue.

Kind regards

[veronicaG-2]

Thanks!