I am developing my personal portfolio . I am facing a problem that is ..
I have placed all the important meta tags in my header.php file and they're visible in the page source code too .. But they are not working . I got to know this when I placed the Meta OG to get the link preview on social sites.
Here's the image of my the website from where I am checking the rich link preview
And here's my website source code image in which you can clearly see the meta tags included
If something isn't clear from the image then here's the link of my website
EDIT : Here's the code of my website's head section
<!DOCTYPE html>
<html lang="en">
<head>
<?php
global $baseUrl;
$baseUrl='https://www.iamosama.cf/' ;
?>
<!-- Basic -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Osama - Web Designer and Developer</title>
<meta name="description" content="Hello , I am Osama . A creative web designer and developer from Karachi , Pakistan" />
<meta name="keywords" content="Web Designer , Web developer , Front end Developer , UI/UX Designer" />
<meta property="og:site_name" content="Osama - The Web Developer" />
<link rel="shortcut icon" href="<?php echo $baseUrl ; ?>images/favicons/favicon.ico" />
<meta property="og:title" content="Personal Portfolio" />
<meta property="og:description" content="Hello , I am Osama . A creative web designer and developer from Karachi , Pakistan " />
<meta property="og:image" content="<?php echo $baseUrl ; ?>images/thumb.jpg" />
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script%7CPoppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/basic.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/layout.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/blogs.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/ionicons.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/magnific-popup.css" />
<link rel="stylesheet" href="<?php echo $baseUrl ; ?>css/animate.css" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicon -->
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Person",
"name": "Osama",
"alternateName": "Muhammad Osama",
"url": "https://www.iamosama.cf/",
"image": "https://www.iamosama.cf/images/profile.jpg",
"sameAs": "https://www.iamosama.cf/",
"jobTitle": "Web Designer and Developer"
}
</script>
</head>
Related
[i got an error on using a variable ( $page_title ) for echo the page title but it does not work and show me an error ]
[here is the code of header.php file]
<head>
<meta charset="UTF-8">
<title><?php echo $page_title; ?></title>
<meta name="description" content="sodalitesolutions">
<meta name="author" content="sodalitesolutions">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/font-awesome/css/font-awesome.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/style/slider.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/style/mystyle.css'); ?>">
</head>
[Error :: function: _error_handler]
Try to add this :
$this->data['title'] = 'test';
$this->load->view('view_name',$this->data);
I have a page here: http://desertcinema.com/home-test/
And I want to add a fancybox for both video (youtube and vimeo) and image gallery for photos under my portfolio section using fancybox.
Since I am working on Wordpress site (custom page). I access header.php file and added the cdn links for both the jQuery and CSS of fancybox:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
Here's the header.php file:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>
<!--><html <?php language_attributes(); ?>><!--<![endif]-->
<?php
global $theme_option;
global $wp_query;
$seo_title = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_title", true);
$seo_description = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_description", true);
$seo_keywords = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_keywords", true);
?>
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo('name'); ?> <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta name="author" content="<?php if(isset($theme_option['text_facebook']) && $theme_option['text_facebook'] != ''){echo $theme_option['text_facebook'];}else{echo 'Vergatheme';} ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<?php if($seo_description!="") { ?>
<?php }elseif($theme_option['seo_des']){ ?>
<meta name="description" content="<?php echo $theme_option['seo_des']; ?>">
<?php } ?>
<?php if($seo_keywords!="") { ?>
<meta name="keywords" content="<?php echo $seo_keywords; ?>">
<?php }elseif($theme_option['seo_key']){ ?>
<meta name="keywords" content="<?php echo $theme_option['seo_key']; ?>">
<?php } ?>
<!-- CSS
================================================== -->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="<?php echo $theme_option['favicon']['url']; ?>" type="image/png">
<link rel="apple-touch-icon" href="<?php echo $theme_option['apple_icon']['url']; ?>">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $theme_option['apple_icon_72']['url']; ?>">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $theme_option['apple_icon_114']['url']; ?>">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
<?php wp_head(); ?>
Now on my HTML I tried to add this codes here as per instruction:
To the wrap image to make sure it appears:
<li class="portfolio-box video-production ">
<a href="https://vimeo.com/169312968" class="more">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ilive-1-31nhrb4atwt3ix3v5bwef4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>iLiveAccountable</h4>
</a>
</li>
Now to finally make it work I created a script which I place at the footer of my custom page:
<script>
$("a.more").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
</script>
However when I tried it, it just link me to the link i place inside the link i presented:
Any idea what I am doing wrong? I really need to show up a responsive pop up/ligthbox for each image both video and image gallery.
Thanks in advance for the help.
The jquery plugin is not there. Check the console for error. Place it above the fancybox
I'm converting a couple sites from HTML to PHP for dynamic elements and have been able to do so with the header and footer (using php include()). However, I'm confused on how to do the head section. This is what I have with plain HTML:
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<meta charset="UTF-8" />
<meta name="description" content="Liberty Resource Directory. The ultimate curated directory to find what you need."/>
<meta name="keywords" content="ethan glover, lrd, liberty resource directory"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="stylesheets/lrdstylesheet.css" rel="stylesheet" media="screen">
<title>Liberty Resource Directory</title>
</head>
I can easily add the HTML5Shim script, meta charset, viewport (yes I will remove that max scale), and the stylesheet link.
Here's the problem:
How can I write the .php file in a way that I can pass an individual pages description, keywords and title to it? (That way I can put the entire above code in a php file and just include it on every page.)
Or will I simply have to exclude the description, keywords and title, and rewrite those parts every time?
Here's the answer: (Courtesy of Alejandro Arbiza)
head.php
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<meta charset="UTF-8" />
<meta name="description" content="<?php echo $description;?>"/>
<meta name="keywords" content="<?php echo $keywords;?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../stylesheets/lrdstylesheet.css" rel="stylesheet" media="screen">
<title><?php echo $title;?></title>
</head>
index.html (to include above code)
<?php
$description="Liberty Resource Directory. The ultimate curated directory to find what you need.";
$keywords="ethan glover, lrd, liberty resource directory";
$title="Liberty Resource Directory";
include 'scripts/head.php';
?>
The final result:
http://libertyresourcedirectory.com/
You can use variables for the description and the keywords (or anything else you want for that matter). Then, when the time comes to construct the page, you would just set the variables with the corresponding values.
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<meta charset="UTF-8" />
<meta name="description" content="<?php echo $description; ?>"/>
<meta name="keywords" content="<?php echo $keywords; ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="stylesheets/lrdstylesheet.css" rel="stylesheet" media="screen">
<title>Liberty Resource Directory</title>
</head>
So, lets say you have page1.php and page2.php:
<?php
// page1.php
$description = "This is page one";
$keywords = "page one";
include 'header.php';
?>
<!-- Page content -->
<?php include 'footer.php'; ?>
and
<?php
// page2.php
$description = "This is page two";
$keywords = "page two";
include 'header.php';
?>
<!-- Page content -->
<?php include 'footer.php'; ?>
Of course, I am assuming here that the whole HTML header is inside the header.php file, that is including <html>, <head> and <body>.
Good afternoon everyone. I'm stuck on including a file that has all of my 'head' information in it. I wanted to break down my page so it's simpler and less complicated. in my index.php file i did this;
<?php
include 'Resources/includes/head.php';
?>
It finds the file and i know this because in dreamweaver when i go on my index page it comes up as a tab underneath it. However when i view my index page on the local server, it's as if none of the styles or scripts have been applied to the page. This is the code that my head.php file has in it.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="../images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/scripts.js" type="text/javascript"></script>
</head>
You may try something like this by using a base path
<?php
$basepath="http://www.mysite.com/path_to_theme/";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="<?php echo $basepath; ?>/images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="<?php echo $basepath; ?>/css/style.css" type="text/css" media="screen"/>
<script src="<?php echo $basepath; ?>/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php echo $basepath; ?>/js/scripts.js" type="text/javascript"></script>
</head>
i am using jquery think box as light box it works in normal but if i loop though a php it fails..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="ThickBox is a webpage UI dialog widget written in javascript on top of the jQuery library. It's function is too show a single image, multiple images, inline content, iframed content, and content served through AJAX in a hybrid modal." />
<meta name="author" content="Cody Lindley" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<title>ThickBox 3.1</title>
<style type="text/css" media="all">
#import "css/global.css";
#import "thickbox-code/thickbox.css";
</style>
<link rel="alternate stylesheet" type="text/css" href="css/1024.css" title="1024 x 768" />
<link rel="alternate stylesheet" type="text/css" href="css/thickbox.css" title="1024 x 768" />
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<script src="js/global.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
</head>
<body id="pageTop">
<?php
for($i=0;$i<10;$i++)
{?>
<?php echo $i;?>
<div id="hiddenModalContent" style="display:none">
<p><?php echo $i;?></p>
<p style="text-align:center"><input type="submit" id="Login" value=" Ok " onclick="tb_remove()" /></p>
</div>
<?php
}
?>
can any one tell me how can i do that
Add a rel tag to the link ie. rel="gallery". That should do the trick.
See "Give each link element the same rel element and value. (Example: rel="gallery-plants")" at http://jquery.com/demo/thickbox/