[Résolu] Getting in-consistant results when using flex in toolset

[Auteur]

Publications

[AndreG3332]

I am trying to: create a view with a cpt using post featured image . All the images loaded as featured images are all exactly 300x225 px in dimension.

I visited this URL: hidden link

I expected to see: all images to be the same size.

Instead, I got: All images different sizes.

When i do the view without any css all works 100%, all images is the exact size. however whet i add the following

#services_container{
	display:flex;
	}

the image sizes change also and i am not able to rerstore them to the original size.

Here is the "Loop Output Editor" code

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in Services"]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

:Templates for this View:

<div id="services_container">
  <div class="services_image">  
  [wpv-post-featured-image size='medium']
  </div>
  <div class="content_container">
      <div class="services_header">  
        [wpv-post-link]
      </div>
      <div class="services_content">  
          <span>[wpv-post-excerpt]</span>
      </div>  
  </div>
</div>

The css was done in the template for this view's css section

My goal in this exercise is to create a view with the services with the featured image to the left the post heading and the content excerpt in on div to the right with the header at the top and the excerpt below the heading. all the services must list underneath each other.

I have activated the css to show the result once the display:flex is active

[Luo Yang]

Dear Andre,

You can specific the feature image width and height in shortcode [wpv-post-featured-image], for example:
[wpv-post-featured-image size='custom' width='300' height='225']

More help:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

[AndreG3332]

Hi

You Lang, I have done and but it does not affect the image size on the display page. I have copied and pasted your code and still it is not the correct size.

hidden link

I have tried forcing the size with css , With in the template it does not correct it. The image size is 100% until i load the display:flex then it changes it to an in-consistant size

[Luo Yang]

I just test again in your website, all images do output as correct size 300 * 225, see the images:
hidden link
hidden link

To specific the image in display size, I suggest you setup some custom CSS codes, for example:

div.services_image img{
min-width: 300px;
    height: 225px;
}

See screenshot, 1103.JPG

[AndreG3332]

That did the trick! You are a star!

Regards!