3D, VR and 360° Photographers  |  Real Estate Agents  |  3rd Party Service Providers
Need a 3D/VR/360°/Drone Photographer? 2,839 We Get Around Network Members in 98 Countries! Ask For FREE referral!
We Get Around Network Forum
problemTips

Nikon Full Frame Cameras & WP3D Pic Gallery2322

Basic
Member
pixelray private msg quote post Address this user
Hey guys, I have worn Ross out with this topic and I'm curious to know if anyone here has the same issue I'm having. I shoot with a Nikon full frame camera. My uploaded photos to my WP3D gallery are getting chopped at the top and bottom. Causing for some photos to definitely not look good with so much of the picture missing. KOA and Showcase skins does not have this problem with my photos uploaded in the exact same size. WP3D requires a 1920x1080 size to show the entire photo as Ross has said. Well, with a full frame, you can't get to that size without cropping the top and bottom off. Which sux b/c WP3D works perfectly with my website set up. Anyone else have this issue or know of any way around this? Thanks.
Post 1 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Hi @pixelray, I'm sorry that I gave you the impression that I'm "worn out" on the topic of WP3D Models photo sizes...that definitely wasn't my intention.

The bottom line is that we built the current photo gallery to trim all photos to be a consistent size (1920w x 1080h). This matches the standard image size that is created when creating a "snapshot" inside the Matterport Workshop and it's the initial size I went with for the first version of the WP3D photo gallery.

I do plan to offer a new gallery option within WP3D Models very soon...one that will better support various image sizes and ratios, including portrait-oriented images.

Keep your eyes peeled!
Post 2 • IP   flag post
Basic
Member
pixelray private msg quote post Address this user
That was just my way of saying I have bothered you enough over the subject and was just curious if anyone has this problem and a possible fix. I wasn't meaning that I thought you were tired of talking about it =)
Post 3 • IP   flag post
Expertise private msg quote post Address this user
I'm guessing your camera shoots in a 6x4 (1.5/1) ratio of width to height. That would be 1920 x 1280. I would just crop the image height myself to 1080, it's not that drastic. This is easy to do in Photoshop.

Alternately, you could reduce your file size to 1620 x 1080, then add a 150 pixel wide black band on each side to make it 1920.
Post 4 • IP   flag post
Basic
Member
pixelray private msg quote post Address this user
This is what the crew at Adobe said when I told him I shoot with a D750 Full Frame and that when I chose the size of 1920 x 1080 as my output size but was getting 1618 x 1080:

"That is why you cannot get exactly 1920 x 1080. The Nikon full frame picture has an aspect ratio of 3:2 (or 1.5). What you are asking for has an aspect ratio of 1.78. That is why LR has to change the 1920 to 1618 (1618/1080 = 1.5)."

So, with that being said, I thought there was no hope here. I will have to try adding the border to see if that helps and is something that can be done quickly and will look ok. Thanks for the tip
Post 5 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Thanks for the great write up & explanation @Expertise!
Post 6 • IP   flag post
thebiggerpicture private msg quote post Address this user
There is hope @pixelray. @rpeterson please jump in if you have any comments on this.

WP3D Gallery Full Frame Ratio - This is NOT future-proof, so any updates to the WP3D plugin may overwrite this modification.

1. Go to wp-content>plugins>wp3d-models>assets>css>frontend.css

2. Search for #wp3d-gallery

3. Change the padding-bottom from 56.25% to 66.75%

4. Save

5. Upload your web-optimized images with your full-frame ratio (1920 x 1280).

6. Use those in the WP3D Gallery.

Alternate Method – Future proof as long as @rpetersn doesn't change the ID:

1. Define a new rule in your theme's style.css file:

#wp3d-gallery{padding-bottom: 66.75%!important;}

NOTE: Neither method is WP3D approved, it's simply a basic modification to remedy the full-frame ratio request. I'm sure Ross will do something more elegant and flexible in a future release should the demand remain.

How does this work?
Ross isn't actually creating a new, cropped image file from your uploaded original. He's simply defining a ratio via CSS that matches the common 1920x1080 output (same ratio as hd TVs, most smartphone & tablet screens, etc.). This "hides" the top and bottom of your images, so by making the modification above, you reveal your full image.

How did I figure this out?
I've been a web developer for over 10 years. Wordpress is one of my specialties.
Post 7 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Hey guys...

@thebiggerpicture - Thanks for jumping in here!

Just a couple notes/clarifications:

1) Modifying the CORE CSS in your copy of WP3D Models will definitely be overwritten with each subsequent release of WP3D. A better way might be (as proposed in the "Alternate Method" above) to paste in some custom CSS rules that overrule the "core" css, and paste them into your site theme CSS, or the WP3D Models "Settings --> CSS/JS" tab. The full CSS rule (noted above) would be:

.wp3d-skinned-crosby #gallery,
#wp3d-gallery { padding-bottom: 66.75%; }

** Note that this combo will catch the "skinned" (single property page) view as well as the standard & no brand views.

2) Now, the bit about how I'm not "creating a new, cropped image file". This is true IF the image you upload is under 1080px WIDE. (Bear with me here). This means that if you upload a 1080 x 717 image (~full frame ratio), it will stay that size, and the CSS rule above will make the image appear full frame with no crop. The same will be true if you upload a 1628 x 1080 image (also ~ full frame ratio). This image size will remain uncropped and you can use the CSS above to display all of the image.

HOWEVER, if you upload an image either of the dimensions (width or height) is BIGGER than 1080, the entire image will actually be (hard) cropped to be 1920 x 1080, and the CSS adjustment (above) will not work. The original image will also remain, at its full/original dimensions.

Whew eh? There is/are a lot of numbers, ratios, etc. going on here...as well as some WordPress-specific cropping nuances.

Hopefully this helps clear up anything that remains muddy and yes, I'm working on the best way to accommodate everyone's different tastes/needs in the next (optional) version of the WP3D Models gallery.

Cheers!

Ross
Post 8 • IP   flag post
thebiggerpicture private msg quote post Address this user
@rpeterson I would update my post but it's too late. I forgot you had the CSS & JS tab in your settings panel. I didn't know you were hard cropping the image, but I agree for image optimization this is a GOOD thing.

On my website, I use 1080 x 717 web-optimized images and am very pleased with the output on all devices. I had modified your style rule in my theme's style.css but have moved it to your CSS & JS settings tab.

Bottom line, if if someone is committed to full frame, the best practice (for now) is to:

1. In the wordpress admin, go to Models > Settings > CSS & JS

2. Add the following CSS rule:

/* Full Frame Gallery */
.wp3d-skinned-crosby #gallery, #wp3d-gallery {padding-bottom: 66.75%}

3. Upload web-optimized images at exactly 1080 x 717

4. Add images to the model under the Media tab, Photo Gallery section.
Post 9 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Here here!

Thx @thebiggerpicture - You've provided a great step-by-step.
Post 10 • IP   flag post
Basic
Member
pixelray private msg quote post Address this user
I have this CSS rule:

@media only screen and (min-width: 1240px){
#gallery {
margin: 0 auto;
max-width: 1240px;
padding-bottom: 698px;
}
}

Should I delete that and then input the new rule?
Post 11 • IP   flag post
thebiggerpicture private msg quote post Address this user
@pixelray is that a rule you created?
Post 12 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
@pixelray - I would not remove that rule. If you recall, this was other custom code that was created for you in response to a different gallery customization you requested in the past.

Removing this rule would affect all of your existing gallery layouts at "desktop" sizes.
Post 13 • IP   flag post
34488 13 13
destitute