How do I get my G+ profile/logo to display as the sender image in Gmail's new grid view?
I added the Google-Schema markup to my emails. When I test my email, the 'featured image' is displaying properly but I can't get the 'sender image' to display. What am I missing?
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Restaurant.com"/>
<link itemprop="url" href="http://www.restaurant.com/"/>
<link itemprop="url/googlePlus" href="https://plus.google.com/+restaurantcom/posts"/>
</div>
<div itemprop="about" itemscope itemtype="http://schema.org/Offer">
<link itemprop="image" href=“http://image.exct.net/lib/feef1377736103/m/1/0328-mi1-mobile-v1.jpg”/>
</div>
</div>
Is the DKIM domain matching the domain from the Google+ page you are linking (i.e. restaurant.com) and is the Google+ page verified?
These are the requirements for the company logo to show up.
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
I decided to use CodeIgniter-Skeleton-master (author Anvoz) for build my web site.
I added new menus and sub menus on this example.
With setup new menus I haven't problem, because I copy example of Todo, make Todo1 and it works without any problem.
But, on all added submenus I entered under Todo1 displayed web page cannot proper access to css and js files and navbar is displayed without css and js.
Problem was caused what site url() grab controller name todo1 and css and js is in the wrong path !
Example:
todo1 ->path : http://localhost/ci3a/ ->this work ok instead all used css and js path is added onto this and have acess to their files
todo1/aboutus ->path : http://localhost/ci3a/todo1 ->this controller name-todo1 cause wrong path and css and js files cannot be used!
Organisation of files :
application
assets, contain css, images and js subfolders
system
In application/config/
assets.php I have:
$config['assets_url'] = 'assets/';
autoload.php I have:
$autoload['helper'] = array('url');
config.php I have:
$config['base_url'] = '';
$config['index_page'] = '';
routes.php I have:
$route['default_controller'] = "skeleton";
$route['404_override'] = '';
In application/skeleton/ i have
controllers and views folders
In controllers folder I have main controller skeleton.php
In application/views/header.php I have navbar menu structure.
Here I put the copy of todo menu->todo1 with 2 submenus, who work but dont display css and js
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Todo1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Todo1</li>
<li>About us</li>
<li>Where we are</li>
</ul>
</li>
I added similar functions as index (in todo1.php controller) for this new submenuus)
public function aboutus()
{
$this->load->library('template');
$this->template->set_layout('pagelet');
$this->template->set_title('Todo example');
$this->template->load_view('todo1/aboutus');
}
I dont know how to eliminate this controller name who make css, image and js unaccesible.
I tried to make new folder todo1 under root and copy access subfolder into it but the problem stayed.
In web browser, i cought errors:
GET http://localhost/ci3a/todo1/aboutus [HTTP/1.1 200 OK 63ms]
GET http://localhost/ci3a/todo1/assets/css/bootstrap.min.css [HTTP/1.1 404
Not Found 141ms]
and x similar errors
Can you someone help me ?
to load your css and js
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
so that your folder structurer would be like this
1. application
2. assets
- css
1. bootstrap.css
- js
1. bootstrap.js
- images
1. slider.jpg
2. logo.jpg
3. system
4. .htacess
5. index.php
in controller just load your particular view only
public function aboutus()
{
$this->template->set_title('Todo example');
$this->template->load_view('todo1/header');
$this->template->load_view('todo1/aboutus');//this should contain only about us details
$this->template->load_view('todo1/fotter');
}
so in header.php file
<!DOCTYPE html>
<html>
<head>
<title>my site ----</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
in so in fotter.php file
<div class="foot">
<div class="social">
<div class="news_letter">
<p>Sign Up For Newsletter</p>
<div class="new_div">
<form action="#" class="form_news" method="post">
<input type="email" class="news_input" placeholder="E-Mail" name="email" required>
<input type="submit" class="news_button" value="Subscribe" name="news_but" >
</form>
</div>
</div>
<div class="follow">
<p>Follow Me</p>
<ul class="soc">
<li><a class="soc-facebook" href="#" target="_blank"></a></li>
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-linkedin soc-icon-last" href="#"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="copyright navbar navbar-default">
<div class="copy_in">
<div class="foot_nav navbar-text">
<ul>
<li class="list_border">Home</li>
<li class="list_border">About Us</li>
<li class="list_border">Products</li>
<li class="list_border">Corsair</li>
<li>Contact Us</li>
</ul>
</div>
<div class="foot_copy_text">
<p class="navbar-text">
© 2015 - comany name. Solution By : My office name
</p>
</div>
</div>
</div>
</div>
</body>
in between (ex:about us page)
<div class="container">
<h1>Im About us</h1>
<!-- rest of code here -->
</div>
ex: contact
<div class="container">
<h1>Im contact</h1>
<!-- rest of code here -->
</div>
I know 'primaryImageOfPage' is a property of WebPage.
But 'primaryImageOfPage' isn't a property of Article.
For this code:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="image"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
How can I choice Primaery picture for Article?
Dose Article inherits from Webpage?
FOr example:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="primaryImageOfPage"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
Does Article inherit from WebPage?
No. You can’t use primaryImageOfPage for Article.
While it makes sense to specify the main content/image of a WebPage, would it also make sense to specify this for an Article? I’d say that an Article should only contain main content/images in the first place.
If there is an image the whole Article is about, you could use the about property. Example: interpretation of a painting. If this image is from a different source, you could use the citation property in addition.
For images being part of the Article, there is the associatedMedia property. While its description is somewhat confusing, it got discussed that this property could be used for linking images (or other media) that belong to or are part of the Article (currently, it has the synonym encoding, which they planned to remove; I don’t know why that did not happen yet).
Note that I wouldn’t use the image property for all images that are part of the Article. I think this property should only be used for images of the Article itself, i.e., images representing this whole Article. This could be a screenshot of the Article, a thumbnail, maybe a lead picture.
So, you could use associatedMedia for the main image(s) and no property for secondary images:
<article itemscope itemtype="http://schema.org/Article">
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src"main-image.png" alt="…" />
</span>
<img src"secondary-image-1.png" alt="…" />
<img src"secondary-image-2.png" alt="…" />
<img src"secondary-image-3.png" alt="…" />
</article>
My site has a "nav" div, with links to different html files, a "sidebar" div with static information, and a "content" div, which the different html files get loaded into. I've also set my url base in the header. One of these html files is a long document, and I'd like to be able to include links to sections of this file. So I named the section headers and used the hashtag to link to them:
portfolio.html snippet:
<BODY>
<a id="top"></a>
<header>
PULSE OXIMETRY IN ZAMBIA<BR>
DENGUE DIAGNOSIS IN NICARAGUA<BR>
EYE HEALTH IN INDIA<BR>
MAS.531 COMPUTATIONAL CAMERA AND PHOTOGRAPHY<BR>
MAS.S60 HANDS ON FOUNDATIONS<BR>
<hr>
</header>
<header><a id="pulseox">PULSE OXIMETRY IN ZAMBIA</a></header>
<img src="pulseOx.PNG" width="500px"><BR>
lorem ipsum
</BODY>
And this works wonderfully when I've opened the html by itself. But when it's been loaded into the "content" div within the meta html file, it tries to take me to <myurlbase>#pulseox. How do I make the <a href="#pulseox"> link refer to html doc within the "content" div? I haven't set a base url in the portfolio.html file.
Here's my meta html doc, if that helps:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="index_test.css" />
<base href="http://myurl/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").load("home.html");
$(".nav-1").click(function(){
$("#content").load("home.html");
});
$(".nav-2").click(function(){
$("#content").load("about.html");
});
$(".nav-3").click(function(){
$("#content").load("portfolio.html");
});
$(".nav-4").click(function(){
$("#content").load("cv.html");
});
});
</script>
</HEAD>
<BODY>
<div id="nav">
<ul>
<li><a class="nav-1">HOME.</a></li>
<li><a class="nav-2">ABOUT.</a></li>
<li><a class="nav-3">PORTFOLIO.</a></li>
<li><a class="nav-4">CV.</a></li>
</ul>
</div>
<div id="sidebar">
myname
<BR><BR>
</div>
<div id="content"></div>
</BODY>
</HTML>
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument