[Edin]

Hello,

I have two short questions:

1.
Sometimes the picture quality of my uploaded portfolio-preview (on start-page) is very bad. The original image size is big enough, but with the zoom in the portfolio-overview on the start page, my picture is a bit pixelated.

2.
How can I change the font color of the overlay text in portfolio projects preview?

Info: When I talk about portfolio projects, I mean my start page where all projects a visible. I am not talkin about the singe project page at all.

[Juanfra Aldasoro]

Hallo,

Thank you for writing. I hope you are doing well.

1) I think it has to do with the type of image you are currently uploading. They have too much quality and the uploader compressor is already pixelating them. For example http://www.rhlm-grafik.net/wp-content/uploads/2016/09/Vorschau-Broschuere.jpg

Have you tried modifying the compression and optimizing the images before uploading them?

2) That can be changed in the “Posts” element settings. Right now, if you go to the “Blocks” tab you’ll be able to select the skin. Light skin means that the background will be light and the text will be dark. Dark skin means the opposite: dark background, light text.

If you want to change the color to any specific color, at the time being, I’d recommend you to use custom CSS directly. You can do it with the following selectors:

.grid .light .item-content .entry-title

and

.grid .dark .item-content .entry-title

Depending on the skin you’ve chosen.

Best,
Juan.

[Edin]

Thanks, I am fine. I hope you too!

1.

I optimized every picture, because I use the identical sizes of the original demo-images of the smart theme. For example “vorschau broschuere” has exact the same sizes as your demo-mockup before.

So they have all 72 dpi, too, compressed via http://www.tinypng.com for perfect sizes. For example is the size of “vorschau-broschuere” has only 175 KB, 1600 × 1493, -> like your picture.

But I can’t figuere out why the quality is that bad in portfolio projects start page when I change the pictures. Your demo pictures are not that bad in preview, they are all sharp, like the direct link to them, too (This picture is 124kb,1.600px × 1.309px, so it’s nearly the samem like mine):

http://www.rhlm-grafik.net/wp-content/uploads/2016/05/Letter-Paper-Presentation-Mockup-1.jpg

When you view mine:

http://www.rhlm-grafik.net/wp-content/uploads/2016/09/Vorschau-Broschuere.jpg

it has a much, much better quality than the preview of it in the start page.

Where can I edit “Compress” settings for the previews in the theme?

2.
i am sorry, where exactly will I find those “Posts” and the “Blocks” tab, I don’t find them.

Do you mean “Blog & Posts” under the “Design & Styles” tab in Theme options? Or “Portfolio Section Skin” under the “portfolio projects tab” in the theme options?
I tried it both with switching it to dark/light, but nothing changes.

[Edin]

… or is there a way to turn this zoom in portfoliopreview down / off?

[Edin]

Okay, issue 2. i got fixed (edit post settings for portfolio preview) and change to skin = dark (;

Issue 1. is still a problem.

[Juanfra Aldasoro]

Hi,

Thanks for the follow-up. I am doing well, thank you 🙂

I’m glad you found the solution for number two. Sorry I wasn’t specific enough about the Posts element. I was referring to the page builder element.

With regards to number 1, I can see that the image you linked is already pixelated. I found hard to read the texts on it. Are you using Photoshop or Illustrator before using that service? We haven’t used any service like that to compress the image, just Photoshop.

Speaking about image quality in WordPress, it’s related to three things, mostly. Number one, the way you export your final images. Number two, the way they are compressed by WordPress (the theme is not the one in charge of compressing or resizing images, it is WordPress) and number three the size of the image being displayed on the site (when an image is uploaded to WordPress, it is resized by WordPress and it generates different images, if the one that it is printed in the front end is small, then it is quite likely that it will have less quality).

To be sure about having the best quality you can in WordPress, we have added an option that can be found in our theme options panel. You can go to Theme Options > Performance > Images > JPEG Quality to change it. It defaults to 90%, which must be more than acceptable. If you change that number, you will need to regenerate the images by using a plugin like this one: https://wordpress.org/plugins/regenerate-thumbnails/

Another thing that you can try is setting the full image to be displayed in the “Posts” element by adding the following code to your functions.php file:

Best,
Juan

[Edin]

Thank you very much for your reply!

Ok, I will show an other example:

The following picture is a CI-Design Mockup from you, pre-loaded already in an smarttheme project of the smart-startup theme. I downloaded this picture & reuploadede it immediately to the wordpress-media, to show you the problem:

Here the uplaoded file:

https://www.pic-upload.de/view-34393582/picture1.jpg.html

and the wordpress-media-link, too:

http://www.rhlm-grafik.net/wp-content/uploads/2016/05/testproject.jpg

I called the project “testproject” and loaded “testproject” picture from my hard drive in the project picture slot. Works so far very good.

But: when the start page appears, http://www.rhlm-grafik.net, this (“your”) “testproject” picture is pixelated, too:

https://www.pic-upload.de/view-34393788/badqualitypreview1.jpg.html
You see some kind of artefacts in it, even it is not the original size of the picture at all.

The pictures are not always pixelated, they become only pixelated , when only a sector of it is shown in the startpage portfolio-preview. Again, in your already uploaded startup-pictures everything works fine. The problem only appears, when you upload any kind of own picture.

Here another example:

My original picture of the moon-calendar with 100% size:

http://www.rhlm-grafik.net/wp-content/uploads/2016/09/mondkalender-web-gallery.jpg

(I could upload it on pic-uplaod.de hoster, too, but I think you already understood my problem)

Again the picture of the moon-calender >- the quality is a disaster again on the start page:

https://www.pic-upload.de/view-34393843/badqualitypreview2.jpg.html

Maybe there are Jpeg Quality Default 90%, but even with 70% the quality must be a lot better than it actually is on the portfolio-projects-preview.

I pasted the code int functions.php, too. Nothing changes.

[Juanfra Aldasoro]

Hi Edin,

Thank you for the follow-up. I hope all is well.

I’m not sure if I’m getting you on this one. You mean that the image looks pixelated depending on their position on the grid?

For example, I can see on your page that the “Gestaltung fotobuch” and the “Paper overhead” are looking well.

I’d deeply appreciate if you can clarify on this.

Thanks
Juan.

[Edin]

Hi,

“I’m not sure if I’m getting you on this one. You mean that the image looks pixelated depending on their position on the grid?” -> exactly, but I would add: it looks pixelated depending on the zoom factor, too. The Zoom-factor is never over 100% of the original picture, so I just can’t understand this problem at all.

Please download this file and compare the 3 pictures:

https://www.file-upload.net/download-12845501/example.rar.html

I have random order, sometimes the pictures are bigger, sometimes smaller, sometimes they are on the top and sometimes on the bottom of the start page.

Again, yes, they have different grid and zoom positions every time you visit the start page. I like this, thats why I bought the theme.

“For example, I can see on your page that the “Gestaltung fotobuch” and the “Paper overhead” are looking well.”
-> yes, refresh page again (maybe again and again) until only a section of this picture is visible and you see the problem.

[Juanfra Aldasoro]

Hi Edin,

Thanks for the follow-up.

I didn’t realize that your portfolio was in random order, so every time I visited your site (when you replied) I got to see different things and I was trying to understand the patron of your problem.

We are taking a look at this problem now.

Best,
Juan.

[Andrés Villarreal]

Hi Edin,

I’ve been taking a look at your site, and just tried again the code provided by Juanfra inside your functions.php file. It seems to work as expected now, with all images showing up in their original sizes and without looking pixelated (except for the ones that were originally pixelated). Maybe you tried it before changing the image compression setting?

Please keep in mind that not all images may look good in all of layouts. The VC Posts component adjusts the visible part of each image automatically based on the image layout you choose, so the ideal scenario would be to upload images with dimensions that are similar to the layout sizes, though I know this is a little complicated if you’re using the metro grid and a random order.

Also, images with small details such as a lot of text, even if they are not compressed, and even if they are not pixelated, may not look fine after the browser resizes them, since the rendering quality of a browser-resized image is always inferior to image editing software. Again, the ideal solution would be uploading images with the same dimensions as you want them to be displayed in the browser.

However, showing very large images can result in a detriment of your site’s loading speed, since their transference size tends to be high. If you still need to show large images, we recommend to optimize them for web in Photoshop or Illustrator, and then pass them through a second optimization service such as TinyPNG: https://tinypng.com/. There’s also a great plugin call Smush (https://wordpress.org/plugins/wp-smushit/) that you can use to optimize images after you uploaded them to your WordPress site.

Just to wrap this up: I added a fix to your functions.php file, which seems to solve the issue. Could you please let us know if you see everything working as expected on your side? Also, once you have optimized and regenerated all your images, you may want to try removing the code I added and see if you still experience the issue.

Best,

Andrés.

[Edin]

Hey,

thank you! Now the problem is solved for me – the pictures arent that pixelated like before. Thanks for fixing the Problem!

Greets from Leipzig!

[Andrés Villarreal]

Hi Edin,

Thanks for the follow-up. We’re really happy to see the problem was solved 🙂

Have a great day,

Andrés.