Hello,

It seems that the service image display on the front end is being forced to 570px in height on a desktop browser, regardless of the size/resolution the image actually used in the backend. I think this is a lot of wasted space and the customer has to scroll before seeing the real booking information. I understand there are a medium and small size as well for smaller screens.

So is there a way (either user-specified in the UI or hard CSS change) to keep this image to more like a narrow strip, maybe with height of 300px or any value I specify? Any help is appreciated.

I'm keeping this ticket public so others may benefit from the answer if they have the same question. I see a lot of tickets with same questions but the answers are private so the same questions are being asked over and over again. I understand the need to keep private info private, but there are many other areas For situations with private info 

Cuong

Thanks for your reply Bogdan,

Sorry I thought the link I provided in the submit form did show this. Anyway here are 2 files to illustrate what I mean.

File: Service-booking-with-no-gallery-image.jpg shows the booking page with no gallery image set. The size of the header of the service is 1110 x 256. This to me is fine since it's a narrow strip serving as the header of the service.

File: Service-booking-with-gallery-image.jpg shows the same booking page with a gallery image set. With an image now activated, the code forces the header size to 1110 x 570 which I think is way too big vertically. It's definitely nice to have an image in the service header but this should not push the booking info and booking form way out of view for most desktop browsers, which is the main purpose of having a customer land on this page. Obviously this is worse on mobile devices.

Suggestion/request: Preferably the header image is kept at 1110 x 256, or make it a user input (even better), then allow user to specify how it should fit (standards are stretch to fit, tiled, left , top, right, etc.) This way we have very flexible way to display services.

If you don't think it's a worthwhile function to add, then please provide some guidance on how I can change CSS to do this. Much appreciated.

Cuong

Hi Bogdan,

Thanks for your reply and the screen shot. It seems to work now. I tested on variety of browsers (Safari, Chrome and Firefox on Mac) plus using a proxy browser. Also tested responsive displays for various tablet and mobile phone sizes. I am using AWS Cloudfront CDN and I guess it took a couple of days to refresh; I just didn't want to manually invalidate it every time I made changes.

Going forward, it would help if you include in the documentation the recommended sizes for displaying images, and mention how images will be cropped by the code for different screen sizes. This will help people quicky target the right image display instead of trial and error to get what they want.

One other note now that I see the proper image size displayed. There are always a couple of square tabs (orange in my case) showing on either side below the image. Is it possible to not allow too much of this (or at all) since they look odd, serve no purpose, and distract the viewer from the main content?

Thanks,

Cuong

Hi Bogdan,

Thanks for the CSS. It does exactly what I need, though I still don't understand why it's not your default display, as I don't see the point of showing the color squares.

With respect to the documentation, I can't write detailed instructions for your documentation. However I think what I provided was straightforward enough:

"... include in the documentation the recommended sizes for displaying images, and mention how images will be cropped by the code for different screen sizes."

Thanks,

Cuong

Hi Bogdan,

Totally understand your point. I think regardless of how the gallery images are used, it would be helpful for a person unfamiliar with your program to know what image dimensions work best, how they are cropped or stretched or otherwise manipulated by the code, and what limitations they may have. My suggestion was mainly for that purpose. Your suggestion works perfectly for me, so please consider this ticket closed.

Cheers,

Cuong Huynh