This thread is resolved. Here is a description of the problem and solution.
Problem: I am using the wpv-post-featured-image shortcode with cropping applied, in a View of posts. However, some featured images are different heights. I want all the images the same size.
Solution: The "crop" feature only crops images, it does not stretch them to fill the dimensions you request. The original image must be at least as large as the crop dimensions, otherwise the image proportions will be incorrect when it is cropped.
Relevant Documentation:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 5 replies, has 2 voices.
Last updated by 6 years, 8 months ago.
Assisted by: Christian Cox.
1. Images are not cropped and also don't have same height
The images are cropped as you specified. Take a look at the source of the page, and check the dimensions of these images:
hidden link.
It is cropped to be 752px tall.
hidden link
The original image is 768px tall.
So you can see that the image has been cropped using the 1280x752px dimensions you provided in the shortcode.
This theme has some CSS that stretches these images as needed to fill the horizontal space:
.dfd-content-wrap article.dfd-portfolio .entry-thumb img,.dfd-content-wrap article.dfd-gallery .entry-thumb img,.dfd-content-wrap article.dfd-portfolio_archive .entry-thumb img,.dfd-content-wrap article.dfd-gallery_archive .entry-thumb img,.dfd-portfolio-module article.dfd-portfolio .entry-thumb img,.dfd-portfolio-module article.dfd-gallery .entry-thumb img,.dfd-portfolio-module article.dfd-portfolio_archive .entry-thumb img,.dfd-portfolio-module article.dfd-gallery_archive .entry-thumb img,.dfd-gallery-module article.dfd-portfolio .entry-thumb img,.dfd-gallery-module article.dfd-gallery .entry-thumb img,.dfd-gallery-module article.dfd-portfolio_archive .entry-thumb img,.dfd-gallery-module article.dfd-gallery_archive .entry-thumb img {
display: block;
min-width: 100%;
}
That means that this vertical image gets stretched to fill the horizontal space in the gallery, resulting in an image that is taller than 752px. This is why your images have different heights. Try cropping the images at 768x452, which matches the proportions of the original image gallery.
2. On image, how to display only top portfolio category not all nested categories
Instead of the wpv-post-taxonomy shortcode, create a new View of the portfolio category taxonomy. Add a Query Filter "filter by term, set by the current post in the loop". Add another Query Filter "term parent", where term parent is "None" - this will result in only top-level terms. In the Loop Output editor, insert shortcodes like wpv-taxonomy-title or wpv-taxonomy-link to display information about each term. If you have additional questions about this, please create a separate ticket so we can discuss in more detail.
3. Paginations design is not OK
The pagination controls in the original example have a very specific markup and CSS structure. You may be able to copy + paste some of that into the Filter Editor of this View to recreate their design. If you need assistance with this, please create a separate ticket. Our policy is to address one issue per ticket, and this is a fairly complex problem to solve.
4. in [wpv-post-excerpt more="Lire la suite ..."], read more is not displayed in the front
One thing I can see is that your theme includes a CSS style that crops this section vertically at 6em. See the attached screenshot. This means that some text is cropped, but it's not controlled by the Types shortcode. You can try adding this CSS to override that style:
.page .dfd-content-wrap.left-image article.dfd-portfolio > .cover .entry-content {
height: inherit;
}
Another thing I see is that your excerpt shortcode does not include a "length" or "count" attribute. You may need to specify these attributes like so:
[wpv-post-excerpt length="20" count="word" more="Lire la suite ..."]
Hello
Thank you for your reply
1.I added
[wpv-post-featured-image size='custom' width='768' height='452' crop='true' crop_horizontal='center' crop_vertical='center' alt="[wpv-post-title]" attr="class=test"]
where .test { transform: matrix(1, 0, 0, 1, 0, 0); }
to have the same situation as in the image
<img src="<em><u>hidden link</u></em>" data-src="<em><u>hidden link</u></em>" width="1280" height="752" alt="Au pays des dragons" style="transform: matrix(1, 0, 0, 1, 0, 0);">
but some images are taller than some ones
There is no way with views to have all images with the same height and width ?
2. You haven't understand me, I need to display the "root category" on the image label using
[wpv-post-taxonomy type="portfolio_category" format="name"]
3. I will open a new ticket
4. Fixed
Thank you
