I have the following fragment. I'm trying to extend the base fragment "head" with the open graph tags... but the rendered page contains only tags from fragments/head, with the og ones.
How can I add more tags to a fragment?
<head th:include="fragments/head :: head">
<!-- You can use Open Graph tags -->
<meta property="og:url" th:content="${url}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="GUApp" />
<meta property="og:description" th:content="${description}" />
<!--<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />-->
</head>
<head th:fragment="head" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
....
</head>
The easiest option is to pass additional tags as in Flexible layouts documentation demo.
Thanks to fragment expressions, we can specify parameters for
fragments that are not texts, numbers, bean objects… but instead
fragments of markup.
This allows us to create our fragments in a way such that they can be
enriched with markup coming from the calling templates, resulting in a
very flexible template layout mechanism.
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="header :: head(~{::meta})">
<!-- You can use Open Graph tags -->
<meta property="og:url" th:content="${url}"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="GUApp"/>
<meta property="og:description" th:content="${description}"/>
</head>
...
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(meta)">
<!-- some default styles -->
<link href="base.css" rel="stylesheet" />
<!--/* Per-page placeholder for additional meta tags */-->
<th:block th:replace="${meta}" />
</head>
...
Result html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="base.css" rel="stylesheet" />
<meta property="og:url"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="GUApp"/>
<meta property="og:description"/>
</head>
...
Related
I just created a new Spring Boot v1.5 project and facing issue where Thymeleaf Layout Dialect is not working.
I have the dependencies in my build.gradle and its on the classpath.
compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.1.2'
I have the following layout file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8" />
<title>Default Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="title" content="" />
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<!-- header -->
<header th:include="shared/nav-menu :: menu-admin" />
<!-- page content -->
<th:block>
<section layout:fragment="content"></section>
</th:block>
</body>
</html>
And file with content:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<title>Parameter Manager</title>
</head>
<body>
<section layout:fragment="content">
<h2>OMG I am on the page!</h2>
</section>
</body>
</html>
The HTML output is content.html file. It is not working as intended. The header and navigation menu should be part of the HTML output. Also the is in the page source which should not be the case.
Apparently the latest version of Thymeleaf Layout Dialect doesn't work with Spring Boot 1.5. Using version 1.2.9 and it works as expected.
compile group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '1.2.9'
I'm using codeigniter but it loses charset every time.
What can cause this?
For example:
At my address bar
www.abc.com/def
www.abc.com/def/
My db is UTF-8
My config file - $config['charset'] = 'ISO-8859-1';
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
</body>
</html>
take a look at meta charset part
I like clean code and I'm sure most developers do. I am coming across an issue where my Meta tags are all appearing on ONE line all together and not on separate lines.
I have a file called "client.master" and here is code for the header:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" />
<link rel="apple-touch-startup-image" href="/images/home-startup.png" />
<link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" />
<link href="/css/design.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="headContent" runat="server">
</asp:ContentPlaceHolder>
</head>
That looks very clean and nice. However, when I view the source of the page, the output shows the <meta> tags and the <link> tags all on one line. The script tags are not.
Here is the output of my code:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="default" /><meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" /><link rel="apple-touch-startup-image" href="/images/home-startup.png" /><link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" /><link href="/css/design.css" type="text/css" rel="stylesheet" />
<title>
Login
</title></head>
Notice the <meta> and <link> tags are both on a single line AND the <title> tag has line breaks.
Here is the HTML for the default.aspx page for the Title:
<asp:Content ID="title" runat="server" ContentPlaceHolderID="title">
Login
</asp:Content>
My assumption is because the <meta> tags and <link> tags are self enclosed and the <script> tags end with </script>.
Is the only way to resolve this issue to close my <meta> tags with </meta>. Which way is to be considered the standard when closing meta and link tags? or script tags?
Thanks in advance for your help!
If you really want to follow the spec, link and meta are void elements, they can't have a closing tag, if your DOCTYPE is HTML5, you can use the selfclosing tag <meta ..../> but the default way would be to use it only as a start tag, that is a correct conforming use as empty elements don't need an end tag (void ones, as I said, can't have it).
Script is not a void element, but is an empty one, so you can use only the start tag, the self-closing tag or both start and end tags.
Note that for an element to have a content model of type empty really means it may be empty, not that it should; that would probably be what it is called void.
As to why the asp parser does that to your metas, I can't think of a reason. I understand your preference for clean code, but if it is of any help, try to think that at least that bug contributes to a filesize decrease :o)
Bear in mind that all of this applies to HTML5, XHTML treats void and empty models differently.
I'm having a problem getting Facebook to recognize my open graph tags. In looking at the source of the page I see the open graph tags properly but when I go to Facebook's open graph tag debugger, it is not picking up the open graph tags.
Here's what the source looks like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<title>Run When You - Arte House on Joss & Main</title>
<meta name="description" content="With its' vibrant pastel color scheme and and unique design this wall art sign provides the perfect inspirtation for anytime of the day. Comes complete with ..." />
<meta name="keywords" content="Vintage-Inspired Wood Plank Wall Art" />
<meta property="fb:admins" content="32604531" />
<meta property="og:title" content="I love the Run When You in the Arte House event at Joss & Main!" />
<meta property="og:description" content="With its' vibrant pastel color scheme and and unique design this wall art sign provides the perfect inspirtation for anytime of the day. Comes complete with ..." />
<meta property="og:image" content="https://secure.common.josscdn.com/lf/53/hash/15872/5360609/1/Run+When+You.jpg" />
<meta property="og:site_name" content="Joss & Main" />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.jossandmain.com/Run-When-You~QVH1296~E627.html" />
Here's what the Facebook's debuger pickes up:
URL: https://www.jossandmain.com/Run-When-You~QVH1296~E627.html
https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fwww.jossandmain.com%2FRun-When-You%7EQVH1296%7EE627.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<title>Joss & Main</title>
<meta property="fb:admins" content="32604531">
I'm banging my head on the wall - any ideas?
Are you sure the tags are there? Here's what I see in that URL:
Had the same problem changed
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
to just
<!DOCTYPE html>
Source:
http://www.thesoftgrounds.com
Even with the meta properties, FB is still fetching the wrong image.
Here is my head:
<title>5mm 70L Full Wave LED 5-multi Holiday Lights</title>
<meta name="description" content="5mm 70L Full Wave LED 5-multi Holiday Lights - The LED Warehouse" />
<meta name="keywords" content="5mm,70L,Full,Wave,LED,5-multi,Holiday,Lights" />
<meta name="GOOGLEBOT" content="index,follow" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta property="og:title" content="5mm 70L Full Wave LED 5-multi Holiday Lights" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html"/>
<meta property="og:image" content="http://www.environmentalled.com/images/products/839.jpg"/>
<meta property="og:site_name" content="The LED Warehouse" />
<meta property="fb:admins" content="100001735835873" />
<link href="/style-led.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/magiczoom.js"></script>
I use these meta properties on other non php pages without any issue.
From the og:url you specified: http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html
From that the linter sees:
Meta Tag: <meta property="og:title" content="5mm 70L Full Wave LED 5-multi Holiday Lights" />
Meta Tag: <meta property="og:type" content="product" />
Meta Tag: <meta property="og:url" content="http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html" />
Meta Tag: <meta property="og:image" content="http://www.environmentalled.com/images/products/839.jpg" />
Meta Tag: <meta property="og:site_name" content="The LED Warehouse" />
Meta Tag: <meta property="fb:admins" content="100001735835873" />
Is this incorrect?
The only thing the linter says is that it cannot find og:description.
Is http://www.environmentalled.com/images/products/839.jpg the correct image you want?