Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4986

    Hi im not overly happy with the functionality of the columns on the homepage and i need to recreate them from scratch. Is there a shortcode to insert an image with the border option ? I can insert an image but it has no border and does not look like part of the site.

    Please let me know. thanks.

    #48399

    Hey,

    currently there’s no image shortcode however you can easily implement your own. Open up functions.php and add:

    function avia_sc_img($atts, $content = "", $shortcodename = ""){
    return '<img src="'.$atts['src'].'" alt="" style="border: 1px solid #eee" />';
    }

    add_shortcode('img','avia_sc_img');

    If you don’t want to use inline styles wrap the image in a span like:

    function avia_sc_img($atts, $content = "", $shortcodename = ""){
    return '<span class="imgborder"><img src="'.$atts['src'].'" alt="" /></span>';
    }

    add_shortcode('img','avia_sc_img');

    and add:

    .imgborder img{
    border: 1px solid #E1E1E1;
    }

    to css/custom.css. Obviously you can adjust the border style :)

    Shortcode usage:

    [img src='path/to/image.jpg']

    #48400

    Hi so basically i did what you said and it did not work.

    You forgot to add img after .imgborder this was preventing it from working.

    Also i mentioned i needed to replicate how it presents the columns pictures those pictures have padding around the border as well as a background shadow to each picture…. this is what i have added to custom.css so far to almost replicate.

    /* image border details for insert image shortcode */

    .imgborder img{

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    border: 1px solid #E1E1E1;

    padding: 5px;

    }

    Can you please add the featured_shadow code to it so it shows the shadow background on each image.

    I think we are done after that.

    Thanks.

    #48401

    I corrected the code above – thanks.

    1) You can try to add a “shadow” div to the image code – use following css code in css/custom.css:

    .imgborder{
    background: url("../images/shadow_right.png") no-repeat scroll right bottom transparent;
    padding-bottom: 17px;
    }

    .imgborder .left_shadow {
    background: url("../images/shadow_left.png") no-repeat scroll right bottom transparent;
    }

    and change the shortcode to:

    function avia_sc_img($atts, $content = "", $shortcodename = ""){
    return '<div class="imgborder"><div class="left_shadow"><img src="'.$atts['src'].'" alt="" /></div></div>';
    }

    add_shortcode('img','avia_sc_img');

    I haven’t tested it but the result should look like: http://www.kriesi.at/themes/upscale/blog/

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Insert image shortcode ?’ is closed to new replies.