WordPress.org

Ready to get started?Download WordPress

Forums

Trying to develop a simple shortcode (7 posts)

  1. clestcruz
    Member
    Posted 1 year ago #

    Basically i'm trying to do a simple shortcode wherein the user can display a fixed size of an image regardless of the size. For Example [gallery] image [/gallery] it will be display like this

    http://i255.photobucket.com/albums/hh140/testament1234/thumb_zps5820cef3.png

    I tried coming up with my own code but looks like my codes are wrong. I'm not familiar with PHP or wordpress coding yet. I know things like this can be done using plugins but i would rather learn how to code

    function image_gallery($atts, $content=null) {
    extract(shortcode_atts(array(
    'width' => 400,
    'height' => 200,
    ), $atts));
    return '<div class="gallery"></div>';
    }
    add_shortcode('gall', 'image_gallery' )

    the styles was provided via style.css

  2. Something like this should work:

    function gallery($atts, $content = null) {
        extract(shortcode_atts(array(), $atts));
        return '<img src="'.$content.'" width="400px" height="200px" style="width:400px;height:200px;" />';
    }
    add_shortcode("gallery", "gallery");

    I haven't tested it... but basically here's how it works:

    1. Since your width and height will be 'static' (fixed).. you don't need to define them as args. Instead, they will be statically defined in your shortcode output.

    2. The $content variable will be the link source. So, whenever you use the shortcode... you will want to use it like this:

    [gallery]http://i255.photobucket.com/albums/hh140/testament1234/thumb_zps5820cef3.png[/gallery]

    If it doesn't work.. lemme know.

  3. clestcruz
    Member
    Posted 1 year ago #

    Hi solution work and i'm trying to add some more code to it in order for me to get the desired result.

    Basically i want it to be the exactly the same as the one posted above. I tried adding this coding in the shorthand and it seems it doesn't seem to work.

    function gallery($atts, $content = null) {
        extract(shortcode_atts(array(), $atts));
        $return_string = '<div class="Outer_box">';
    
    	  $return_string = '<div class="inner_box">';
    
        return '<img src="'.$content.'" width="400px" height="200px" style="width:400px;height:200px;" />';
    
    	  $return_string = '</div>';
    
    	$return_string = '<div>';
    
    }
    add_shortcode("gallery", "gallery");
    style.css
    
    .outer_box {background-color:black}
    .inner_box{margin:10px}

    Basically the outer_box will provide the background color of grey, then the inner box which contains the image will have a margin of 10px. I guess that including a class inside a $return_string won't work

  4. clestcruz
    Member
    Posted 1 year ago #

    by the way why is the width and height repeated?

    return '<img src="'.$content.'" width="400px" height="200px" style="width:400px;height:200px;" />'; I removed the 1st width and height and still seemed to work.

  5. The height and width are repeated because some browsers read them as individual attributes, and some browsers only read them as style attributes. Using this method, you cover all possible browsers.

    To fix you code, try this:

    function gallery($atts, $content = null) {
        extract(shortcode_atts(array(), $atts));
        return '<div class="Outer_box"><div class="inner_box"><img src="'.$content.'" width="400px" height="200px" style="width:400px;height:200px;" /></div></div>';
    }
    add_shortcode("gallery", "gallery");

    Combine all your html output into a single 'return' declaration.

  6. clestcruz
    Member
    Posted 1 year ago #

    it worked i just had to float it to the left. Now i'll just have to create a shortcode for clearfix or clear:both

  7. clestcruz
    Member
    Posted 1 year ago #

    I seem to be having a another problem. Basically my site runs on skeleton framework which is responsive. So tried playing with the codes a little bit

    //Gallery Shortcode 2
    function short_gallery($atts, $content = null) {
        extract(shortcode_atts(array(), $atts));
        return '<div class="eight columns gallery_box"><div class="inner_gallery"><img src="'.$content.'"/></div></div>';
    }
    add_shortcode("gallery", "short_gallery");

    I removed the fixed size that is set since the image will not be viewed properly from a mobile device or smartphone and added eight columns in the class.

    But it looks the image will not resize and i will upload the default size of the image.

    In the end i had to resort the previous code which is this

    //Gallery Shortcode 2
    function short_gallery($atts, $content = null) {
        extract(shortcode_atts(array(), $atts));
        return '<div class=" gallery_box"><div class="inner_gallery"><img src="'.$content.'" width="400px" height="200px" style="width:400px;height:200px;" /></div></div>';
    }
    add_shortcode("gallery", "short_gallery");
    /*GALLERY SHORTCODE*/
    .gallery_box{background-color:black; float:left; margin:0px 20px 10px 0px }
    .inner_gallery{margin:5px}

    By the way i didn't know the my styles will still work in function.php. I thought that i need to add this type of code in order to apply my styles

    function webtreats_column_stylesheet() {
    02
        $my_style_url = WP_PLUGIN_URL . '/webtreats-column-shortcodes/styles.css';
    03
        $my_style_file = WP_PLUGIN_DIR . '/webtreats-column-shortcodes/styles.css';
    04
    
    05
        if ( file_exists($my_style_file) ) {
    06
            wp_register_style('column-styles', $my_style_url);
    07
            wp_enqueue_style('column-styles');
    08
        }
    09
    }
    10
    add_action('wp_print_styles', 'webtreats_column_stylesheet');

Topic Closed

This topic has been closed to new replies.

About this Topic