Portfolio Thumb Container (title) height « Support Forum | Kriesi.at

Support Forum » Choices

Portfolio Thumb Container (title) height

18 posts from 3 voices

Started 3 months ago by sitesme
Latest reply from Nick
This topic is closed
This topic is not resolved

Tags:

sitesme
Member

Hi

I'm trying to have all Portfolio Thumbs grey container with the same height but if the portfolio title is too long, it goes to a second line.
I'm ok with double line for the text, just want them to have all the same size.

Check the sshot please: http://d.pr/i/B8Vw/4Rmsb4Jn

Thank you for helping

Posted 3 months ago #
Ismael
Moderator
Hi,

Please place this on your custom.css
```
.portfolio-wrap .inner-entry {
min-height: 246px;
}
```
Adjust the min-height value if needed. Remove browser history / cache then reload page.

Regards,
Ismael
Posted 3 months ago #
sitesme
Member

Thank you Ismael,

The issue now is the bottom section below the excerpt, there is too much empty space. How can decrease the height here? http://d.pr/i/fT1B/3Bi66ZGN

Thank you

Posted 3 months ago #
sitesme
Member

A second question please:

In the 3-column portfolio I see the grey section (where the title and excerpt goes) is on top of the thumbnail (portfolio item).
Is there a way have the title and excerpt with the grey section BELOW the thumbnail so the image can be totally visible by default?

Thank you

Posted 3 months ago #
sitesme
Member

Regarding issue number 1: Still need help on: How can decrease the height here? http://d.pr/i/fT1B/3Bi66ZGN

Regarding issue number 2: I think I figured out that title is showing below the thumbnail. It appears the problem is with the size of the thumbnail: it cuts the bottom part of it. Therefore, I would like to know how can I increase the thumb height in the 3-column portfolio? I have the 4-column working perfectly.

Thank you

Posted 3 months ago #
Ismael
Moderator

Hi sitesme,

Can you post a link to your site? so we can check the issue further,

Regards,
Ismael

Posted 3 months ago #
sitesme
Member

Hi Ismael,

Please look into the website with 3-column http://d.pr/ZQz6/3PywXRoN

Many thanks

Posted 3 months ago #
Nick
Moderator

Hi,

I see a bad url http://www.clipular.com/c?1760808=F9OpQcsNWxY_XeVu5Jq_jmuERxM

Please provide a url to your live website. We will need to see the code in order to help you. You can use http://www.goo.gl to hide the url

Thanks

Nick

Posted 3 months ago #
sitesme
Member

Hi Nick,

Sorry, the URL is here: http://d.pr/821u/3vxiHzgj

Thank you

Posted 3 months ago #
Nick
Moderator
Hi,

Please try adding this to custom.css , at the end of the file; or end of Quick CSS located in Choices > Theme Options > Styless .. text area on bottom of the page: .. The 47 is the height you don't like so try something closer to 0. The -5 is the tight distance between the two texts residing between the 2 lines of text on the same area.
```
#top .inner-entry .portfolio_excerpt {
margin-top: -5px;
min-height: 10px; /*was 47px*/
}
#top .slideshow li img {
top: -20px; /*pulls image out of its sleeve*/
}
```
Thanks,

Nick
Posted 3 months ago #
sitesme
Member

Thanks Nick,

That fixed my first issue, but I'm still struggling with the portfolio items being cut.
Please check this 3-column portfolio thumb: http://d.pr/i/GhlR/1CI0wN3B and compare the same with the 4-column layout: http://d.pr/i/CkXI/5K0SDIPC

I would like to reproduce the same effect as it is in the 4-column layout: it resizes the image to the top + sides and then cut the bottom if the proportion doesn't fit. This is how I would like to have it.

Any thoughts on this?
Thanks.

Posted 3 months ago #
Nick
Moderator

Hi,
You added css after the fix i gave you which made my css invalid because of the cascade rules. But your images get cropped anyhow during the upload:

<removed> ... the edges are cut off, which means you are uploading the images in different aspect ratio then 495x400

What width/height are those images before you upload them?

Does every image have the same width/height as every other image on that page before you upload them?

*Always upload images that are proportionally larger than the size they will shrink to (495x400)

3-4 column portfolio thumbs have a constraint of 495x400 (defined in functions.php on line 69). So that means you need to either:
(a) change the width and height on line 69 so that it proportionally matches the height and width of your images before you upload them [all images must have the same width and height, so if image1 is 600w-400h that is the size all images need to be] or
(b) change the aspect ratio of images you are uploading to be proportional to 495x400.

The way to do it is to take the width of your image before you upload it, and put it in a formula:

---important formula---

(400 * width of your images before upload) / 495 = (height your image must be so it's proportional)

If all your images have (for example) 992 width and 723 height before you upload them, you will need to see if that aspect ratio is proportional to 495x400 using the formula above. So take the width of your image (lets say 992) and plug it into the formula

(400*992)/495 = height
height = 802
so 495x400 is proportional to 992x802, while your image is 992x723. This wont work since 723 is smaller than 802 and its easier to cut then to add 79 pixels of height to 723 to make it proportional.

So now we see what is proportional to 495x400 if we keep the height. we use the same formula

(400*proportional width)/495 = 723

proportional width = ( 723 * 495 ) / 400

proportional width = 895

The size of the initial image is 992 width x 723 height, so all you need to do is crop 992 down to 895 using graphic software while not touching the height until you are uploading 895x723 which will perfectly scale down to 495x400 without any cropping.

Thanks,

Nick

Posted 3 months ago #

Nick
Moderator

Hi,

So what you would need to do is replace lines 69-70 of functions.php which look like

$avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ,'copy'=>'greyscale');	// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale');	// images for portfolio 4 columns

and have them look like

$avia_config['imgSize']['portfolio']  = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale'); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale');	// images for portfolio 4 columns

Just remember that this by itself will not do anything, you will need to regenerate or re-upload the images.

Thanks,

Nick

Posted 3 months ago #

sitesme
Member

Ok,

the fix to not crop the thumbs was easier than I thought.

Just replaced this code on line 32 inside loop-portfolio.php:
case "3": $grid = 'one_third'; $image_size = 'fullsize'; break;

Now, I just need to increase the height of the thumb area to something like the red box here: http://d.pr/i/jC0t/2aeZQeBe
What CSS code controls the height there?

Thank you

Posted 3 months ago #
Nick
Moderator
hi,

I replied to your email about the url.
<edit>
I found the url. Your images are stil all of differnt heights, so the shorter ones look different then the taller.

You can use this to pull images up, but they are all different height so its up to you how much you want to add there, right now this attribute is not in the code so you can try between 0px to -120px
```
#top .slideshow li img {
top: -60px;
}
```
This controls the row height.
```
.portfolio-wrap .inner-entry {
min-height: 110px; /* current value */
}
```
Your best bet is to install Google Developer Tools and to use them to tweak the values and then copy straight from there and just add to your custom.css ., its quite easy just time consuming.

Thanks,

Nick
Posted 3 months ago #
sitesme
Member

Hi Nick,

I still can't find the result I was expecting; I got the image aligned to the top of the thumb's container, but I still don't see the container increasing its size. This is the height I would like to see for all portfolio items (in red box): http://d.pr/i/tRZh/5CvRXkGS
How can I increase the image height only on the 3-column portfolio page?

Many thanks

Posted 3 months ago #
sitesme
Member

I found exactly what I want: http://d.pr/i/dYDH/3bQ5ejy3
The height displayed here is great and all I need...

Posted 3 months ago #
Nick
Moderator

Hi,

Oh, I didn't know you wanted that look. Most people demand that everything is lined up and symmetrical. Personally I prefer the pinterest look like you have.

Glad that you found what you were looking for, and I do recommend you check out that Developer Tools extension for the Google browser, it will make your day!

Thanks,

Nick

Posted 3 months ago #