There's a million tutorials for how to customize the TinyMCE panel on the WSYWIG editor... but that's not what I want to do.
I want to add a stand-alone button to the post edit view that will make an API call and auto-fill certain fields on the page. I closest I've come so far are the hooks simple_edit_form and advanced_edit_form which both allow me to add content to the very bottom of the edit form. It'd be much better to add it at the top, where the "add media" button lives.
Is this possible?
There is an action called media buttons. Below is basic example. I've take this example from the plugin gravity forms and changed it little. Good luck.
add_action( 'media_buttons', 'add_form_button' );
function add_form_button(){
$is_post_edit_page = in_array(RG_CURRENT_PAGE, array('post.php', 'page.php', 'page-new.php', 'post-new.php'));
if(!$is_post_edit_page)
return;
// do a version check for the new 3.5 UI
$version = get_bloginfo('version');
if ($version < 3.5) {
// show button for v 3.4 and below
$image_btn = GFCommon::get_base_url() . "/images/form-button.png";
echo '<img src="'.$image_btn.'" alt="' . __("Add Gravity Form", 'gravityform') . '" />';
} else {
// display button matching new UI
echo '<style>.gform_media_icon{
background:url(' . GFCommon::get_base_url() . '/images/gravity-admin-icon.png) no-repeat top left;
display: inline-block;
height: 16px;
margin: 0 2px 0 0;
vertical-align: text-top;
width: 16px;
}
.wp-core-ui a.gform_media_link{
padding-left: 0.4em;
}
</style>
<span class="gform_media_icon "></span> ' . __("Add Form", "gravityforms") . '';
}
}
Related
I am using php, sql, html/css, and javascript. Basically I want to only show one div at a time, which I have completed, except once the first div is hidden the next one shows up right below it. Instead I would like it show up all in the same place as you cycle through it. Any idea how I could fix this?
PHP/HTML: (obviously simplified but I don't think more is necessary)
foreach($headers as $header)
{
$content .= "<div class='main_' id='card'>";
$content .= "</div>";
$content .= "<button class='next'>Next Order</button>";
echo $content;
}
CSS:
.main_{
visibility: hidden;
}
.main_.active{
display:block;
}
var normalDivs = [];
var focusDiv;
function loopThru(){
focusDiv +=1;
if (focusDiv > normalDivs.length-1){
focusDiv = 0;
}
$('.main_').each(function(){
$(this).css('visibility','hidden');
});
normalDivs[focusDiv].css('visibility','visible');
}
$(document).ready(function(){
$('.main_').each(function(){
normalDivs.push($(this));
});
focusDiv = 0;
normalDivs[focusDiv].css('visibility','visible')
$('.next').click(loopThru);
});
you have two options:
as mykaf commented - you can use display: none; instead of visibility: hidden;.
that will completely remove the div, but you can recreate it when setting the display back to block.
along with visibility: hidden; add position: absolute;
that should let the visible div be in the same location as the first one.
Is there a gallery that have three features:
displays pictures in a lightbox
allows to import tens or hundreds of images at once from a folder
takes descriptions from file names
I have to make it on yesterday :)
I've made my own script together with original Lightbox
http://lokeshdhakar.com/projects/lightbox2/
Decided it will be much faster that way:
<?php
echo str_replace(array('<','>'), array('<','>'),'<table id="galx"><tr>');
$source_dir = 'images/taken/from/here';
$mini_dir = 'mini';
$target_dir = 'imagies/copied/to/there';
$i=0;
$images = array_diff(scandir($source_dir), array('..', '.',$mini_dir));
foreach($images as $image)
{
$filename = pathinfo($image, PATHINFO_FILENAME);
$title = mb_strtoupper(trim(str_replace('_',' ',$filename)));
$s = "<td><a href='$target_dir/$image' data-lightbox='galx' data-title='$title' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' /><br/>"
. "$title<a/></td>"; //gallery with titles
/*$s = "<td><a href='$target_dir/$image' data-lightbox='galx' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' />"
. "<a/></td>";*/ //gallery without titles
if (++$i % 5 == 0)
$s .= '</tr><tr>';
$s = str_replace(array('<','>'), array('<','>'), $s); //comment this line if want to paste it as php code
echo $s;
}
echo str_replace(array('<','>'), array('<','>'),'</tr></table>');
?>
Some basic css:
#galx {
width: 650px;
}
#galx td {
text-align: center;
}
#galx a {
display: block;
width: 120px;
font-size: 0.8em;
margin:1px auto;
text-decoration: none;
color: black;
text-align: center;
}
I've used FastStone Image Viewer to batch resize images at once and create miniatures. In app just press F3 to open advanced processing tool.
It just won't work with non-english letters on Windows - PHP bug. It still spoils first non-english letter of file name on Linux, so need to prefix '_' in such cases.
Overall good result - i've hided script somewhere on website and in 1,5 hours generated 6 galleries with ~1,5k pictures, and most of the time was consumed by file processing and copying. Not elegant but effective.
One of my div dynamically outputs this:
style="position: relative; left: 77px; top: -14px;"
while i use dragging.
How can i save this in a php variable and store it in the database.
Here is one way of doing it. But please note that this uses jQuery, jQuery UI and a PHP page to handle and save the data. In other words, this is an inefficient mess. Someone should be coming up with a better way shortly.
This answer uses code from this answer, thanks to Simen Echholt: https://stackoverflow.com/a/4139860/3186769
To see if the div was dragged, we first check if there is a mousedown event on the div. If there is, then we check if there is a mousemove event on it before there is a mouseup. If there is, then the div has been dragged.
We post the left and top position of the div if it has been dragged. Here is the javascript to implement this:
// For the sake of simplicity, let us assume the div had an id "d".
$(function() {
var isDragging = false;
$("#d")
.mousedown(function() {
$(window).mousemove(function() {
isDragging = true;
$(window).unbind("mousemove");
});
})
.mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("mousemove");
if (wasDragging) {
var left = $("#d").position().left;
var top = $("#d").position().top;
$.post("backend.php", {left: left, top: top});
}
});
$("#d").draggable(); // allow the div to be dragged.
});
Here is an example of what backend.php could look like. This is the PHP page that our javascript is posting to.
<?php
if (isset($_POST['left']) && isset($_POST['top']))
{
$db = new mysqli("localhost", "test", "test", "test") or die("This error message will not be visible on your HTML page unless you add a function in the jQuery post method to handle the returned output");
$res = $db->query("INSERT INTO rememberPosition (left, top) values (" . $db->escape_string($_POST['left']) . ", " . $db->escape_string($_POST['top']) . ")");
$db->close();
}
?>
The HTML for the div is pretty simple, and it should look something like this:
<div id="d" style="<?php require('memory.php'); echo $styleString; ?>">Here is a div with super-powers... It can actually fly around :)</div>
where we load the saved position values in memory.php. Here is an example of what memory.php could look like:
<?php
$styleString = "position: relative; left: 0px; top: 0px;";
$db = new mysqli("localhost", "test", "test", "test") or die("Error connecting to database.");
if ($res = $db->query("SELECT left, top FROM rememberPosition"))
{
if ($row = $res->fetch_assoc())
{
$styleString = "position: relative; left: " . $row['left'] . "px; top: " . $row['top'] . "px;";
}
}
$db->close()
?>
Hope that helps :) You should wait for a better method, before using this one.
EDIT:
You should add jQuery and jQuery UI for this example to work.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Any of the below will work
$var = "style=\"position: relative; left: 77px; top: -14px;\"";
$var = 'style="position: relative; left: 77px; top: -14px;"';
$var = addslashes('style="position: relative; left: 77px; top: -14px;"');
That last one is really pointless, but I figured I'd put it there for reference. I'd suggest the middle option as the best way.
The database insertion will take care of any necessary escaping, assuming you use prepared. statement.
Here is my problem.
I have a function, PHP class side, that reads all data from one table, create all divs with specific CSS ids, puts the data in place, and in one of them the data comes from an external source, an external php file.
So I do this in the code:
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= include($row['PathFile']);
$Return .= "</div><div id='PostData'>";
All divs are opening and closing properly, all data worked correctly until i changed the data that used to be loaded fom the table to the div here the included file is know.
The external file only have HTML code generated by HTML copy from Visual studio and its all good to, ive used to use that html code in other places, no problem till know.
So, the CSS are the ones that follow:
This is the CSS used to hold the included file:
#PostText {
text-align:center;
padding: 15px;
word-wrap: break-word;
}
This is the parent of the above one:
#PostBody {
border: #00C 1px solid;
width:80%;
background:#FFFFFF;
float:left;
}
and this ones are the CSS from the included file:
One div includes the one, just like the name says.
#FirstOne {
border: #000080 1px solid;
color: #000;
font-family: 'Courier New', Courier, Monospace;
font-size: 9pt;
}
#SecondOne {
background: #000080;
color: #fff;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: bold;
padding: 2px 5px;
}
I used this same structure in one blog, but instead of an include file I used data from the table, so i think the problem are from the CSS. This is the result i get. This Giang Div is totally adjustable to the screen size, but it stays up there instead of here the arrow points and here the include is printed.
Well...
The value 1 is returned because the include-statement was performed successfully.
If the included file doesn't contain any code that needs to run, you can use file_get_contents():
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= file_get_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
As a reference, if the include file does have code that has to be executed, use output buffering:
function get_include_contents($filename) {
if (is_file($filename)) {
ob_start();
include $filename;
return ob_get_clean();
}
return false;
}
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div><div id='PostText'>";
$Return .= get_include_contents($row['PathFile']);
$Return .= "</div><div id='PostData'>";
Above code is taken from the PHP-manual (include-statement, example 6)
Instead of using incude try using file_get_content()
$Return .= "</div><div id='PostTitleComplete'><strong>Post Completo</strong></div>";
$Return .= "<div id='PostText'>";
$Return .= file_get_content($row['PathFile']);
$Return .= "</div><div id='PostData'>";
I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.