WordPress.org

Forums

Cyclone Slider 2
[resolved] how does the plugin handle different picture sizes? (12 posts)

  1. leadology
    Member
    Posted 2 years ago #

    I need a uniform display that looks nice of course. Are images resized to the correct size to display properly? How about if the images are different sizes? Thank you:-)

    http://wordpress.org/extend/plugins/cyclone-slider-2/

  2. Eddic
    Member
    Posted 2 years ago #

    @kosinix, I have the same question. Please! ^_^

  3. kosinix
    Member
    Plugin Author

    Posted 2 years ago #

    Hi guys, I will try my best to explain. Note: PHP code ahead.

    By default images are resized with their aspect ratio preserved. However, if the width and height of the uploaded image is equal to the slideshow dimension, resize is automatically skipped.

    Now, If you look at templates/default/slider.php you will see that it uses the function cycloneslider_thumb:

    <img src="<?php echo cycloneslider_thumb($slider_meta['id'], $slider_settings['width'], $slider_settings['height'], false, $slider_meta); ?>" />

    cycloneslider_thumb is where the image resize happens. It accepts the following parameters:
    $original_attachment_id - The WP attachment ID of image
    $width - The width of the resize
    $height - The height of the resize
    $refresh - Defaults to false. If true, images that were already resized are forced resized.
    $slide_meta - The slide properties. Defaults to empty array
    $option - The resize logic.

    $option is set to "auto" by default. That means images are resized with their aspect ratio preserved.

    Other possible values are:

    • exact - Resize to exact width and height, aspect ratio is ignored
    • portrait - Resize to width and height with height preferred. All images will have the same height regardless of dimension.
    • landscape - Resize to width and height with width preferred. All images will have the same width regardless of dimension.
    • crop - Resize to exact width and height, aspect ratio preserved, but excess parts cropped.

    If you want to use these other modes in the resize, change the call to cycloneslider_thumb in your templates:

    <img src="<?php echo cycloneslider_thumb($slider_meta['id'], $slider_settings['width'], $slider_settings['height'], false, $slider_meta, 'crop'); ?>" />

    If you do not want resizing at all, and want to use the uploaded image, discard the cycloneslider_thumb from your templates and use WPs wp_get_attachment_url:

    <img src="<?php echo wp_get_attachment_url($slider_meta['id']); ?>" />

    Hope this helps!

  4. Davedub
    Member
    Posted 2 years ago #

    Hi kosinix,

    I too am having this issue and your instructions make complete sense to me.

    However, when I check the slider.php file, there is no reference to cycloneslider_thumb.

    Has the slider code been updated since this post? Here's the code I have for slider.php (default):

    <?php if($slider_count>0) $slider_id = $slider_id.'-'.$slider_count; ?>
    <div class="cycloneslider cycloneslider-template-default" id="cycloneslider-<?php echo $slider_id; ?>" style="max-width:<?php echo $slider_settings['width']; ?>px">
    <div class="cycloneslider-slides cycle-slideshow" <?php echo cyclone_settings($slider_settings, $slider_id); ?>>
    <?php foreach($slider_metas as $i=>$slider_meta): ?>
    <div class="cycloneslider-slide" <?php echo cyclone_slide_settings($slider_meta, $slider_settings); ?>>
    <?php if ($slider_meta['type']=='image') : ?>
    <?php if ($slider_meta['link']!='') : ?>" href="<?php echo $slider_meta['link'];?>"><?php endif; ?>
    <img src="<?php echo cyclone_slide_image_url($slider_meta['id'], $slider_settings['width'], $slider_settings['height'], array('current_slide_settings'=>$slider_meta, 'slideshow_settings'=>$slider_settings) ); ?>" alt="<?php echo $slider_meta['img_alt'];?>" title="<?php echo $slider_meta['img_title'];?>" />
    <?php if ($slider_meta['link']!='') : ?>
    <?php endif; ?>
    <?php if(!empty($slider_meta['title']) or !empty($slider_meta['description'])) : ?>
    <div class="cycloneslider-caption">
    <div class="cycloneslider-caption-title"><?php echo $slider_meta['title'];?></div>
    <div class="cycloneslider-caption-description"><?php echo $slider_meta['description'];?></div>
    </div>
    <?php endif; ?>
    <?php elseif ($slider_meta['type']=='video') : ?>
    <?php echo $slider_meta['video']; ?>
    <?php elseif ($slider_meta['type']=='custom') : ?>
    <?php echo $slider_meta['custom']; ?>
    <?php endif; ?>
    </div>
    <?php endforeach; ?>
    </div>
    <?php if ($slider_settings['show_nav']) : ?>
    <div class="cycloneslider-pager"></div>
    <?php endif; ?>
    <?php if ($slider_settings['show_prev_next']) : ?>
    <div class="cycloneslider-prev">Prev</div>
    <div class="cycloneslider-next">Next</div>
    <?php endif; ?>
    </div>

  5. Davedub
    Member
    Posted 2 years ago #

    Update: It does look like the solution above was for an older version. I now have version 2.5.3 which includes class-image-resizer.php

    Inside class-image-resizer.php I found a function called:

    resizeImage($newWidth, $newHeight, $option="auto")

    As a trial hack, I added this as the first line to this function:

    $option="portrait";

    This had no effect. So I searched through ALL the slider's php files, and was unable to find a single reference to the resizeImage function - so I'm now stuck!

    Any advice greatly appreciated. Link for slider on my site:
    http://thegallerychaloklum.com/gallery/

  6. Davedub
    Member
    Posted 2 years ago #

    Update 2: I've been digging around the code, trying to set the resize option to portrait, but with no results - vexed!

    I have a feature suggestion I'd like to put forward:

    Add 'Resize Method' dropdown select to the slider settings (slider-properties.php) and individual slide settings (box.php) with choice of:

    • exact
    • portrait
    • landscape
    • auto
    • crop

    I've already added the vars and dropdowns to my own copy of your code (let me know if you'd like a copy) but am still unable to actually change the resizing method!
    Time's marching on, I can't do too much more on this right now - awaiting your reply with interest...

  7. Davedub
    Member
    Posted 2 years ago #

    @kosinix - please? I really, really need to just be able to set the resize method to 'portrait'!

  8. kosinix
    Member
    Plugin Author

    Posted 2 years ago #

    Hello davedub.

    The function you are looking for is cyclone_slide_image_url. Unfortunately its not documented at the moment. But you can check the code in inc/functions.php.

    To set resize to portrait:

    Inside your template in slider.php find the cyclone_slide_image_url. This function takes care of resizing the image and returns the url to that image. Add the resize_option to the passed parameter:

    <?php echo cyclone_slide_image_url($slider_meta['id'], $slider_settings['width'], $slider_settings['height'], array('current_slide_settings'=>$slider_meta, 'slideshow_settings'=>$slider_settings, 'resize_option'=>'portrait') ); ?>

  9. Davedub
    Member
    Posted 2 years ago #

    Hi kosinix,

    I tried adding the resize option to the cyclone_slide_image_url as directed, but the only changes seems to be that the images are no longer centred!

    I have it running here, with a fresh install of the plugin: http://thegallerychaloklum.com/

    Any help very much appreciated!

    - Dave

  10. Davedub
    Member
    Posted 2 years ago #

    I think there's a problem with the first few lines of the getSizeByAuto funtion in class-image-resizer.php - I could think of a couple of ways the existing method might fail. Would soemthing like this not be better?


    private function getSizeByAuto($newWidth, $newHeight)
    {
    $ratio = $this->height / $this->width; // aspect ratio of image
    $sliderRatio = $newHeight / $newWidth; // aspect ratio of slider

    if ($ratio < $sliderRatio)
    // *** Image to be resized is wider (landscape)
    {
    $optimalWidth = $newWidth;
    $optimalHeight= $this->getSizeByFixedWidth($newWidth);
    }
    elseif ($ratio > $sliderRatio)
    // *** Image to be resized is taller (portrait)
    {
    $optimalWidth = $this->getSizeByFixedHeight($newHeight);
    $optimalHeight= $newHeight;
    }
    else ...etc

  11. Davedub
    Member
    Posted 2 years ago #

    After the above fix, the images were not centering. To get the images to center horizontally, I changed

    margin:0;

    to

    margin:auto;

    for slide img in common.min.css.

    However, I'm now having trouble getting the vertical centering to work - any suggestions?

    - Davedub

  12. GoodUtopian
    Member
    Posted 1 year ago #

    Hi

    Is there a way to disable resizing completely? I just want the olugin to display my images as they have been uploaded.

    Thanks,

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Cyclone Slider 2
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic