How to insert image and text from admin panel throughout my theme

Question

Insted of using some custom code that will not work on wp update (as you have experienced) why don’t use the core meta uploader?

Go in the “Media -> Add New” on your backend. Simply add a new file.

After you uploaded it, click on Edit and set the attachment title with the line of text that you want to output with the image. Udate the attachment… and you are done.

In your functions.php add something like this

function print_an_image( $id = '', $args = array() ) {
  if ( ! intval($id) ) return;
  $a = get_post($id);
  if ( $a->post_type != 'attachment' ) return;
  $default = array(
     'size' => 'medium',
     'class' => '',
     'link' => false, // if numeric will link that post id, if boolean true will link the same image but in the size specified in 'link_size' att. If false (default) will not insert a link
     'link_size' => 'full',
     'link_rel' => '',
     'title_format' => '<p class="image-title">%s</p>',
     'before' => '<div>',
     'after' => '</div>'
  );
  $args = wp_parse_args($args, $default);
  extract($args);
  $image = wp_get_attachment_image_src( $id, $size );
  if ( ! filter_var($image[0], FILTER_VALIDATE_URL) ) return;
  $title = apply_filters('the_title', $a->post_title );
  $url="";
  if ( is_numeric($link) && $link > 0 ) {
    $url = get_permalink($link);
  } elseif ( $link === true || $link === 'true' ) {
    $url = (array) wp_get_attachment_image_src( $id, $link_size );
    $url = filter_var($url[0], FILTER_VALIDATE_URL) ? $url[0] :  '';
  }
  $out="";
  if ( is_string($before) && ! empty($before) ) $out .= $before;
  if ( ! empty($url) ) {
    $out .= sprintf('<a href="https://wordpress.stackexchange.com/questions/117196/%s"', esc_url($url) );
    if ( ! empty($link_rel) ) $out .= sprintf(' rel="https://wordpress.stackexchange.com/questions/117196/%s"', esc_attr($link_rel) );
    $out .= sprintf(' title="https://wordpress.stackexchange.com/questions/117196/%s"', esc_attr($title) ) . '>';
  }
  $format="<img src="https://wordpress.stackexchange.com/questions/117196/%s" width="%d" height="%d" alt="https://wordpress.stackexchange.com/questions/117196/%s"";
  if ( ! empty($class) ) $format .= ' class="https://wordpress.stackexchange.com/questions/117196/%s"';
  $out .= sprintf($format, esc_url($image[0]), $image[1], $image[2], esc_attr($title), esc_attr($class)) . '/>';
  if ( ! empty($url) ) $out .= '</a>';
  $out .= sprintf($title_format, esc_html($title) );
  if ( is_string($after) && ! empty($after) ) $out .= $after;
  return $out;
}


function print_an_image_sh( $atts ) {
    if ( ! isset($atts['id']) || empty($atts['id']) ) return;
    $id = $atts['id'];
    unset($atts['id']);
    return print_an_image( $id, $atts );
}

add_shortcode( 'myimg', 'print_an_image_sh' );

The simplest usage is

[myimg id="10"]

Where 10 is the id of the image. It will print the image in medium size with the title wrapped in a p and both wrapped in a div.

Using shortcode atts you can configure everithing: the size of the image, the class, if the image should link same image in ither size or link a particular post, the ‘rel’ attribute of the link (useful for lightbox scripts), how the title should be outputted and what put before and after the image.

Example of advanced use:

[myimg id="10" size="thumb" class="my_image_thumb" link="true" link_size="full" link_rel="lightbox" title_format="<h3>%s</h3>" before="<div class="my_image_wrap">"]

Of course the print_an_image function can also be used as template tag, with first argument the image id and the second argument is the array of args:

echo print_an_image(10, array('size'=>'large') );

Related Posts: