Question Images have a hard width set, which breaks layout on smaller screens

Status
Not open for further replies.

Kevin C

New member
When viewing full images in the gallery, if the image was resized to say 800px wide on upload, the gallery software displays the image with a width property of 800. On smaller screens, this completely breaks the layout. I fixed this by editing the dbtech_gallery_image_full template and replacing
PHP:
<img id="full_image" src="{vb:raw image_data.full_path}" alt="{vb:raw image_data.title}" title="{vb:raw image_data.title}"<vb:if condition="$image_data[box_new_width]"> width="{vb:raw image_data.box_new_width}"</vb:if> border="0" />
with
PHP:
<img id="full_image" src="{vb:raw image_data.full_path}" alt="{vb:raw image_data.title}" title="{vb:raw image_data.title}"<vb:if condition="$image_data[box_new_width]"> width="95%"</vb:if> border="0" />

but I can't help but feel that either we've got something misconfigured or something else. I'm sure you've already dealt with this issue and have a better way to make the gallery function on smaller screens.
 
It breaks the layout because if the user is on a small screen, the site sizes down to fit the screen but the image itself does not change size. So an 800px wide image on a 600px wide viewport is going to break outside the constraints of the site container.
 
I see, unfortunately the Gallery currently does not support viewports that small. It's not considered mobile-friendly at this time.

You can get around this by adding
Code:
#full_image { max-width: 600px; }
to additional.css in order to restrict the image to 600px max width.
 
Or you can do like I did in my first post, and give the image a percentage width to ensure that it always fits inside the viewport.
 
Of course not. No one has time to test a change on every permutation of image size and viewport size. All I can do is test on as many viewports and images as I have time for, and yes, I did.

Regardless, it appears that neither of us are correct. I am a backend developer and system administrator and CSS is not my strong suit, so I went out and actually searched to figure out how to handle this correctly. It took one quick google search, and I found that the solution is setting the following properties on the image:

max-width: 100%;
height: auto;

This ensures that the image never expands outside its parent. The height: auto is for browsers that don't automatically recalculate the height after the width has changed. THIS is the correct solution to the issue and makes the view image page responsive.

Taken from: Responsive Images | tutorials.jenkov.com
 
I've added that CSS to the XML file and will release it as part of PL5 next week :)

Thanks!
 
Hello Kevin C,

This ticket has now been closed with the status Answered.

We hope your issue or question has been addressed to your satisfaction. If not, please feel free to re-open it by clicking this link.

If you have any further issues or questions, please feel free to start a new support ticket via the button at the top of every page.

Thank you!
 
Status
Not open for further replies.

Legacy DragonByte Gallery

vBulletin 4.x.x
Seller
DragonByte Technologies
Release date
Last update
Total downloads
862
Customer rating
0.00 star(s) 0 ratings
Back
Top