Search…

X3 Photo Gallery Support Forums

Search…
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Image quality / Color of separator, frames etc.

17 Jan 2019, 01:51

Hello,

I tested the demo imagevue 3.24.3  some time ago and noted some problems.

1. The image quality is worse (not so sharp) when viewed in imagevue than in original. Is this because of resizer? Is it possible to show the image in exactly the same size like original (e.g. 580x777px) without quality losses? The picture can be made smaller for mobile devices , but not larger than original.
2. Is it possible to change the color of separator, image frames, the background of menu items (mouse over), background of dropdown menu, audio player? Is it also possible to change the opacity of them?

Thank you,
Vladimir
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality / Color of separator, frames etc.

17 Jan 2019, 02:57

VladimirS wrote:1. The image quality is worse (not so sharp) when viewed in imagevue than in original. Is this because of resizer? Is it possible to show the image in exactly the same size like original (e.g. 580x777px) without quality losses? The picture can be made smaller for mobile devices , but not larger than original.
I am not sure when or how you saw X3 display an image (580 x 777 px) with any quality loss. X3 does not change the original image you upload, unless you resize-on-upload, which would not happen in the case of 580 x 777.

But if you are uploading LARGE images (usually originals 4000px +) AND using the X3 RESIZER (X3 upload), then yes there is a browser-based resizer involved that resizes images down to specified target (normally set to 1600px long side). I am aware that the resize quality is not flawless, but then again, what resize is? You are after all downsizing images and re-compressing to JPG at a smaller web-friendly size. The X3 resizer will only resize images that are OVER 1600px long-side, and only if you have the upload-resizer enabled.

Solution? If you don't like the quality of the built-in resizer, then you can resize your images to web-friendly format BEFORE uploading, and then disable the resizer on upload. I usually do this myself for optimal control, simply resizing on desktop and then using imageoptim app for best size/quality compression using best compressor codecs. I wrote a blog post about this: Optimizing Images for Photo Websites

Of course, you need to resize your images to a "web-friendly" size , and this will incur compression on your images.
  • No visitor has any interest in waiting for your 4MB 4000+ megapixel images to load into their browser.
  • A standard low-end desktop screen 1280 px doesn't even have capabilities to show better quality than 1280 px wide image. Loading larger images than a screen supports is simply a waste of time and bandwidth, and creates a bad user experience.
  • If you upload images at 4000 px, likely your hosting will be incapable of resizing them smaller sizes because of memory limit.
Apart from the above, X3 also has it's own server (PHP) resizer, that will resize images down to smaller versions, mostly used in various grid layouts (often referred to as "thumbnails"). This is also a necessary part of serving your images of course, but X3 will only serve resized images if the specific size of the request is substantially smaller than the image "original" size. The X3 server resizer is good, and there is no way you will get better server-based resizing than X3 on your own self-hosted PHP server. Below are two examples, one original, and one resized down to 1280. The resized version, is only served for requests where the image on the screen is < 1280 px, else it would load the original anyway. As you would note, the downsized version is a fair representative of the original
https://demo.photo.gallery/content/gall ... apples.jpg
https://demo.photo.gallery/render/w1280 ... apples.jpg
https://demo.photo.gallery/render/w320/ ... apples.jpg (320 px)

Not sure how I can elaborate further upon this, but as for your question "Is it possible to show the image in exactly the same size like original (e.g. 580x777px) without quality losses?": X3 already does this, and would never have resized your 580 x 777 px image anyway. I would need to see an example where you get this idea. X3 might serve a resized image for a thumbnail-request 320px wide, but there is nothing wrong with the X3 server resizer capabilities.

Perhaps you have some special colorspace profile that was not converting properly? That is a separate issue, often related to browsers. X3 retains your color profile. Also, there is already a "compression" setting in X3, set to a relatively high "90". It's not productive to set this value much higher.
Image
VladimirS wrote:2. Is it possible to change the color of separator, image frames, the background of menu items (mouse over), background of dropdown menu, audio player? Is it also possible to change the opacity of them?
With custom CSS (Settings > Custom > Custom CSS), you can change almost anything in the X3 design. If you never heard of "CSS" before, it's complicated stuff, although I can assist in minor changes. Mostly it's unproductive to want to make changes to lots of design elements ... I have no prior reason to doubt your design/web expertise, but from my 10+ years experience, most users who want to change design elements are making a mess of the design and/or don't see the full picture of modern, clean web design.
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

17 Jan 2019, 03:23

Thank you very much for your detailed explanation. I have an example for the problem of the quality of the pictures. Where can I send it to you so you can see what I mean?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality / Color of separator, frames etc.

17 Jan 2019, 04:48

You can either send to me by private message, or send an email to karl(AT)photo(DOT)gallery.
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

17 Jan 2019, 05:06

I did not know how to attach pictures in the private messageI, so I sent the example to karl(AT)photo(DOT)gallery
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

21 Jan 2019, 03:19

With custom CSS (Settings > Custom > Custom CSS), you can change almost anything in the X3 design. If you never heard of "CSS" before, it's complicated stuff, although I can assist in minor changes. Mostly it's unproductive to want to make changes to lots of design elements ... I have no prior reason to doubt your design/web expertise, but from my 10+ years experience, most users who want to change design elements are making a mess of the design and/or don't see the full picture of modern, clean web design.
1. Maybe you can explain how to change the font color of title and description and frame color individually for each page, so I can see an example.

2. When you deactivate menu (settings->advanced->disable menu), the menu-icon at the top right on a mobile device (smartphone or tablet) remains.
Can it be also removed?

Thank you!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality / Color of separator, frames etc.

21 Jan 2019, 08:49

VladimirS wrote:1. Maybe you can explain how to change the font color of title and description and frame color individually for each page, so I can see an example.
Different colors for titles, descriptions and frame for EACH different page? Possible yes, but not logical, not from a design perspective and this is not something you should expect from any pre-designed website application. I can help give custom CSS to globally style the page, but not for each page, because that's just inherently a bad idea and then you should probably be building your own website with dreamweaver instead. Custom styles example:
Code
.title {
  color: tomato;
}
.subheader {
  color: olivegreen;
}
.frame figure {
  border-color: black;
}
VladimirS wrote:2. When you deactivate menu (settings->advanced->disable menu), the menu-icon at the top right on a mobile device (smartphone or tablet) remains.
Can it be also removed?
Looks like a bug. I will fix this in X3.27.0 (1-2 weeks).
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

21 Jan 2019, 09:23

.title {
  color: tomato;
}
.subheader {
  color: olivegreen;
}
.frame figure {
  border-color: black;
}
.frame figure works, but .title and .subheader have no effect. The titles and descriptions of the pages remain the same as before...
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

21 Jan 2019, 09:39

.subheader works suddenly, but .title not yet
.title has an effect on titles of the images, but not on the title of the page
 
VladimirS
Topic Author
Posts: 7
Joined: 16 Jan 2019, 06:22

Re: Image quality / Color of separator, frames etc.

21 Jan 2019, 09:50

ahh, ok... If the title are written as <small> Title</small>, than .title {color...} has no effect on title. Is this a bug?
But it's ok, I can change the font size with font-size: Xem
Thank you
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality / Color of separator, frames etc.

22 Jan 2019, 00:21

VladimirS wrote: ahh, ok... If the title are written as <small> Title</small>, than .title {color...} has no effect on title. Is this a bug?
But it's ok, I can change the font size with font-size: Xem
This is CSS stylesheet, which is the underlying "code" for the style/design of ALL websites (including X3). The X3 stylesheet is highly intricate, with styles affecting some or multiple elements, and some inheriting styles from other elements. X3 "custom CSS" is made available for you to edit styles, but there are no "bugs" ... you would need to be entirely clear about what elements you want to edit. For example, font size/colors are inherited from body styles, while there are separate styles for header tags h1, h2, h3, h4 ... For the main header, we append the additional "title" class, because it is the main page title. Other titles (including some image titles), will inherit h2 or h3, while other styles are applied.

It should be understood that CSS (especially the X3 CSS) is a complex design structure, mainly reserved for web designers. It's available to be overridden from custom CSS, but you would either need to have a fair understanding of html/CSS, or you would need to be very specific in your requests. A "title" for example, can be main page title, intro title, subtitles, image titles, folders titles ... Each layout may in addition have different styles.

About <small>Title</small>, this is something you added INTO your page title input? If so, you may need to use the below, since the <small> tag might have overriding conflicting rules:
Code
.title > small {
  color: tomato;
}
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Image quality / Color of separator, frames etc.

24 Feb 2019, 05:59

VladimirS wrote:2. When you deactivate menu (settings->advanced->disable menu), the menu-icon at the top right on a mobile device (smartphone or tablet) remains.
Can it be also removed?
This bug was resolved in X3.27.0.
https://www.photo.gallery/blog/photo-gallery-X3-27/