Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #162786

    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

    #162970

    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

    #162978

    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

    #163057

    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

    #163380

    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

    #163410

    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

    Screenshot

    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

    #163813

    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

    #163892

    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
    Scrren1

    Example 2
    Screen 3

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

    #163894

    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 1 year, 2 months ago by  Devin.
    #163897

    Hello Devin,

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

    #163898

    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.

    #163903

    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.

    #163905

    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.

    #163909

    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
    demo

    ITS BLUR AT YOUR OFFICIAL DEMO AS WELL
    DEMO

    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.

    #163915

    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.

    #164007

    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

    #164024

    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.

    #164079

    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

    #164082

    Hi Kriesi,

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

    Thanks
    Jas

    #164083

    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.

    #164085

    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 :)

    #164087

    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

    #164097

    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

    #164125

    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

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

The topic ‘Retina Images and Fonts in Portfolio Grid – Theme Enfold’ is closed to new replies.