Hi everyone,
I am trying to reproduce the Facebook screen to show picture in a full screen.
I had two options :
- the first one to put the image in a background of a group to center it. The problem with that solution is that it’s only works for big screen. The image is not rescaled for small screen. Moreover the image could have been bigger !
Here are two photos representing it :
- the second option is to use the classic image, and the rescale function. The problem with that one is that the image to be the bigger it can be is not anymore centered. In fact the image height is 100% and then it’s top margin is 0px. This is the first problematic. The second one is that when the image is in portrait it is deformed.
here are the screenshots :
If anyone have ever succeed to show images on a big screen I am interested.
Here is my code :
Perfect solution to make the whole development process faster is right here:
Fully responsive, centered vertically and horizontally for all image ratios no matter the screen size.
Hello @boston85719,
I had a look to your template but I need to customize it in order to have the comments on the right on the computer. Is that possible on the developer mode or the classic one ?
And I have seen that it is responsive for all ratios but is it dynamically without saying next image is this format ? Because I do not have a precise format for every image
You can definitely customize it to add comments on the right…it would require adjustments of the code…didn’t know you needed comments on the right as the screenshots you shared are just images and the code you shared didn’t seem to incorporate any other elements besides the image and the navigation icons, so out of the box, my template is not the perfect solution as it doesn’t incorporate comments on the right.
The template was made to be for showing a full screen image in a popup, but not really to show anything else, although it is possible to add those other elements.
The template is set up to focus on an image ratio that is selected by the developer…the examples of various ratios selected on the page by the user to demonstrate the full functionality of the template.
If you have images that are not of the same image ratio, it will be extremely difficult and I might dare to say impossible to get a full page image element to change depending on the image ration, unless you are storing the image ratio in your database.
Thank you for answering !
Sorry about that , I did not to it for the moment because I was waiting to have a solution for the photo before. But there was the white space for it on the right.
Do you know how to have the access to this without using another plugin. I would like to store the ratio of pictures. It would let me to do a much easier solution with the Instagram way of showing pictures. But impossible to have the access to this 
If you were to save the ratio of the image on the image data type, my template can be customized to allow for that because the process I put together for allowing multiple ratio types just needs the information set, and if the information is known it can be set.
How do you plan on storing the image ratio in the database when your user uploads the image? I don’t think that there is an image uploader that provides the image ratio information or the height or width of an image to calculate the ratio
That plugin is focused on allowing users to add text, markers etc. to an image…not focused on showing an image as a full screen horizontally and vertically centered image.
- Adding a dynamic image as a background covering full width and full height of the visual element added on the page.
This just makes the image the full size of the element you use to show the element. It doesn’t center it on the page or make it height responsive.
Maybe it does what you actually need…you can always test it.
