Images being cropped - Shortcode Gallery

resolved (15 posts) (4 voices)

  1. litodj
    Member

    Hi,
    I am having a problem with images being cropped inside the gallery.
    When I disable the "Image Resizing" in the theme options, the gallery crop problem gets fixed but the side effect is distorted images in the post thumbs/featured images.
    Is there a way to fix this?

    Here's the shortcodes I used:

    [galleria height="350" width="600" enable="show_counter,show_imagenav,lightbox"]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-10.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-9.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-8.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-7.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-6.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-5.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-4.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-3.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-2.jpg[/image]
    [image]http://avioesemusicas.com/wp-content/uploads/2012/05/osho2012-1.jpg[/image]
    [/galleria]

    And here is the link to the post where you can see the images cropped.

    http://avioesemusicas.com/oshkosh-2012-chegando-no-final-de-julho-osh2012.html

    Posted 5 years ago #
  2. Olá Joselito!

    Bem legal o seu site, vou dar uma lida nos causos agora mesmo (como um bom mineiro, não resisto a causos) :)

    I just tried that link you've sent and it seems to be working fine, there's no distorted images, though they are being cropped. Isn't that because of the images proportions? What happens if you upload an image with exact same dimensions as that free space there?

    PS: Your images and components (likebox, tweets, comments) are taking a little longer to load than the rest of the site. Maybe you could try a caching plugin (like w3 total cache) to improve performance.

    []'s

    Posted 5 years ago #
  3. litodj
    Member

    Hi Rochester, mineirim tem em todo lugar mesmo, que legal :)

    Yeap, that's the problem: my images are all 16:9 or wider. My previous theme used PrettyPhoto and it would adjust to whatever image dimensions I had in the gallery or inside a blog post. Now, I noticed that if I don't use shortcodes, my images are not displayed in a lightbox. Is that the correct behaviour for Infocus?

    Is there a way around this? I tried to install PrettyPhoto as a plugin but the result was lot of errors in the theme.

    Thanks for the tip about performance, I'm gonna try a cache plugin.

    Posted 5 years ago #
  4. Elliott
    Support

    Your talking about the galleria in your link correct? What are you trying to do there? Are you wanting your images to use the whole space of the galleria? If so then you'll need to increase the height in the shortcode a bit or reduce the width.

    Posted 5 years ago #
  5. litodj
    Member

    Hi Elliot,
    No. Actually I want the images that shows up on the lightbox when you click the galleria without any crop, no matter the aspect ratio of the picture.

    If I disable the image resizing (theme options), my images will appear without crop and will fill the Galleria, however it will cause distortions in the letterbox/thumbs posts. With image resizing ENABLED, there is no distortion but the wide (16:9) images will be cropped to 5:4.

    Posted 5 years ago #
  6. Elliott
    Support

    As long as your images are not bigger than the screen width / height then prettyPhoto will open them in their original dimensions.

    If someone with a small resolution views them then prettyPhoto will resize the image so it fits inside their screen and then offers an icon in the top right hand corner so they can view it in fullsize mode as well.

    I noticed your prettyPhoto styles looked kind of different. We already include prettyPhoto in the theme so you don't need to use any plugins or customizations to get it working.

    Posted 5 years ago #
  7. litodj
    Member

    The uploaded pics in the above link are 1024x576, therefore they shouldn't have been cropped. I understand PrettyPhoto will resize the pictures to fit in the screen, but the resize is not happening, what is happening is cropping.

    The Infocus installation is almost default, I did not change any styling. Also, I don't understand why images in the post are not being opened in a lightbox, please see and click the image: http://avioesemusicas.com/azul-e-trip-vao-anunciar-tentativa-de-fusao-hoje.html

    Posted 5 years ago #
  8. Elliott
    Support

    The image is not being "cropped" it's being resized or "scaled" if you will. As I said prettyPhoto does this when the image does not fit inside your screen all the way. (see attached image)

    If that's not what your seeing then take a screenshot so we can get a better idea of what's going on.

    As for your second link your inserting that image with the Wordpress media uploader. If you want it to open in prettyPhoto then switch to the HTML editor and add this to the link, rel = "prettyPhoto". Otherwise you can use our image_frame or fancy_image shortcodes to get an image to open in prettyPhoto.

    Attachments

    1. 1.png (177.3 KB, 0 downloads) 5 years old
    Posted 5 years ago #
  9. litodj
    Member

    Elliot, there are two screenshots below, both of them with IMAGE RESIZE DISABLED at Theme Options. As you can see comparing to your screenshot, the image now is complete and not cropped.

    The other screenshot shows the side effect of disabling the Image Resizing: The "Thumb Post" gets stretched to fill the entire thumbnail.

    As for the second issue, my previous theme would open the lightbox even using WP media upload without having to add the "rel = "prettyPhoto". It will be a lot of work to going back years and addrel in all my posts. Do you know any way to automate this in your awesome code?

    Thanks for all the answers so far.

    Attachments

    1. thumb-stretched.jpg (67.1 KB, 0 downloads) 5 years old
    2. image-resizing-disabled.jpg (105.7 KB, 0 downloads) 5 years old
    Posted 5 years ago #
  10. Elliott
    Support

    Ok, the problem is that the timthumb resize script is resizing it, not prettyPhoto. Try switching your shortcode so it looks like this instead,

    [galleria height="350" width="600" enable="lightbox"]

    As for the prettyPhoto issue open up /wp-content/themes/[your_theme]/lib/scripts/custom.js and on line 118 you should see this,

    jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto({

    Change it to this,

    jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox'], .wp-caption a").prettyPhoto({

    Posted 5 years ago #
  11. litodj
    Member

    Elliot, the changes in the shortcode galleria didn't help, still cropping.

    As for the second issue, worked almost perfect! Now images are opening in a lightbox as before, but all pictures have the word "undefined" as caption (screenshot). It is a minor issue that I can live with, but if you know how to fix that would be great.

    Attachments

    1. undefined.jpg (44 KB, 0 downloads) 5 years old
    Posted 5 years ago #
  12. Elliott
    Support

    Do this, http://mysitemyway.com/support/topic/galleria-picture-orientation-question#post-40999, that should stop the galleria shortcode from using the resize script.

    To get rid of the "undefined" text then make sure the links surrounding your images have an alt and title text set like so,

    <a href = "#" rel = "prettyPhoto" alt = "alt text" title = "title text">

    You also need to do this in the galleria shortcode as well,

    [galleria transition="fade" speed="3000" height="300" width="600"
    enable="image_crop,show_counter,show_imagenav,pause_on_interaction,lightbox"]
    [image]http://www.yoursite.com/images/1.jpg[/image]
    [image title = "Summer Beach" alt = "Alt text"]http://www.yoursite.com/images/2.jpg[/image]
    [image]http://www.yoursite.com/images/3.jpg[/image]
    [/galleria]
    Posted 5 years ago #
  13. litodj
    Member

    Elliot,

    The changes to /wp-content/themes/[your_theme]/lib/shortcodes/19-galleria.php did the trick, now the images are not being cropped anymore \o/

    Thank you very much! Now I need to learn how to make my own shortcode for Pinterest Social, If I can get it right, will come back here.

    Thanks again.

    OOOOPS: Just found out, pinterest has been done! http://mysitemyway.com/docs/index.php/Changelog_Details#Added_Pinterest_Button_Shortcode

    #ThumbsUp

    Posted 5 years ago #
  14. charissaproctor
    Member

    Thanks!! i was also able to solve my problem with this change in code
    http://mysitemyway.com/support/topic/galleria-picture-orientation-question#post-40999

    Posted 5 years ago #
  15. That's awesome!

    Let us know if you need anything else!

    []'s

    Posted 5 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme