WordPress.org

Ready to get started?Download WordPress

Forums

WP Vegas
[resolved] Issues with a single image (40 posts)

  1. Andrei G
    Member
    Posted 1 year ago #

    Hi,

    Thanks for the plugin, really what I was looking for.

    I ran into some issues in the beginning and I wanted to provide some feedback for you and anyone else who may need it.

    First, the documentation is quite unclear about how to use it. It does say to use the shortcode, but that's not very intuitive. For example, I did not want the shortcode associated with a certain page and I wanted to make it part of the header.

    I eventually got to the forum and saw that do_shortcode can be used in the header, but that failed in my first attempts. The fix was to NOT use the shortcode as given on the post page, but to use the complete shortcode using the fade and overlay parameters, as per the documentation. Without specifying fade and overlay parameters, it simply won't activate. It would be nice if these were specified as part of the plugin's default values so that it can also be used without them.

    Second, my initial goal was to use a single background image and then allow other users to add images as needed down the road.

    However, I realized that if only a single image is uploaded to a slider, then it won't work. You need two or more images for any background image to be displayed.

    After poking through the plugin code, I realized that is due to the logic used in building out the javascript needed.

    You're counting the number of items in the array after exploding it and then you deduct 1. But, if the array only contains a single item/image, then deducting 1 makes it 0 and the FOR loop that follows won't even start.

    I changed the code as follows, and that fixed my issue and it now allows to upload a single image as well:

    $imagenum = count($image) ;
    if ($imagenum > 1){ $imagenum = $imagenum -1 ;}
    wp_enqueue_style( 'vegas', plugins_url('/css/jquery.vegas.css', __FILE__));
    
    ?>
    
    <script>
    jQuery( function() {
      jQuery.vegas('slideshow', {
      backgrounds:[
    <?php
    
      for($i = 0;$i < $imagenum;$i++){
        echo "{ src:'" . $image[$i] . "', fade:" . $atts['fade'] . " },"; //get image
      }
    
    endwhile; ?>

    Third, for those who want to add the shortcode to the header using echo do_shortcode, it must be added after wp_head() call. Otherwise, it will not work.

    This is a great plugin and if the documentation were to be more complete, I think it would be even more awesome.

    Thanks.

    http://wordpress.org/extend/plugins/vegas-fullscreen-background-slider/

  2. Andrei G
    Member
    Posted 1 year ago #

    Actually, there may be no need to deduct 1 after all, as the for loop already looks at a number smaller than the count.

    So this may be better suited. Sorry, didn't quite test it previously:

    $imagenum = count($image) ;
    wp_enqueue_style( 'vegas', plugins_url('/css/jquery.vegas.css', __FILE__));
    
    ?>
    
    <script>
    jQuery( function() {
      jQuery.vegas('slideshow', {
      backgrounds:[
    <?php
    
      for($i = 0;$i < $imagenum;$i++){
        echo "{ src:'" . $image[$i] . "', fade:" . $atts['fade'] . " },"; //get image
      }
    
    endwhile; ?>
  3. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Hello 27shutterclicks! Thanks for your input and I appreciate the code. I'll update the plugin to reflect your changes hopefully this weekend if I get some time off. Also I really am going to go through and try to clean up the documentation so it's more clear. I've been meaning to do that for a while now...

  4. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Okay, I've updated the plugin to reflect your single image code, added super sized arrows and delay parameter and I've tried to clean up the description to make it easier to understand how to use the plugin... I was wondering if I could get your opinion on the description/documentation specifically.

    Also any other recommendations/suggestions are appreciated as well.

  5. Andrei G
    Member
    Posted 1 year ago #

    Hi there.

    Alright, so the documentation is a lot better. Very nice, thanks.

    I installed the new version of the plugin on a test site and went through the initial setup process again. Here's my process and some suggestions:

    Upon installing and activating the plugin, I went to Vegas Slides and created a new slide, uploaded some images and published.

    I then copied the shortcode provided on the slide page where the images were uploaded and pasted it into a new blog post.

    Nothing happened.

    I then added the additional paramaters, like this: delay ="2000" overlay="" arrows="yes" (within the shortcode).

    That made it appear and function correctly.

    So the shortcode provided on the slide page is still not intuitive, as per my original post. What appears there should either be:

    1. Just the ID, so that it can be plugged in the shortcode as per the documentation.
    2. A complete shortcode, with all details added, as per the documentation, so that it can be simply copied and pasted into a page, post, etc.

    Here's an example of the shortcode that should appear on the respective slide page:

    [vegasslider id="27" fade="1500" delay ="2000" overlay="" title="no" arrows="yes"]

    This would make it much easier for people to get started faster, without further headaches.

    About the arrows and title:

    The newly added arrows are a nice touch, but they move as the page scrolls. So if the page is longer vertically, when you drag the scrollbar down the arrows move up with the content, up to a point where they're no longer in view. This means you have to scroll back up in order to use them. I think ideally, they should be fixed so they're always in the same position regardless of scrolling. Same for the title.

    Some other suggestions:

    I feel that the plugin should have a settings page where one can easily configure default parameters like fade, delay, overlay and whether arrows and title are displayed or not (via checkboxes).

    Imagine that different shortcodes are used in different pages and posts. If I want to change the delay for all, I have to go in every page or post and change the value. This would be cumbersome. Being able to go to the plugin settings and adjust the value there would be far easier.

    Also on the plugin settings page, there could be a checkbox that would enable the slider globally (equivalent to adding it to the header). Feels like this would be the more likely scenario that people would primarily want to use the plugin for. This would make it more accessible, rather than having to edit the header.php.

    If slider is enabled globally, you could specify the slider id via input field (in case there are multiple Vegas Slides defined).

    Hope this helps and thanks for your efforts.

  6. Andrei G
    Member
    Posted 1 year ago #

    Oh, one more thing. During development of a theme, I find myself constantly using the Developer Tools to inspect html and css.

    When the slider is enabled and the Developer Tools window is opened (in Chrome for example), it actually causes the code to shift down every time the animation occurs. So if you're trying to track a certain piece of code, every 2-3 seconds it shifts up and down, which is very distracting.

    I ended up adding //stop in the plugin code when I don't want the animation happening, so that I can test and debug the theme easily.

    So if the plugin had a settings page, my suggestion would be to have an option for AutoPlay (yes/no) via checkbox, so that users can choose where slideshow plays automatically (or if it's advanced manually via the arrows).

    Alternatively, this autoplay could be made available via shortcode parameters, similar to fade, delay, overlay, etc.

    Thanks

    - Andrei

  7. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Okay... So far I've added an autoplay parameter, made it so the shortcode generator gives you the full shortcode, made the title and arrows fixed positioning.

    Preferably I'd like to steer clear of a settings page. I don't feel as if anything here really warrants one aside from the global option. I'm still trying to work out how to do that exactly but like I said, I'd rather not do a settings page.

  8. Andrei G
    Member
    Posted 1 year ago #

    Nice!

    You're trying to work out how to do a settings page or how to do the global option?

  9. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    The global option without the use of a settings page. I'll work on it more tomorrow. :) If I can get that out of the way, then I'll release version 1.2 and probably be done for a while since my spring break is coming to an end.

  10. Andrei G
    Member
    Posted 1 year ago #

    I was gonna say that I don't see how it could be done without a settings page... but there may be a way.

    The Slide edit screen could have an additional metabox with a checkbox like "Make slider global".

    When saving the post, you could use the built-in WordPress functions like get_option, add_option, update_option, delete_option(), to save the setting to the db.

    Then, you could use an action to output stuff to wp_head maybe.

    See if you can find some inspiration in this plugin: http://www.devdevote.com/cms/wordpress-plugins/add-to-header

  11. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Well, the good news it that you convinced me to try and create my first settings page and that I've added the page successfully... and even made a little bit of head way into figuring out how this all works... but I'm a bit confused now... I was wondering if I could email you and maybe you could take a look at what I've got so far...

  12. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Ahh, nevermind. I found my problem. I wasn't using register_setting correctly and it wasn't saving properly. Hopefully I'll have version 1.2 out shortly!

    Thanks for your suggestions and help! :) Also if you could rate the plugin that would be very appreciated.

  13. Andrei G
    Member
    Posted 1 year ago #

    Sure, I'll be happy to rate the plugin. It's really turning into a very nifty thing. Great job!

    Here are some links that may help in creating the settings page and making the most of the WordPress functions. You may already be aware of these, but just in case:

    http://codex.wordpress.org/Settings_API
    http://ottopress.com/2009/wordpress-settings-api-tutorial/

    For the Settings link, it would ideally appear on the plugins page, next to Deactivate and Edit (http://www.hughlashbrooke.com/wordpress-add-plugin-settings-link-to-plugins-page/), and also grouped with the Vegas Slides menu, so you'd have:

    Vegas Slides
    - Vegas Slides
    - Add Slide
    - Settings

  14. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    The last two things I'm trying to do are add a global option (just haven't gotten around to figuring out how I'm going to do it) and saving check boxes. I can't seem to find too much help on that. Other than that, you can save fade/delay from the settings page which I have already grouped with the plugin as you suggested. I've gone through otto's tutorial and it's pretty good! Thanks for the resources :)

  15. Andrei G
    Member
    Posted 1 year ago #

    For saving checkboxes, you may find some help here: http://codex.wordpress.org/Creating_Options_Pages

    For the global option, if the option is selected (checkbox checked), you could output your regular shortcode (echo do_shortcode) to wp_head possibly.

    See my previous link: http://www.devdevote.com/cms/wordpress-plugins/add-to-header

    Download the plugin and look through the code. It basically does the same thing... outputting stuff to the header via WordPress action hooks.

    add_action('wp_head', array('add_to_header', 'front_add_data'));

    So all you'd need is something similar to this:

    function output_vegas_shortcode_to_head( $slide_id )
    {
    //do_shortcode...
    }
    add_action( 'wp_head', array('vegas_slides', 'output_vegas_shortcode_to_head'));

  16. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Yeah... I'm still having trouble with saving the checkbox.. I'm able to save the fade/delay/title just fine but I'm really confused on how to apply update_option to the checkbox...

    public function check_fade($input){
            if(is_numeric($input['Fade'])){
    	    $Fade = $input['Fade'];
    	    if(get_option('fade') === FALSE){
    		add_option('fade', $Fade);
    	    }else{
    		update_option('fade', $Fade);
    	    }
    	}else{
    	    $Fade = '';
    	}
    	return $Fade;
        }

    That's how I'm saving/updating the fade but applying that to a checkbox doesn't work haha

  17. Andrei G
    Member
    Posted 1 year ago #

    I can't say that I am too experienced with the mechanism, but from what I read so far, my understanding was that saving is built into the WordPress Settings API.. so you don't have to manually save anything.

    Everything on the settings page should get saved together when clicking Save, for example.

  18. Andrei G
    Member
    Posted 1 year ago #

    Look maybe this link I provided previously: http://codex.wordpress.org/Creating_Options_Pages

    Especially, under Seeing it All Together section: http://codex.wordpress.org/Creating_Options_Pages#See_It_All_Together

  19. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    It's the sanitization callback that i'm having troubles with. I've looked through every tutorial I can find and I can't figure out how that's supposed to work for checkboxs.

    It says it's option but if I try intval or leaving it empty then I can't get the checkbox to save...
    http://codex.wordpress.org/Function_Reference/register_setting

  20. Andrei G
    Member
    Posted 1 year ago #

    Hmm... this may be a little over my head.

    From the codex, it looks like the sanitize callback is optional.. do you really need to use it?

    You may just be able to leave it out and leave it at that. Just a thought...

  21. Andrei G
    Member
    Posted 1 year ago #

    If you really want to sanitize the checkbox value, maybe the checked() function could help: http://codex.wordpress.org/Function_Reference/checked

  22. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    If I don't add a sanitization callback then they don't seem to save. I've read over the codex a hundred times... I can save text fields just fine but checkboxs are being difficult. I've looked for examples on google and stackoverflow and I'm coming up empty handed. Here's what I have so far... the checkbox sanitization callback is what's giving me a headache...

    Also I could be going about the whole settings api thing completely wrong, since it's the first time I've encountered it.

  23. Andrei G
    Member
    Posted 1 year ago #

    There doesn't seem to be any code in your message.

  24. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Ahaha, I'm an idiot. Pasted the code on pastebin then forgot the link. Here it is. http://pastebin.com/hA4PSe14

  25. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    I'm specifically talking about this function:

    public function check_arrows($input){
    
      $Arrows = get_option( 'arrows' );
         if ( ! isset( $input['arrows'] ) || $input['arrows'] != '1' ){
        $Arrows['arrows'] = 0;
         update_option('arrows', true);
       }else{
        $Arrows['arrows'] = 1;
         update_option('arrows', true);
       }
      return $Arrows;
       }

    and also:

    public function arrows_field(){
            ?><input type="checkbox" id="arrows" name="arrows_key[Arrows]" value="1" <?php $Arrows = get_option('arrows'); checked( $Arrows['arrows'], 1  ) ; ?>/><?php
        }
  26. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    I've tried something as simple as:

    public function check_arrows($input){
        if ( $input['Arrows'] == 1 ) {
            return 1;
        } else {
            return '';
        }
    }

    to no avail... I'm pretty lost

  27. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    Sorry to keep spamming you...

    I finally got it, and what worked is this:

    public function check_arrows($input){
    
         $Arrows = $input['Arrows'];
        if ( $input['Arrows'] == 1 ) {
            $Arrows = 1;
          update_option('arrows', $Arrows);
        } else {
            $Arrows = 0;
          update_option('arrows', $Arrows);
        }
       return $Arrows;
    }
  28. jamesdbruner
    Member
    Plugin Author

    Posted 1 year ago #

    1.2 is up, take a look when you get a chance if you would and let me know what you think! :)

  29. Andrei G
    Member
    Posted 1 year ago #

    Alright, cool.. I'll take a look shortly.

  30. Andrei G
    Member
    Posted 1 year ago #

    Ok, so I have poked around version 1.2 a bit today. With the exception of a couple of minor issues, it's working pretty well. Great job!

    So here are some points to consider:

    Upon installing the plugin and visiting the Settings page, the value for each field was something like: "<?=get_option('fade');?>", instead of showing an actual value or be blank.

    I know that's supposed to echo the option value, but it wasn't. It was displaying the actual php code instead.

    I looked up the php echo function documentation and it looks like the shortcut syntax is not enabled by default on php versions prior to 5.4.0. See more here: http://php.net/manual/en/function.echo.php

    echo also has a shortcut syntax, where you can immediately follow the opening tag with an equals sign. Prior to PHP 5.4.0, this short syntax only works with the short_open_tag configuration setting enabled.

    I edited the code and adjusted it to a regular <?php echo instead. You may want to do the same so the plugin is more compatible with various php installations. Most servers still use older versions of PHP like 5.2.x or 5.3.x.

    The other strange issue was the first attempt at saving the settings. I added 1000 for Fade and checked Autoplay and saved. When the page saved and reloaded the value for Fade was 1 and Autoplay was not checked.

    I then entered 1000 again and checked Autoplay and saved, and then it worked. So that's something to look into and fix.

    I was able to replicate this on a secondary installation, so it's consistent. The Settings values do not save correctly on first attempt (maybe because there are no values in the db for each of the fields to start with).

    Regarding the code, it looks like there may be a lot of repetitive function that may be streamlined and cleaned out a bit, but that's only from an aesthetic and optimization perspective.

    Finally, it may be a good idea to fill out the Changelog tab on the plugin page on WordPress.org. It lets people who consider to upgrade know what's new and also shows that the plugin is actively developed.

    That's all.. looking really nice now, love the settings page and the global option. Awesome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic