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
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.
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?
Thank you for your feedback, if you have any detailed suggestion of how we can improve the documentation please write me here. I will forward this to my team about the image sizes so we can discuss about adding it.
As for your case I can see that this CSS is causing this orange color ( attachment)
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."
I will check with my team about this but as far as I know this was in the design of plugin because few of the users actually uses the image like you do.
Nevertheless, I will forward this and hopefully we will change it in the documentation.
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.
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
HI Cuong,
Thank you for your purchase.
Can you please just send me the screenshot of this space do you want to reduce so I can give you my suggestion.
Best regards.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
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 Cuong,
Sorry for late response, we are not working on weekends.
Can you please tell me on which monitor size you are viewing this page.
This is my result now ( attachment)
Best regards.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
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 Cuong,
Thank you for your feedback, if you have any detailed suggestion of how we can improve the documentation please write me here.
I will forward this to my team about the image sizes so we can discuss about adding it.
As for your case I can see that this CSS is causing this orange color ( attachment)
To disable it you can use this Css
.amelia-app-booking #am-service-booking .am-service-gallery{
background-image: none !important;
}
and this is the result
Best regards.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
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 Cuong,
I will check with my team about this but as far as I know this was in the design of plugin because few of the users actually uses the image like you do.
Nevertheless, I will forward this and hopefully we will change it in the documentation.
Sorry for any inconvenience.
Best regards.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
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