Adding custom button code to a simple lightbox link
-
My question,
I am trying to add a custom button to a simple lightbox link
If you look at the link below and switch to LIST VIEW(look at the second listing called “Drag and Drop”) you can see the button is rendering but the words that are supposed to be on the button are next to it and not on the button.
http://www.johnpendleton.com/jpportfolio/portfolio/#prettyPhoto
Code that I am using for the button:
a href=”http://www.johnpendleton.com/jpportfolio/wp-content/uploads/2013/10/parallax-background-quasar.jpg” rel=”prettyPhoto” title=”This is the description”><img src=”[rockthemes_button icon_align=”left” icon_title=”View Larger Image” button_size=”” button_color=”primary” button_flat=”no” button_shape=”button-rounded” button_wrap=”no” link_url=”” icon_class=”icon-check” icon_url=””]View Larger Image[/rockthemes_button]” />
Any help on what I need to change to get this to work would be great!
Thanks,
JP
-
You have nested quote hierarchy, so you need to use different quote characters at each level or escape the inner ones. In your case, it’s probably easiest to use single quotes for the img src and leave the doubles used in the shortcode:
<img src='[rockthemes_button icon_align="left" (..snip..) icon_url=""]View Larger Image[/rockthemes_button]' />Confirm that the shortcode is only outputting an img src URL and not the entire img HTML tag. It’s a bit unusual in my mind to do things this way. Maybe it makes sense to rockthemes.
BTW, no one can view your link due to your site’s security.
The username and password to my site are both: johnpendleton
The single quotes did not work for me. I now have a question mark instead of an image. Any more suggestions?
Thanks for the access, it’s easier to understand what’s happening when you can see the result 🙂
The shortcode automatically outputs the a(nchor) an img(age) tags, there’s no need to provide those separately, all you need is the shortcode with all the attributes correctly filled out. Specifically, you need a value for ‘link_url’. There’s also a missing value for ‘icon_url’ and others, though those may very well be optional. I’m pretty sure you need the link_url though, perhaps like this:
[rockthemes_button icon_align="left" icon_title="View Larger Image" button_size="" button_color="primary" button_flat="no" button_shape="button-rounded" button_wrap="no" link_url="http://www.johnpendleton.com/jpportfolio/wp-content/uploads/2013/10/parallax-background-quasar.jpg" icon_class="icon-check" icon_url=""]View Larger Image[/rockthemes_button]That is the code that I started out with.So below is the reason for my attempted hack.
My issue is that I want to launch the Prettyphoto lightbox so that I can show the larger images. The button short-code that is provided by the template does not allow me to make that call rel=”prettyPhoto”
I asked them to help me out and they told me since it was not a “feature” of the template that they could not spend time on it. Not really what I wanted to hear. I need to update the shortcode.php file so that I can activate the PrettyPhoto light box. I am sure I could do this with some help. Any chance you could steer me in the right direction?
Are you dizzy from going in circles? ;>
Not a feature, eh? I can’t imagine it would take any time at all for someone familiar with the code. <sigh>You have several options, we should find something that will work. Changing shortcode.php would be the easiest probably, but your changes will be lost when the theme updates unless they kindly provided a filter for you to hook into. What are the chances? :/
Find a line similar to
add_shortcode('rockthemes_button', 'some_other_function_name');
It may not be in shortcodes.php, but the equivalent offunction some_other_function_name( $atts, $content ) {probably would be.add_shortcode()calls are often on the theme’s main functions.php, but can possibly be anywhere. The point is to find the shortcode handler callback, so if you can identify the function without finding theadd_shortcode()call, that’ll work too.The function assembles all the button HTML that you see on your page into a single variable that is returned at the end of the function. You need to figure out where the
<a>tag attributes are being assigned and add your rel attribute to the mix in the right spot. If you, by some miracle, happen to see aapply_filters()ordo_action()call in the shortcode handler, report back, there could be a better way. Not holding my breath.If you have any javascript experience, you may be better off using jQuery to insert the rel attribute when the page loads. It needs to be applied in the right order so that prettyPhoto can “see” the change. Combine that with jQuery in WP not being like any other website, even though it’s a good solution, there are likely significant…um, “logistical issues”.
Yet another approach is to use a WP filter to find all the button HTML and insert the rel attribute that way. Depending on the specifics, this can be a fairly easy hack. Still, it’s a rather fragile, dirty hack, so should be left as a last resort option.
Okay you just went over my head 🙂 I found the exact code that you suggested. But could not figure it out. the code is below. The Href code is down towards the bottom. Any chance you can help me out to edit code? I would then need to know what the variable and value would be for the button shortcode as well . Any help would be hugely appreciated. I have been at this for days now. I can save the php page in case I need to update the theme.
/* ** Button Shortcode */ if(!function_exists('rockthemes_shortcode_make_button')){ function rockthemes_shortcode_make_button($atts, $content=null){ extract( shortcode_atts( array( "icon_align"=>"left", "icon_size"=>"", "icon_title"=>"", "button_align"=>"", "button_size"=>"", "button_color"=>"", "button_flat"=>"no", "button_shape"=>"", "button_wrap"=>"", "button_link_target"=>"", "link_url"=>"", "link_id"=>"", "link_is_tax"=>"", "tax_name"=>"", "icon_class"=>"", "icon_url"=>"" ), $atts ) ); wp_enqueue_style('quasar-buttons', F_WAY.'/css/buttons.css', '','', 'all'); //wp_enqueue_script('quasar-buttons', F_WAY.'/js/buttons.js', array('jquery')); $link_active = false; $link_html = ''; $link_icon_html = ''; if($link_url !== 'false'){ $link_html = $link_url; $link_active = true; }elseif($link_id !== 'false'){ if($link_is_tax !== 'false'){ $tax = get_category_by_slug($link_id); if(!$tax){ $tax = get_term_link($link_id,$tax_name); }else{ $tax = get_category_link($tax); } $link_html = $tax; }else{ $link_html = get_permalink($link_id); } $link_active = true; } $button_is_else_flat = 'button'; if($button_flat == 'yes') $button_is_else_flat = 'button-flat'; if($button_color !== '') $button_is_else_flat .= '-'.$button_color; $icon_html = ''; $icon_used = false; if($icon_class != ''){ $icon_html = ' <i class="'.$icon_class.' '.$icon_size.'"></i> '; $icon_used = true; }elseif($icon_url != ''){ $icon_html = ' <img src="'.$icon_url.'" /> '; $icon_used = true; } $return = ''; $button_align_html = ''; if($button_align !== 'block'){ $button_align_html = ' float:'.$button_align.';'; }elseif($button_align === 'block'){ $button_align_html = ' display:'.$button_align.';'; } if($button_wrap == 'yes'){ if($button_align === 'block'){ $return .= '<span class="button-wrap" style="display:block;">'; }else{ $return .= '<span class="button-wrap">'; } } $button_large_style = ''; if($button_size === 'button-large'){ $button_large_style = ' padding:15px;'; } $return .= ' <a href="'.$link_html.'" '.($button_link_target == "_blank" ? 'target="_blank"' : '').' style="'.$button_align_html.$button_large_style.'" class="escapea button '.($button_shape != "" ? $button_shape." " : ""). ' '.$button_is_else_flat. ' '.$button_size. ' "> '.($icon_align == "left" ? $icon_html : '').' '.$content.' '.($icon_align == "right" ? $icon_html : '').' '; if($button_wrap == 'yes') $return .= '</span>'; //Close button wrap span return $return; } }ugh I just fed up my whole site I am now getting this error:
Fatal error: Call to undefined function add_shortcode() in /homepages/46/d89996492/htdocs/jpportfolio/wp-includes/shortcodes.php on line 454
I even replace the old php page from the original template download. Any suggestions? F!
back up again, did a restore
Scary how easy it is to crash a site, no? Thank goodness for backups!
This should take care of things. This is the entire end of the function definition up to the one line that was changed, nothing else has been modified.
" rel="prettyPhoto"> '.($icon_align == "left" ? $icon_html : '').' '.$content.' '.($icon_align == "right" ? $icon_html : '').' '; if($button_wrap == 'yes') $return .= '</span>'; //Close button wrap span return $return; } }Sorry to ramble on about actions and filters, but it’s kind of important because they enable you to set it and forget it. As predicted, there were none anyway. However, this function is pluggable, meaning you can still set it and forget it. It does involve some minimal coding and FTP work, but it’s very straight forward and gives you a safe place to store any other customizations you may decide to try in the future.
Once you’ve confirmed the alteration works as intended, create a Child Theme. Copy the entire function definition as you posted here along with the added rel attribute to your child theme’s functions.php file.
Activate your child theme and forget about it. You can freely update the parent theme without concern about losing your customizations.
Um that was it? that was so easy. Why the people who created my theme could not have helped me is beyond me. This is my 4th or 5th theme that I have used and these guys give the worst support so far. I would like to thank you for your help and patience. Thank you very very much!
Just realized that all buttons are looking to launch Prettyphoto now. So none of the other buttons are working. How can we make it so that it has to be defined in the shortcode of the individual buttons for it to activate prettyphoto?
So I made some new short code for “prettyphoto” buttons and it works. My only issue I have now is that I need to be able to include a variable in the rel=”prettyPhoto” call. I need to be able to get it so that it looks like this rel=”prettyPhoto[galleryName]” so that when the window pops up it knows which images to call from to show multiple images in the lightbox popup.
You can look at my old code below. You can see that I was using rel=”prettyPhoto[airplane] to create gallery in the popup.
<a href="http://www.johnpendleton.com/jpportfolio/wp-content/uploads/2013/10/parallax-background-quasar.jpg" rel="prettyPhoto[airplane]" title="This is the description"><img src=" [rockthemes_button icon_align="left" icon_title="Optional Button" button_size="" button_color="primary" button_flat="no" button_shape="button-rounded" button_wrap="no" link_url="" icon_class="icon-check" icon_url=""]View Larger Image[/rockthemes_button]" /></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna02.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna03.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna04.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna05.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna06.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna07.jpg"></a>Heh, it appeared to be easy, yet it turned out to not be quite so easy. Classic code hacking. A pile of research and examination. One simple little change. Then something else unanticipated happens. Happens every single time I tell you!
When you enter the button shortcode, you need to specify an extra attribute of your choosing (but always the same name every time). Just like
button_shape="button-rounded"or any of the others. Whatever attribute name you use ends up being a variable of the same name in theextract()process seen at the beginning of the handler function. So if you entered this as part of the shortcode:gallery_name="airplane"this ends up being the equivalent to there being a line at the start of the function that reads:$gallery_name = 'airplane'so that where you inserted the actual rel link attribute it would now look like this:" rel="prettyPhoto[ $gallery_name ]">.As long as one never forgets to provide a gallery name, you don’t really need to address the defaults defined at the beginning, but it’s good insurance to avoid undefined index errors. Add something like
"gallery_name" => "blank",to the defaults array. Make sure the commas end each line to separate values. In arrays, it’s actually OK to have a dangling comma at the end like so:array( 1, 2, 3, )this tends to make maintenance a little easier. Don’t do this with function calls though, only works for arrays.Hopefully this last tweak works for you, but don’t be surprised if there’s yet again something else :/
So it still does not seem to be picking up the variable/value from the short code. I updated the Shortcodes.php by adding this: “rel=”prettyPhoto[ $gallery_name ]”> and I added this to the list of arrays: “gallery_name” => “”
I then updated my site code by adding two buttons to the page to see if I could get prettyPhoto to recognize the two different galleries. But what I am getting is one gallery that is showing the two main images in the different link_url=”” from the shortcode from each button as the gallery in each circumstance. so I am guessing that prettyPhoto is using the [ $gallery_name ] as the gallery identifier, not recognizing it as a variable that it needs to pick up from the shortcode. If you go back to the page link that I gave you before and look at the list view and the first two entries you will see what I mean. My code is below. (I just tested it and I am correct) The second button uses ” $gallery_name ” and it creates a larger gallery. and it does not give a gallery_name=”” in the shortcode.
[rockthemes_button_prettyPhoto icon_align="left" icon_title="View Larger Image" button_size="" button_color="primary" button_flat="no" button_shape="button-rounded" button_wrap="no" link_url="http://www.johnpendleton.com/jpportfolio/wp-content/uploads/2013/10/drag-and-drop-rock-page-builder.jpg" gallery_name="airplane" icon_class="icon-check" icon_url=""]View Larger Image[/rockthemes_button_prettyPhoto] <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna05.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna06.jpg"></a> <a rel="prettyPhoto[airplane]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna07.jpg"></a> [rockthemes_button_prettyPhoto icon_align="left" icon_title="View Larger Image" button_size="" button_color="primary" button_flat="no" button_shape="button-rounded" button_wrap="no" link_url="http://www.johnpendleton.com/jpportfolio/wp-content/uploads/2013/10/drag-and-drop-email-contact-form-builder1.jpg" icon_class="icon-check" icon_url=""]View Larger Image[/rockthemes_button_prettyPhoto] <a rel="prettyPhoto[ $gallery_name ]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna02.jpg"></a> <a rel="prettyPhoto[ $gallery_name ]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna03.jpg"></a> <a rel="prettyPhoto[ $gallery_name ]" href="http://www.johnpendleton.com/portfolio/wp-content/uploads/2013/04/cessna04.jpg"></a>`
Did I make sense 🙂
The topic ‘Adding custom button code to a simple lightbox link’ is closed to new replies.