Hi there,
I have searched to resolve this issue and can't find a fix for this.
For this post: hidden link
On this grid I use this shortcode for the images:
<div class="col-sm-8">[wpv-post-featured-image size="custom" width="700" height="740" crop='true']</div>
You'll notice the images are not all the same size even though we are stating this.
I have tried changing this, changing the crop, nothing I do makes any difference.
Is there a way of making the images 'cover' the area to the size stated?
Many thanks, Pete
Hello Pete and thank you for contacting the Toolset support.
The page you referred to has multiple images that do fit on their areas, I am a little confused, can you elaborate more on your question. Maybe a screenshot can illustrate more what you would like to have.
Thank you,
Jamal
Hi there,
Thanks for your reply. Ok, all the images are set to width="700" height="740 yet check out on the page:
hidden link
Brookside, because the image is smaller it's showing smaller...of course.
That said, I would know how to set this as a background image and 'cover', using WordPress, I just don;t know if it's possible using Toolset.
Basically, I would like all images width="700" height="740 if possible?
Thank you
Making an image as a background can be done differently depending on how you create your HTML markup. Check this CSS attribute that remains the most straightforward solution.
hidden link
Let's focus on the "wpv-post-featured-image" shortcode. Analyzing your page, it seems that the images originally do not have to do the same aspect ratio (width/height). They were all served with the width 700, but their heights are different respecting the aspect ratio of the original image.
I suggest using the crop_horizontal or crop_vertical attribute in your shortcode to be able to get a 700x740 cropped image.
Check the shortcode documentation here https://toolset.com/documentation/user-guides/views/views-shortcodes/#vf-153425
Let me know if this will serve your needs.
Hi there,
Hmmm ok!
Using a background image within Toolset shortcode looks 'less' than straightforward so I haven't gone down that route and unsure why you sent the link ref this.
I have tried all kinds of variations to the shortcode taking your advice and can't see how this will change anything.
Using this code: [wpv-post-featured-image size="custom" width="700" height="740" crop='true']
I have tried crop_horizontal or crop_vertical attributes and various other things and just can't see why changing parts of the shortcode would change anything as the image isn't background in the first place.
Sorry, I feel I'm missing something here.
Hello Pete,
I meant by the straightforward solution to have a background image on a site web in general. Not precisely with Toolset. Toolset Views at the moment does not provide this feature on legacy views. On blocks, offer a way to customize their background, with dynamic images too(dynamic image is an image pulled from the database(eg: current post featured image)).
Check the following code, we use CSS(background-image attribute) to make the featured image a background for the div with the class "property-header":
<div class="property-header">
<h1>[wpv-post-title]</h1>
<h3 class="info">
<span class="price">$[types field='property-price' format='FIELD_VALUE'][/types]</span>
• <span>[wpv-post-type show='single']</span>
• <span>[wpv-post-taxonomy type='property-type' format='name']</span>
</h3>
<style>
.property-header {
background-image: url([types field='property-photo' size='full' url='true'][/types])
}
</style>
</div>
</style>
</div>
Regarding the cropping, I run a local with blocks. The cropping worked for me in a Shortcode block, a Classic block, and a Fields and Text block.
[wpv-post-featured-image size="custom" width="700" height="740" crop='true' crop_horizontal="center"]
Can you allow me temporary access to your site to check this further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Please, let me know which view are you working on.
Hi Pete and thank you for the credentials.
I still need your confirmation on which image should be in the background. Is it this one hidden link ?
Hi Jamal,
Yes that is it thank you 🙂
I tried to make the image as a background of the left section. But if I removed the image from the div to make it background, the div shrinks to 1px height, so, we'll need to put a min-height. Which will create some problems depending on the images and the min-height. Check this screenshot hidden link
I would like to ask why would you have the image as background? Maybe I did not understand what you are trying to do from the beginning, can you explain why would you have a background image instead of an actual image?
Hi Jamal,
Everything I did broke stuff, reassuring this isn't as straight forward as it would hope to be.
The issue is, the images are a different size. This will be an issue for some time and to replace every feature image at source would be a big undertaking.
The layout in question, we are using on a number of views so, I was hoping it would be something that could be overcome on Toolset. There seems no way to 'make' the images a specific size regardless of there 'actual' size....this the issue.
Further to my comment above...
Just watched this for interest: hidden link
Toolset clearly can use background images, which builders do, however I guess there is a limit to what can be done using the view I have.
While I'm not a fan of sliders, due to speed issues, still interesting to see 🙂
Currently, on this page hidden link
The dimensions for images are:
- 700x740
- 700x690
- 700x600
We cannot actually crop an image to a dimension higher than its actual one. 690 and 600 cannot be cropped to 740. If you would like to use 700x600 all other images will be cropped to 700x600.
Or, you can use images that are bigger than 700x740 and crop them.
I hope this answers your concerns about having the same dimensions image on that page. Regarding your last comment, I am sorry, I do not see the link, can you elaborate more?
My issue is resolved now. Thank you!
