What php to use to be able to pick an image from the WordPress library

1 Views

This is the original php code: 

     function lovethemes_pricing_shortcode($atts)
     {extract(shortcode_atts(array(
       "heading"     => '',
       "price"       => '',
       "link"        => '',
       "name"        => '',
     ), $atts ) );
     return '<div class="pricing animated bounceIn">
       <section class="head">'.heading.'
       <section class="content">
         <ul><li class="price">'.$price.'</li>
             <li><a href="'.$link.'" class="button">'.$name.'</a></li>
         </ul></section> </div>';}
     add_shortcode('pricing', 'lovethemes_pricing_shortcode');

This is what is written on my page in the backend:

Read More
     [pricing heading="7 februari 2015"
              price="Strak bekleden van een taart" 
              link="/agenda/workshops/strak-bekleden-van-een-fondant-taart"
              name="Info"]

Resulting in this:

http://www.alexandra-van-zandbergen.be/wp-content/uploads/2015/08/Schermafbeelding-2015-08-08-om-13.23.38.png

And what I would like to have is this:

http://www.alexandra-van-zandbergen.be/wp-content/uploads/2015/08/Schermafbeelding-2015-08-08-om-13.22.47.png

I can read and write html and css but no php… Can anyone help me with this please? I’ve tried to add several codes and nothing is working.

I have to be able to change the image in the backend, I would like to be able to just choose an image from the WordPress image gallery.

Thanks in advance!
Alexandra

Post Views: 1

Related posts

1 comment

  1. I’m not very familiar with it either, and would need to try it to see if it works, so pls don’t shoot me if it does not. However, this function makes use of the shortcode API.

    The code tells to create a [pricing] shortcode, currently with 4 attributes. So, if all the rest works, then you most likely can simply add another one.

    What I do not understand – and I’m not taking the time to look it up – is why all variables in your code start with $, but not the heading. I’ll ignore that since it doesn’t seem to be the problem.

    Note:
    It’s best to add:

    1. the image size to the HTML for performance. I’m assuming that you’ll
      use images of the same size. If you would want to set the image
      size, you can create attributes for it too.
    2. an alt text for SEO. Below I use the price attribute.

    While I’m at it I would suggest to add a link to the image and title too. People sometimes click on it instead of on the info button. This would make it more user friendly.

    So, it then would look like this:

    function lovethemes_pricing_shortcode($atts) {
    extract(shortcode_atts(array(
        "heading"   => '',
        "price"     => '',
        "link"      => '',
        "name"      => '',
        "img"       => '',
    ), $atts ) );
    return '<div class="pricing animated bounceIn">
        <section class="head">'.heading.'
        <section class="content">
            <ul><li class="price"><a href="'.$link.'">'.$price.'</a></li>
                <li><a href="'.$link.'"><img src="'.$img.'" alt="'.$price.'" width="247" height="186" /></a></li>
                <li><a href="'.$link.'" class="button">'.$name.'</a></li>
            </ul></section></div>';
}
add_shortcode('pricing', 'lovethemes_pricing_shortcode');

    and your shortcode would be:

    [pricing heading="7 februari 2015"
    price="Strak bekleden van een taart" 
    link="/agenda/workshops/strak-bekleden-van-een-fondant-taart"
    img="/your/image/url.jpg"
    name="Info"]

    To make it a little more user friendly, you could also rename the attributes to something that corresponds to the content, f.ex. heading > date

    I hope this helps!

Comments are closed.