HomeForumsPanoPress SupportKeeping the aspect ratio while resizing

This topic contains 4 replies, has 2 voices, and was last updated by  Sam Rohn 3 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2594

    Johan
    Participant

    First of all, thank you to Sam and Omer for an amazing plugin. Great job and very useful for panorama photographers!

    I am struggling with ensuring that preview images are shown properly on my site. This is not as much an issue with PanoPress as it is with inserting the proper CSS code to make it look properly. I only understand the basics of CSS and am sure I am missing something very basic.

    I want to make sure that the preview images I am showing do not extend across the widgets regardless of the device and the browser width. I therefore would like to resize the image to fit in the content area of my template while keeping the aspect ratio of the image. I tried many different combinations, but cannot get it to work properly.

    The following CSS code ensures the image does not “overflow”, but crops the image to a square if the image is too large:

    .pp-embed {
    max-width: 100%;
    width: 100%;
    height: auto;
    left: 5px;
    }

    What CSS code can I use to ensure the image does not overflow in the widget area while the image keeps its original aspect ratio?

    #2598

    Sam Rohn
    Keymaster

    hi johan

    fixed aspect ratio with fluid width and improved responsive behavior in general are high on our list for an upcoming release of PanoPress, but for now…

    if you just want to keep your pano contained to the max width of a parent div and not overflow onto sidebar etc, just set pano width to 100% in either settings or shortcode, dont use px (pixels) or it will always be a static width

    responsive fixed aspect ratio is tricky for panoramas because panoramas do not have an “intrinsic aspect ratio” as does a jpg for example, and panopress deals with embedding several different types of content, jpg as img, swf as object/embed, html as iframe, etc, and finding a reliable method that actually works w all of these options has been tricky…

    one way to get responsive fixed aspect ratio for panopress embeds and previews is to use CSS media queries, below is some example CSS code and the specific breakpoints and sizes etc would depend on your particular theme and preferences, you might also use 100% width and set height in pixels etc

    dont forget to include !important in your declarations as shown in code below

    anyone eles who wants to try this, paste the following code into either the panopress admin settings css code box, or add it to your current wordpress theme’s style.css file

    more info on media queries and !important

    http://arcsec.ca/media-query-builder/

    http://wpmu.org/how-to-customize-responsive-wordpress-themes-part-4-media-queries/

    http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

    and see these links for examples of other responsive fluid width fixed aspect ratio techniques we are looking at recently, there are many others out there as well, CSS, javascript, etc…

    http://jsfiddle.net/Masau/7WRHM/

    http://jsfiddle.net/5tzk3/10/

    also see other posts tagged “responsive theme” in this forum for more info and tips on using panopress with responsive wordpress themes

    http://www.panopress.org/forums/forum-tag/responsive-theme/

    sam

    Sam Rohn :: New York City
    360° Panoramic Photography :: www.samrohn.com
    Location Scout :: www.nylocations.com

    #2602

    Johan
    Participant

    Thank you for the example and the many links. I will explore them further.

    The problem that I am having is not with the panorama itself, as I am showing that in a panobox, but with the preview image which does have a defined aspect ratio. When I just specify 100% width and 100% height with panobox turned on, the preview image does not show at all. I have turned off all other plugins and have used the twentytwelve template to rule out any interference.

    When I specify the width and height, the plugin clips the preview image and when I insert the CSS code below you provided in the CSS tips page the image gets stretched on smaller devices.

    I am sure I am missing something very basic CSS to ensure the preview image shows correctly without going across the widget area.

    #2604

    Johan
    Participant

    From my limited understanding of css, “max-width: 100%; height: auto;” should allow the image to resize and to maintain the aspect ratio. However, when specifying “height: auto” in the Panopress CSS, this seems to be ignored and instead the height specified in the embed size is used. This results in the image always fitting nicely from a width perspective, but the aspect ratio changing as the image has the same height regardless of the width.

    #2609

    Sam Rohn
    Keymaster

    i am not really a great CSS wizard myself, so i am still working on this problem too 🙂

    sam

    Sam Rohn :: New York City
    360° Panoramic Photography :: www.samrohn.com
    Location Scout :: www.nylocations.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.