Insert image shortcode ?

4 posts from 2 voices

• Started 1 year ago by menkom
• Latest reply from Dude
• This topic is not a support question

Tags:

• image shortcode

1. 

   menkom
   Member

   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.

   Posted 1 year ago #
2. 

   Dude
   Dude

   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']

   Posted 1 year ago #
3. 

   menkom
   Member

   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.

   Posted 1 year ago #
4. 

   Dude
   Dude

   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/

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.