function to display image of the post


I have created a simple function to display the image which is present in the post to the listing page of the posts.

function catch_that_image()
{
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img))
{
//Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
Advertisements

jQuery Ajax Tutorial and Example


Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

<?
$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname);
?> Continue reading 

What is jQuery and Ajax ?


What is jQuery ?

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software and it is a fast, small, and feature-rich JavaScript library. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

What is AJAX ?

AJAX (means Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

If you need to check the example on jQuery AJAX, you can check it out here

Retrieving featured image in WordPress


<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" border="0" /></div>
<?php endif; ?>

Using PHP substr function on the_permalink() in WordPress


My urls for posts in WordPress looks like this: http://localhost:8888/testing/book/yes-vi-testar/

Using the_permalink() would generate http://localhost:8888/testing/book/yes-vi-testar/, but I want to cut the first 34 characters to get a string like “yes-vi-testar”. How do I use php substr in a case like this?

<?php
    $friendlypermalink = substr(the_permalink(), 34);
?>

but that doesn’t work.

Use get_the_permalink() to get the permalink without echoing it.

So,

<?php
    $friendlypermalink = substr(get_the_permalink(), 34);
?>

A lot of of the WordPress function have ‘return’ alternates using get as the operative word. i.e.: get_the_timeget_the_content, etc.

the_title is the only one I believe that doesn’t have this option. For the_title you have to pass two empty parameters (the before and after seperators) and either a true or false … not sure at the moment

the_title("","",true);

Get the URL, time and content in WordPress without displaying it


The URL’s of our posts in WordPress looks like: https://blogbysid.wordpress.com/2013/04/26/creating-google-oauth-api-keys-and-developer-key/

Using the_permalink() would generate the link but if you want to get the link only and don’t want it to get displayed, what should we do ?

A lot of of the WordPress function have ‘return’ alternates using get as the operative word.

get_the_permalink() - To get the link
get_the_time() - To get the time
get_the_content() - To get the content

Get Image from Post or Page


Add the following function in function.php which is present at the root of theme folder.

function catch_that_image()
{
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img))
{ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

Just call the function catch_that_image(), wherever you need to get the image from the article.
e.g.

<img src="<?php echo catch_that_image();?>" width="75" height="75" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" align="left" hspace="5" />