Blurry Portfolio item « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

Blurry Portfolio item

13 posts from 6 voices

Started 9 months ago by Loic84
Latest reply from Devin
This topic is not a support question

Tags:

Loic84
Member

Hi there! Im getting a problem with the size of my portfolio items. I´ve done a research through the forum, but I dont quite understand what may be the problem. If you check my site http://www.josemontero.es , youll see the first portfolio item gets blurry, (I think is probably a matter of height). What could I do?
I would like to know as well if its possible to choose an image as thumbnail, instead of having it automatically generated.

Thanks a lot for your support,

Posted 9 months ago #
Loic84
Member

Hey, I got the first issue solved, (I just needed to regenerate thumbnails). But I still wold like to know if its possible to choose the thumbnail for the main portfolio page instead o getting it automatically generated.

Thanks!

Posted 9 months ago #

Ismael
Moderator

Hi,

You can find all the generated thumbnails on functions.php.

$avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36 );						// small preview pics eg sidebar news
$avia_config['imgSize']['post-format-image'] 	= array('width'=>630, 'height'=>999, 'crop'=>false);		// big images for post format image and gallery posts
$avia_config['imgSize']['fullsize'] 		 	= array('width'=>930, 'height'=>930, 'crop'=>false);		// big images for lightbox and portfolio single entries
$avia_config['imgSize']['featured'] 		 	= array('width'=>930, 'height'=>340);						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['portfolio'] 		 	= array('width'=>465, 'height'=>346);						// images for portfolio entries (2,3,4 column)
$avia_config['imgSize']['logo'] 		 		= array('width'=>465, 'height'=>220);						// images for dynamic logo/partner element

You can also create a new thumbnail size. Just copy the codes above and give it a unique name for example "NEW-THUMBNAIL".

Then you can call the thumbnail size to be used on your slide with this.

$slider = new avia_slideshow(get_the_ID());
	$slider->setImageSize('NEW-THUMBNAIL');
	$slideHtml = $slider->display();
	echo $slideHtml;

Regenerate thumbnails.

Regards,
Ismael

Posted 9 months ago #

hipisland
Member

Hello,
I got exact same problem with Angular, and that's quite frustrating all images that are vertical (portrait) are blurry, when lanscape one are ok
The problem is on what function should I change sizes?
also : when I check the image size : it says 580x905 and this size doesn't appear at all on the piece of code above.

I have tried this solution without sucess

Thanks for helping

Posted 8 months ago #
Nick
Moderator

Hi,

Please post a link where this occurs. If you are trying to create a gallery of images where half are tall and thin portaits and the other half are very wide and short landscapes, there are three ways to go about it:

1) keep the original aspect ratios , just scale down the thumbnails. The drawback is that the gallery will look strange, lacking uniformity as each thumbnail will be of a different width/height aspect ratio.

2) can force uniformity by squeezing the photo into a uniform aspect ratio. (square or rectangle). The drawback is that either the portraits or the landscape will become blurry since the image is being forced to squeeze into an unnatural shape.

3) a hard crop is done on the thumbnails, where a height or a width is scaled to a predefined size , while the other dimension is simply cropped. The thumbnail will not look blurred, but in some cases the image will look awkward since a portion of it is simply cut away.

The best thing to do obviously is to create thumbnails manually to ensure that the image looks fine, but unfortunately sometimes that is not possible so one of the lesser 3 evils mentioned above are compromised upon. But do let us look at the url, so we can help you find the best solution.

Thanks,

Nick

Posted 8 months ago #
hipisland
Member

Thanks for you answer :

Here is the adress : http://www.kplusp.com
you can see 3 examples of portfolio items :

#1example is images that I have put on a white background so all images are square that it will generate a lot of work if I have to do it for every pictures of my site + I have difficulties with the front page thumbnails that are not the one I assign in the image tool from wordpress.
#2 example is no problem at all images are imported as they are vertical or horizontal are displaying correctly
#3 example is I import my images as they are too : and it goes pretty blurry when vertical

Thanks
Patrice

Posted 8 months ago #
Nick
Moderator
Hi,

#1) The cosmonaut was pasted by you on a white background because original image proportions were too rectangular? You can try to go into the backend of wordpress and click on Settings > Media and turn off the checkbox labeled 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ..

Please be aware that when you change settings, the thumbnails do not automatically change. You will need to download a free plugin (http://wordpress.org/extend/plugins/regenerate-thumbnails/) which will automatically regenerate all your thumbnails based on the new settings.

If you open your theme folder and find functions.php at the base, there are pre-defined proportions for thumbnails. Right now they are set at 'width'=>465, 'height'=>346 .. pixels, and get scaled based on the number of columns in your portfolio, so if its 3-4 columns, the images get scaled down (proportionally) to 232px width by 172px height. This scaling is likely causing the blurry effect, since they are scaled within the browser. If you plan on using the 232x172 size (as now), then you should change the line below in functions.php (line 24)
```
$avia_config['imgSize']['portfolio'] = array('width'=>465, 'height'=>346);
```
to look like
```
$avia_config['imgSize']['portfolio'] = array('width'=>232, 'height'=>172);
```
You may also want try how the crop option looks (some love it, others hate it)..
```
$avia_config['imgSize']['portfolio'] = array('width'=>465, 'height'=>346, 'crop'=>false);
```
I am not sure what is causing different images to appear, but please try not to use single 'quote' (') or double quote (") inside your image title. Loose quotes are the enemies of most computer code, and once in a while when not filterer out, they causes all sorts of mayhem. I see on that page, two of your images have single quotes which escaped into the code. (title="It" s-rouge-#1-h930-01'="" )

Please try my suggestions, and let us know how they worked out.

Thanks,

Nick
Posted 8 months ago #
hipisland
Member

Hello, and thanks for the answer :

I did : $avia_config['imgSize']['portfolio'] = array('width'=>232, 'height'=>172); on functions.php
Did regenerate the thumbnails

Should I enter these dimension in the wordpress media settings too?

Here is what happens : on post "Post working with horizontal pics / not for vertical" third one :

the landscape pic works perfect : small then if you click big image sharp (actually, this this what I'm trying to have for every picture of my site)

On portrait (vertical) 1/ pic is still pretty blurry 2/ if you click you get a picture smaller than the one in the post 3/ click again and then you get the right pic sharp.

I have changed the names of the pics with single 'quote' too.

Thanks

Patrice

PS : is it possible to change the url http://www.kplusp.com/#!prettyPhoto to something else like for ex. http://www.kplusp.com/#title of the post?

Posted 8 months ago #
Nick
Moderator
Hi.

To remove the hashtag, please edit jquery.prettyPhoto.js located in /js/prettyPhoto/js/ directory in your theme and

1) on line 5, find where it says
```
,deeplinking:true,
```
and change it to
```
,deeplinking:false,
```
2) change on line 80 (almost at the very end , its hard to read so please make sure you grab the correct function:
```
function clearHashtag(){url=location.href;hashtag=(url.indexOf('#!prettyPhoto'))?true:false;if(hashtag)location.hash="!prettyPhoto";}
```
to
```
function clearHashtag(){url=location.href;hashtag=(url.indexOf('#!prettyPhoto')>0)?true:false;if(hashtag)location.hash="!prettyPhoto";}
```
========================

As for the images, (a) in Settings > Media, please make the thumbnails 343x343 (or whatever the minimum width and length of your images you think will be) and make sure the box under it is checked.

If you upload an image with a width of 10 and a length of 100, and another image with a length of 10 and width of 100, there is no realistic way to have the thumbnails show up without being blurred. So setting constraints at 343, ensures that anything larger will be cropped to 343
.
(b) Please add the same settins you made for thumbnails in step (a) in the functions.php for $avia_config['imgSize']['portfolio']

This worked for me, when I tested. You can also take a look at this plugin that has more customizations : http://wordpress.org/extend/plugins/post-thumbnail-editor/

(c) When you upload each new image, please make sure that the radio button for thumbnails is the one selected, prior to adding the image to the gallery.

Good luck!,

Nick
Posted 8 months ago #
hipisland
Member

Hello
Many thanks
I think there is a misunderstanding : I don't have really a problem with thumbnails of the portfolio,
but on when I see a portfolio entry with blurry images, and whatever I do, I get this on images that are not squared, as you can see on the post.
I still have a problem with this pretty photo text too ( after doing all the process you gave me)

I have posted a new entry with much more regular format pictures and the only ones that are displayed correctly are still landscape format.
others ( all portraits one ) are blurred.
I think for a premium theme dedicated to graphic or visual artists it is kind of a handicap! Not to mention the time you spend trying to make it work, and I'm really considering to change with another theme more user friendly.

Thanks again

Posted 8 months ago #
Devin
Moderator

Hi hipisland,

The issue is (at least I think so) that vertical images are being expanded beyond what their size is to fill the space available. I can't actually see your site or the posts because of the registered users block but I would guess that is the issue. You can solve this by either using larger images where the height isn't larger than the allowed size at which point the image would need to be shrunk before it gets expanded or change the size of the slider.

The exact solution depends on what you have set up now so I'll need to take a look to be sure and guide you further.

Its not a problem the majority of people run into but I've seen it pop up every once in a while and its usually only images that are off on scaling by a pixel or two which causes most of us to miss over it when doing support :)

Email me a set of login details for the site so I can take a look and we'll go forward with a fix.

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn't grab it :)

Regards,

Devin

Posted 8 months ago #
gstankowski
Member

Hi I got exactly the same problem of Hipisland all of my vertical picture look blurry, I have try different size upload but it se the blurry effect as been cause by the theme any development on fixing this issue ? Yhanks for your help overall it this this theme is one of the best I find

Posted 4 months ago #
Devin
Moderator

Hey gstankowski,

We'll need to see an example of what you are talking about. Most likely you'll need to use larger images than what you currently have or at least put the image onto a transparent canvas in photoshop (or any image editor) so that the short side is large enough that the image doesn't get skewed when added to a portfolio.

Regards,

Devin

Posted 4 months ago #