Retina Images and Fonts in Portfolio Grid - Theme Enfold - Support

Tagged: Retina Display

Viewing 24 posts - 1 through 24 (of 24 total)

Author

Posts
September 18, 2013 at 6:54 am #162786

jesse8
Participant

Hi,

Domain: http://www.onthe8.com

We are using latest version of your Enfold Theme and WordPress. We updated all our images to Retina.

Every thing is working fine except Portfolio Grid. Images are displaying Non-Retina and Even Fonts are blur.
Easy slider in Portfolio is also showing non retina.

Rest of the website is all showing great in retina display. (Great theme)
We are using WP Retina 2x Plugin

Please HELP

Thanks
Jas

September 18, 2013 at 3:29 pm #162970

Yigit
Keymaster

Hi Jas,

I tagged Kriesi in this post. As far as i know, he is the only one with retina display device among us.

Regards,
Yigit

September 18, 2013 at 3:42 pm #162978

jesse8
Participant

Thanks Yigit,

It seems a bug.i tested another page with gallery and partners logo options and they work fine, except portfolio grid. http://www.onthe8.com/test/

Update:
Blurry Fonts and Hover arrow are blur only on Retina MacBook Pro (As well as Portfolio Grid)
Portfolio Grid is blur on all devices (iPad,iPhone , MacBook )
Fonts are ok on iPad iPhone.

Rest of the website is working great in all devices.
Hope it helps to resolve the issue.

Thanks
Has

September 18, 2013 at 5:37 pm #163057

jesse8
Participant

Update 3:

To make the matter simple. I put the HD label on Retina Icons. It shows the Portfolio is displaying the retina icon but its BLUR. Its the display method that is causing issue. I hope this will help as well.

http://www.onthe8.com/test/

Blurry Fonts and Hover arrow are blur only on Retina MacBook Pro (As well as Portfolio Grid)
Portfolio Grid is blur on all devices (iPad,iPhone , MacBook )
Fonts are ok on iPad iPhone.

Thanks
Jas

September 19, 2013 at 5:33 am #163380

Ismael
Moderator

Hi!

Edit functions.php, find this code:

$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns

Replace it with:

$avia_config['imgSize']['portfolio_small'] = array('width'=>520 'height'=>370 ); // images for portfolio 4 columns

The image thumbnails you’re uploading as portfolio thumbnails are so small. Please upload a larger image, twice the size if possible.

Best regards,
Ismael

September 19, 2013 at 7:08 am #163410

jesse8
Participant

Hello Ismael,

I tried your solution, but not working. I made sure all thumbnails are in proper size.
This is screenshot for an image being displayed on Retina in three different methods.
http://onthe8.com/corporate/test.jpg

Main link is
260 x 185
http://www.onthe8.com/wp-content/uploads/acres.jpg

Retina link is
http: (Email address hidden if logged out)
520 x 370

Whole website is working properly but portfolio Grid.
Its not the thumbnail Size issue, its how its being displayed (May Be CSS), Please let developer know, Its a bug.

Thanks
Jas

September 20, 2013 at 12:38 am #163813

Devin
Inactive Moderator

Hello Jas!

What image size do you have chosen for the portfolio grid to display? It seems to me the reason the images are not showing in the proper size is that you’ve chosen too small of an image size from the portfolio shortcode dropdown for “Portfolio Grid Image Size
Set the image size of the Portfolio Grid images”.

Regards,
Devin

September 20, 2013 at 4:15 am #163892

jesse8
Participant

Hello Devin and all Team,

Thanks for help and Please Please read all my ALL screens properly. Its not the images issue, its portfolio gird. Below is screenshot from Retina Macbook. Never mind my images but why the artwork is blur on portfolio grid along with Fonts. Please focus on portfolio grid coding rather then my images,.

Homepage screenshots: http://www.onthe8.com
Please right click on image and View in 100%
Example 1

Example 2

I hope your next suggestion will be towards updating some coding :-)

September 20, 2013 at 4:24 am #163894
Devin
Inactive Moderator
The portfolio grid gives you an option to set the image size that gets output in the grid.

What you need to do is:

Click on the Portfolio Grid element in your advanced layout editor for that page.

Next, look for the dropdown for the option “Portfolio Grid Image Size”.

Use the dropdown to select the option “Choose the Portfolio Grid image size manually”.

Now a new dropdown will appear that lets you choose the size of the image which gets output in your grid. Choose an image that is larger than what it is by default (The Gallery Option for example is 710×575).

Finally, save your options and view it on the front end.

Once again, this changes the size of the images uses in the grid which is where you are having your issue.

Edit: You will need to create larger images than the ones you have now since they are too small and are also contributing to the pixelation you are seeing: http://www.onthe8.com/wp-content/uploads/sell_with_singh.jpg for example is not going to be clear on retina unless the thumbnails is half that size.
- This reply was modified 11 years, 2 months ago by Devin.
September 20, 2013 at 4:29 am #163897

jesse8
Participant

Hello Devin,

I already did that before posting my last reply. Its already on 710×575.

September 20, 2013 at 4:35 am #163898

Devin
Inactive Moderator

Try uploading larger images, I noticed after my initial post the source files are actually very small so even if you have the larger size set it wouldn’t work because you’ve not uploaded big enough images.

September 20, 2013 at 4:50 am #163903

jesse8
Participant

I did try with larger image, still not working. But why you are ignoring the fonts and arrow icon mentioned above. What does they have to do with my image size? Lets forget the image and resolve that part. Image will be fixed automatically.

September 20, 2013 at 5:07 am #163905

Devin
Inactive Moderator

Without seeing the image used live it would just be a guess. But as far as the blur difference, I’m not getting the same issue on my end at the moment so I really can’t say.

September 20, 2013 at 5:29 am #163909

jesse8
Participant

Sir, with due respect i dont think so you are understanding what i am saying OR you are just ignoring my questions. Just forger images for one second.
WHY FONT AND ARROW IS BLUR ON PORTFOLIO GRID ONLY

ITS BLUR AT YOUR OFFICIAL DEMO AS WELL

PORTFOLIO GRID IS NOT RETINA READY, AT LEAST NOT ON DESKTOP RETINA MAC

IF YOU CAN FIX THIS ON YOUR OWN DEMO THEN LET ME KNOW. I’LL UPDATE MY WEBSITE AS WELL.

September 20, 2013 at 6:39 am #163915

Devin
Inactive Moderator

No need to get angry or use all caps. I’m trying to help as best I can.

I’m not saying there is no issue, I’m just trying to help with the issues I am able to see.

Kriesi is the only one of us that I *think* uses a retina macbook display. As is, I’m simply not able to see the issue with the hover effect live as its not happening on my iPad which is the only retina enabled display I have available.

What I was trying to suggest that you do was to adjust the base image size used in the portfolio grid to a larger image to see if that helps with the clarity of the image since it *is* something I can assist with.

If you are not interested in trying that now then we will just need to wait for Kriesi to take a look at the issue.

September 20, 2013 at 11:39 am #164007
Kriesi
Keymaster
Hello!
Since I dont own a retina macbook either its hard for me to help with this issue as well, but lets try a new approach. In general we use CSS3 transitions for elements like the overlay, and often times we need to apply a special fix to prevent flickering. I think that fix could eb the cause of this issue.

So please try the following: open up shortcode.css in folder css and remove, one by one, all occurences of
```
	-webkit-perspective: 1000;
```
and
```
	-webkit-backface-visibility: hidden;
```
And let us know if it helps

Regards,
Kriesi
September 20, 2013 at 12:49 pm #164024

jesse8
Participant

Thanks Kriesi,

This fixed the issue. GREAT HELP.
Kindly update your theme as well. Now it looks beautiful. Whole section was blur when all elements in Website (Even at your demo) are crisp clear.

Thanks
Jas

P.S. Dear Devin, I wasnt angry, but there was no way left for me to explain. I was saying same thing from beginning and trying to explain better even before anyone reply to it helps you as well.

I was trying to help as well to make this beautiful theme the best. My developer was suggesting me from 2 weeks to change it to something else, but i was stuck to make this theme work. There are always issues but people like you, me and Kriesi are working hard to polish it and to make it the best.

September 20, 2013 at 3:15 pm #164079

Kriesi
Keymaster

Hello!
The problem with removing these line of codes is that it might cause problems on older versions of chrome and safari, so at this point I cant really just remove it. By the way: which line exactly was the one causing trouble?

Will do a few tests with the latest chrome and safari versions and if everything works fine will eventually remove it :)

Cheers!
Kriesi

September 20, 2013 at 3:22 pm #164082

jesse8
Participant

Hi Kriesi,

I don’t know. I removed both of them :-D, I’ll recheck it tonight and message you back.

Thanks
Jas

September 20, 2013 at 3:25 pm #164083

jesse8
Participant

P.S. Interestingly
Chrome is auto updated and Safari is Mac exclusive now and Mac / iphone/ ipad people always update anyways. So Its Good to change/remove those codes because its creating issues in all new devices.

September 20, 2013 at 3:30 pm #164085

Kriesi
Keymaster

Well thats not entirely true :)
As it seems only retina macbooks are affected, since I couldn’t reproduce the issue on any of my 4 mac devices (imac, mba, iphone, ipad) And since the market and visitor statistics for high resolution desktop devices are still very small I need to make sure that if I make that update other users are not affected :)

Also there is still a good number of users running older chrome and safari versions, (dont aks me why one would disable auto updating, but just checked my site statistics)

But as I said: will check back multiple versions and see if we can safely remove at least some of those “fixes” that are causing trouble now :)

September 20, 2013 at 3:34 pm #164087

jesse8
Participant

Good to know, Thanks, BTW before i started this ticket i tried with a pattern and Its was blur in iPad and iPhone (Just to let you know, its hard to tell in pictures sometime)

Thanks for support

September 20, 2013 at 4:13 pm #164097

jesse8
Participant

Hi Kriesi,

It was fixed by Removing “-webkit-perspective: 1000” from

.isotope, .isotope-item, .inner-entry, .ajax_slide{
-webkit-perspective: 1000; /*fix webkit flickering bug*/
-webkit-backface-visibility: hidden;
}

Hope it helps.

Thanks
Jas

September 20, 2013 at 5:50 pm #164125

Kriesi
Keymaster

Hi, great thanks.

Will mark the rest of the team so they know what css rules are the cause for blurry fonts and close this thread for now :)

Regards,
Kriesi
Author

Posts