I am new to wordpress plugin development, but any how I have developed two shortcodes i.e. [MY_SHORTCODE] and [MY_SHORTCODE_MOBILE], both are working fine but now I want to do one enhancement in it, that is, I want to write a new shortcode which detect the device, if the detected device is mobile than I want to call the shortcode [MY_SHORTCODE_MOBILE] otherwise I want to call [MY_SHORTCODE]. How can I do this ? please help me guys .
you can do it via a plugin Mobile Detector
or if you want to create your own you can start by using mobile detection library(PHP)
mobile-detect
i got it your problem that you want to run short code base on browser or mobile device.
Download php file for mobile detect code and put below code where do you want to run short code
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/copy paste mobile detect code here from detectmobilebrowser.php',substr($useragent,0,4)))
{
//header('Location: http://detectmobilebrowser.com/mobile');
// that code run for mobile device
echo do_shortcode("[MY_SHORTCODE_MOBILE]");
}
else{
// that code run for browser
echo do_shortcode("[MY_SHORTCODE]");
}
?>
Related
A coworker and I were having a discussion about what is and isn't possible within the browser.
Then a question came up that neither of us could answer with certainty.
Can you create a webpage such that when you navigate to it, it engages the client-side printer and attempts to print a document. For instance, whenever you visit my personal website, you'll be treated to a print out of a picture of me, smiling.
Now, this is a hideous idea. I'm aware. But the discussion intrigued me as to if it could be done, and how. My friend insisted that the best you could do was pop up the print dialog for the user, they would have to click print themselves.
Would it be possible to bypass this step? Or just some fancy script to move the mouse over the print button and click on it? Or use an activeX control to interface with a Printer API directly?
You have to prompt the user to print the current page, there's no way to bypass this step (possibly in activeX for IE). That said, there's two different ways you could prompt the user to print images of you smiling when the page is loaded.
Here's how to do it in JavaScript.
window.onload = function() {
var img = window.open("me-smiling.png");
img.print();
}
And here's how to do it in css/javascript/html (assuming your picture has the id 'me-smiling'):
CSS:
#media print {
* {
display:none;
}
img#me-smiling {
display:block;
}
}
Javascript:
window.onload = function() { window.print() }
The only solution to avoid print dialog that I found was creating a variable on Mozilla Firefox to set auto-print. Maybe is not the best solution if you need to use other browser, but in my case, I only need to print a report automatically and it works:
1- Open Firefox and type "about:config" in the address bar
2- Right click on any preference and select "New" > "Boolean"
3- Add a variable called "print.always_print_silent" with "true" value
4- Restart Firefox.
Hope help you!
AttendStar created a free add-on that suppresses the dialog box and removes all headers and footers for most versions of Firefox.
https://addons.mozilla.org/en-US/firefox/addon/attendprint/
With that feature on you can use $('img').jqprint(); and jqprint for jquery will only print that image automatically called from your web application.
As far as I know, there is no way to print a document directly, without some client intervention, like setting browser flags.
In our current project we need to print directly to the default printer, but at least with Chrome you can do it easily with additional startup arguments.
To print directly to the OS default printer you can use:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --kiosk-printing http://www.contoso.com
Another option, which may also be useful, is tos use the native print dialog instead of chromes print preview.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --disable-print-preview http://www.contoso.com
Note, that window.print() and/or Ctrl-P behave accordingly the mentioned settings.
I know, that this does not exactly answers the OPs question, but I think it somewhat related, and for web based enterprise applications this is a quite common use case. Maybe someone find it useful.
For Firefox I recommend Seamless Print Addon
You can't bypass the print dialog, as far as I know. That would be a pretty obvious security flaw if the browser allowed that. But you can bring up the print dialog with "window.print()".
I think at best you would need an ActiveX component using base windows API to obtain a device context for the default printer and try and print an embedded image using assumed values for the printer settings.
To print to the default printer automatically without seeing a print dialog prompt, I've shared some code in the following question that works in IE7, IE8 and IE9:
Bypass Printdialog in IE9
From lot of search from last few days,
I've found a best possible solution.
Till date Chrome do not support direct printing from javascript.
It has launched USB and serial API which might help.
But currently I'm using a JavaApplet solution which is open source.
https://github.com/qzind/qz-print - build
While I'm getting error in building it. I preferred a Prebuilt - QZ Print Plugin 1.9.3
desktop app, which works great.
Download it from here: https://qz.io/download/
Code Example:
/***************************************************************************
* Prototype function for printing an HTML screenshot of the existing page
* Usage: (identical to appendImage(), but uses html2canvas for png rendering)
* qz.setPaperSize("8.5in", "11.0in"); // US Letter
* qz.setAutoSize(true);
* qz.appendImage($("canvas")[0].toDataURL('image/png'));
***************************************************************************/
function printHTML5Page() {
$("#qz-status").html2canvas({
canvas: hidden_screenshot,
onrendered: function() {
if (notReady()) { return; }
// Optional, set up custom page size. These only work for PostScript printing.
// setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
qz.setPaperSize("8.5in", "11.0in"); // US Letter
qz.setAutoSize(true);
qz.appendImage($("canvas")[0].toDataURL('image/png'));
//qz.setCopies(3);
qz.setCopies(parseInt(document.getElementById("copies").value));
// Automatically gets called when "qz.appendFile()" is finished.
window['qzDoneAppending'] = function() {
// Tell the applet to print.
qz.printPS();
// Remove reference to this function
window['qzDoneAppending'] = null;
};
}
});
}
Complete example can be found here:
https://gist.github.com/bkrajendra/c80de17b627e59287f7c
This is the best solution that I have found for firefox:
There is this awesome add-on Seamless Print.
It works like charm.
Wordpress Client wanted to have mobile devices (phones only) display a single image with links to cell and email rather than go to the responsive version of the website. I use media queries to determine break point of 600px width to display the website for desktops and iPads and display image only for phones.
Now client wants to add another link so mobile users can choose to go the responsive version of the website.
I can't see how I can do this unless? Was thinking using a landing page for mobile devices only might work - but how can that be done? And how can you link to the website vs image if you are using the same media queries?
URL: [iocomm.com]
Thanks for any help!
If you are ok with wordpress plugin, then install wp-splash-page and In the file /wp-splash-page/inc/class-wp-splash-page.php, add this condition just before the return true; statement in the test() function:
if ( $this->settings['show_on_mobile'] && ! $this->detect->isMobile() && ! $this->detect->isTablet() )
return false;
It is working like a charm
That's fairly simple. You can use JavaScript cookies to determine whether they want to view the responsive version. You can set this cookie via an anchor element. I would set the breakpoint rules onto a class calling it maybe .non-responsive and adding it to the <body> tag. On page load, you'd check whether the cookie is set to true and then remove the breakpoint class from the body showing the responsive website.
I have a strange problem with my iPad App in Phone Gap. The problem is that I have to open PDF document in my app through links and when I click the link which opens the PDF, it shows me the PDF document with no back link.
Hence, when I open the PDF document in my app through a link, it takes me to a dead end and there is no way I can go back to the main page of my app.
My question is that how can I have a Top-Bar, when I open a PDF which could take me back to my home page? Any internal element for the iPad may be?
Thanks a lot.
Try using the In App Browser plugin.
If you're using a later Phonegap / Cordova version (2.8.0, 2.9.0 etc) it should come with it - nothing else to install.
http://docs.phonegap.com/en/2.9.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
It will allow you to open the PDF in the a new 'window' that overlays your app. It has a 'Done' button that users can use to close it and return to your app when they are finished.
You would open the PDF using the In-App Browser, using something like this:
window.open('http://whitelisted-url.com/pdftoopen.pdf', '_blank');
I.e. the _blank option triggers the In-App Browser plugin. If you were to use _system instead it might open it in iBooks (just guessing there - not 100% sure if it would use iBooks).
Try prefixing https://docs.google.com/viewer?url= in the URL
like, window.open('https://docs.google.com/viewer?url=http://www.example.com/example.pdf&embedded=true', '_blank', 'location=yes');
Try this to open any kind of documents from URL using following steps:
install this plugin : cordova plugin add https://github.com/ti8m/DocumentHandler
use this code :
handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');
It works for me both on Android and IOS. I used it for open images and PDF files.
Android : It opens files using system apps if available, otherwise it give an error, which you can handle.
IOS : It opens files in popup like view with Done button and Option button.
It doesn't show your docs URL.
Source is available here : https://github.com/ti8m/DocumentHandler
Thanks asgeo1,
I solved it by using window.open().
<img src="images/samplens.jpg" border="0" />
Hope it helps.
I've ended up using WebIntent
as described here. The tricky part was to modify WebIntent.java to properly identify file type:
String type = obj.has("type") ? obj.getString("type") : null;
// New code starts
Uri uri = obj.has("url") ? Uri.parse(obj.getString("url")) : null;
String extension = MimeTypeMap.getFileExtensionFromUrl(obj.getString("url"));
if(extension != null){
MimeTypeMap mimeTypeMap = MimeTypeMap.getSingleton();
type = mimeTypeMap.getMimeTypeFromExtension(extension);
}
// New code ends
JSONObject extras = obj.has("extras") ? obj.getJSONObject("extras") : null;
I'm using the WordPress upload media tool within my plugin and there's unusual error that is going on, I get two iframes that overlap. I searched online and there's not much info out there, one that made most sense was that thickbox was included twice and that's causing the problem, but within my plugin code I have it included only once.
This is the code I'm using to open the window:
media-upload.php?type=image&TB_iframe=true&tab=library&width=640&height=640
and when I take of "TB_iframe=true" then I see the two iframes under each other, otherwise they overlap, only see double titles.
And this is the PHP code:
if (isset($_GET['page']) && ($_GET['page'] == 'add_images' || $_GET['page'] == 'add_slides')) {
add_action("admin_enqueue_scripts", "load_fixedly_media_upload_header");
}
function load_fixedly_media_upload_header() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-fixedly-upload', WP_PLUGIN_URL . '/fixedly/scripts/admin.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-fixedly-upload');
wp_enqueue_style('thickbox');
}
I have a huge problem with my Wordpress. My uploaded images don't list in the Media Library.
It is weird tho, it says I have 75 images, but display none. Take a look yourself.
Even weirder, if I go into gallery (the images you uploaded in the page itself), the images list just fine.
I already tried deactivating all my plugins, didn't work. Cache can be easily put out of the question, because it happened on at least 4 different computers, with Macs, PCs, and navigating with Safari, Firefox and Chrome.
Another interesting fact is that if I upload the image directly trough the computer (with the "From Computer" tab), everything goes fine. Another website on the same server works just fine too. And just to add to the complexity, when I go to the media page in the Wordpress Admin, all images show up just fine.
Oh, and before I forget... applying any filters, or doing a research in the media will always come up with the same problem.
So there... that's where I'm at.
I had a same problem just now, with missing media library images for my blog. The images appeared to be right there in the media library and were definitely on the actual web server (checked via FTP).
As Allen Z advised I did "check Settings → Media and make sure that Uploading Files folder is set to wp-content/uploads"
Mine were set to the default blank. I altered this to an absolute path http://www.example.com/wp-content/uploads
THIS DIDNT SOLVE THE PROBLEM when I refreshed the site in browser. However, I immediately changed the path back to blank (the default setting again) and everything came back! Woop
Everyone having this problem might want to try this before getting into the more technical fixes!
it was your permalinks... you must have changed to labeled-name... switch back to default.
that worked for me.
Check Screen Options (dropdown tab in the upper right hand corner of the page), and make sure there are sane settings for what to show on screen. All the column settings should be checked, and there should be a positive number of media items being shown on screen.
If that is ok, then check Settings → Media and make sure that Uploading Files folder is set to wp-content/uploads.
I believe these are the only settings that can be changed from the administrative screens.
Here's something a guy on Wordpress forum showed us. Add the following to your functions.php file. (remember to create a backup of your functions.php first)
add_filter( 'wp_image_editors', 'change_graphic_lib' );
function change_graphic_lib($array) {
return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}
...it was that simple.
Well, Seems like there was a bug when creating custom post types in the function.php file of the theme... which bugged that.
I had this problem with wordpress 3.8.1 and it turned out that my functions.php wasn't saved as utf-8. Re-saved it and it
I faced same issue on my wordpress site. After the lot of debugging i fixed my problem step by step like this.
First add given below code your db-config.php
define('SCRIPT_DEBUG', TRUE);
define('WP_DEBUG', TRUE);
define( 'WP_DEBUG_LOG', true );
Then goto /wp-includes/js/wp-util.js files and find the code $.ajax(
options ) on line number 100 insert given below code into your file
deferred.jqXHR = $.ajax( options ).done( function( response ) {
try {
response = JSON.parse(response);
} catch (Exception) {
response = response;
}
Please check your may be resolved.
if you Removed constant from db-config.php
define('SCRIPT_DEBUG', TRUE);
define('WP_DEBUG', TRUE);
define( 'WP_DEBUG_LOG', true );
Then compress your /wp-includes/js/wp-util.js file code and put your compressed code into /wp-includes/js/wp-util.min.js
*change your own risk if your update your wordpress version your changed may be lost.
Did you ever change the directory of your Wordpress install?
I had a problem with not finding my uploaded images after changing the Wordpress location on my server. In Wordpress, I went to Dashboard-> Settings -> Media and changed the uploads folder in the "Store uploads in this folder" field.
Considering the files were not uploaded via media uploader, they are present in the server but there's no reference to them in your database (in a little more detail).
In order to fix it, install the Media Sync plugin. Once it's active, under Media > Media Sync > Scan Files and select the files you want to import by click the checkbox next to them. Make sure also you untick the selectbox Dry Run (test without making database changes).
Then, when the time comes for you to be ready, just click "Import Selected" and you should see something like this
Once it is finished, you can visit Media > Library and you'll see all your imported files there.
How did you upload those images; via FTP or through WP uploader? You have to upload images THROUGH WP uploader in order to show them in the image library.
Ubuntu stores uploads in /var/lib/wordpress/wp-content/uploads . So what you need is to have this directory within your wordpress installation. Something like:
sudo ln -s /var/lib/wordpress/wp-content/uploads /var/www/www.mysite.com/wp-uploads
(replace mysite.com with your domain, the file should exist) should do the trick.
(Note that I've not tested this with multiple wordpress installations on one server.)
Further note that to make upload work at all (but this wasn't the question), you need to change Settings / Media / Store uploads in this folder to
wp-content/uploads
(no leading slash).
check .htaccess file in root of wordpress, maybe there is a rule for /uploads directory.
if so, remove it. but be careful and check which plugin did it, so disable the plugin, first.