Trying to develop a simple shortcode

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]https://i255.photobucket.com/albums/hh140/testament1234/thumb_zps5820cef3.png[/gallery]

If it doesn’t work.. lemme know.

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

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.

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.

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

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');