Can I write a static resource link in head? - ruby-on-rails

I want to include the following code block in my application.html.erb:
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="images/icons/site.webmanifest">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
These ten lines take care of all my icon needs. I've seen this question and frankly I don't know how to get these ten lines using that method, and frankly I'm not that interested in spending time figuring it out when this already works. Except-- it doesn't work, because I'm using the wrong path. images/icons/filename doesn't work.
How can I do this? Does rails not allow me to do this?

Place that images folder inside the app/public/ directory, put a slash in front of all those paths like below (or just copy and paste that) and it will work.
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
<link rel="manifest" href="/images/icons/site.webmanifest">
<link rel="shortcut icon" href="/images/icons/favicon.ico">

Related

how to show Favicon using local server in Microsoft Edge(although it is working fine in Google Chrome and IE) ?

<!DOCTYPE html>
<html lang="en" class="teradata-bootstrap marketing-operations" ng-app="marketingOps">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
I used portion in my code its working in chrome but not in Edge.
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon" />

IOS X Safari favorites icons giving 404 errors

My icons are showing on all other browsers except IOS 10 with Safari when adding to bookmarks/favourites, cannot figure out what is missing or out of place and no help on the forums or documentation. Could someone perhaps tell me the default path used by Safari in IOS 10 to add icons to favorites?
This is my code:
<link rel="apple-touch-icon-precomposed" href="http://www.mainboard.com/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.mainboard.com/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://www.mainboard.com/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.mainboard.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://www.mainboard.com/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.mainboard.com/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://www.mainboard.com/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.mainboard.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://www.mainboard.com/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://www.mainboard.com/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-196x196.png" sizes="196x196" />
<meta name="application-name" content="MAINBOARD"/>
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="http://www.mainboard.com/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="http://www.mainboard.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="http://www.mainboard.comm/stile-310x150.png" />
<meta name="msapplication-square310x310logo" content="http://www.mainboard.com/mstile-310x310.png" />
<link rel="manifest" href="http://www.mainboard.com/manifest.json">
<link rel="mask-icon" href="http://www.mainboard.com/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
I suggest you to submit your site to the favicon checker. If will check your markups and icons. At the time of writing this answer, it is full green. So you can be nearly sure that everything is alright. Full disclosure: I'm the author of this service.
Keep in mind that browsers tend to be very lazy regarding favicon. For example, favicon caching is a recurrent web development issue. In the case of iOS Safari, I often observed that Safari does not always load the icon on time while bookmarking. Consequence: while testing your touch icon, you have the feeling that it does not work. It actually works, but you have to try again a minute later. Frustrating. Another possible issue is that, as the site author, you are constantly visiting your site under development. Maybe Safari considers your touch icon is broken (maybe it was at some point: this is a site under dev after all) so it does not reload it, but will eventually do it... later.
My advice here is to try with another iOS device if you have one at your disposal.

Bootstrap not responsive on iOS

I am using Bootstrap 3 for my website and I can't figure why it's not responsive on iOS (shows like the desktop view). I have already do a quick search about this problem and yes I use the template code provided by Bootstrap but it still doesn't seem to work. Here is the beginning of my code:
<!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">
<title>Laurent Doucet — Graphic designer</title>
<meta name="description" content="—">
<link rel="icon" href="img/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
Here is my website: http://www.laurentdoucet.be
Thanks a lot for the help.
Your use of frames is preventing your viewport tag from working.
You need to include a viewport meta tag in the outer page also:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>www.laurentdoucet.be</title>
</head>
<frameset>
<frame src="http://www.bepxlagency.be/laurentdoucet/" name="redir">
<noframes>
<p>Original location:
http://www.bepxlagency.be/laurentdoucet/
</p>
</noframes>
</frameset>
</html>

Paper tabs not showing correctly in Dart Polymer app

I am new to Dart and Polymer. I'm trying to create Tabs but they don't show correctly. Here is my code:
<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">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>Paper Tabs Events</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/roboto.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_pages.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
</head>
<body unresolved>
<core-header-panel flex>
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="dashboard"></paper-icon-button>
<span flex>Main Heading</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="1">
<paper-tab>IMPORT</paper-tab>
<paper-tab>DEFINE</paper-tab>
<paper-tab>DESIGN</paper-tab>
<paper-tab>DEVELOP</paper-tab>
<paper-tab>DEPLOY</paper-tab>
<paper-tab>EXPORT</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages>
<div><h1>Core Page</h1><p>This is content for core page.</p></div>
</core-pages>
</core-header-panel>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
Once they display correctly I then want to dynamically change the content under tabs on tab selection. But that is for later, first the tabs need to display correctly. Any help would be appreciated.
Here is the screenshot how it looks like.
https://www.dropbox.com/s/px2as8lor4a67ro/Screenshot%202015-04-23%2022.59.47.png?dl=0
The parent element of your core-header-panel needs a height (in this case body).
See https://www.polymer-project.org/0.5/docs/elements/core-header-panel.html for more info.
TLDR; You can add "fullbleed layout vertical" as attributes to your body.

Removing localization in liferay theme

I am using Liferay 6.1 and have developed theme in the same. My problem is when i load the theme the head section contains huge links as shown below:
<link rel="alternate" hreflang="ar-SA" href="http://localhost/ar">
<link rel="alternate" hreflang="eu-ES" href="http://localhost/eu">
<link rel="alternate" hreflang="bg-BG" href="http://localhost/bg">
<link rel="alternate" hreflang="ca-AD" href="http://localhost/ca">
<link rel="alternate" hreflang="ca-ES" href="http://localhost/ca_ES">
<link rel="alternate" hreflang="zh-CN" href="http://localhost/zh">
<link rel="alternate" hreflang="zh-TW" href="http://localhost/zh_TW">
<link rel="alternate" hreflang="hr-HR" href="http://localhost/hr">
<link rel="alternate" hreflang="cs-CZ" href="http://localhost/cs">
<link rel="alternate" hreflang="da-DK" href="http://localhost/da">
<link rel="alternate" hreflang="nl-NL" href="http://localhost/nl">
<link rel="alternate" hreflang="nl-BE" href="http://localhost/nl_BE">
<link rel="alternate" hreflang="en-GB" href="http://localhost/en_GB">
<link rel="alternate" hreflang="et-EE" href="http://localhost/et">
<link rel="alternate" hreflang="fi-FI" href="http://localhost/fi">
<link rel="alternate" hreflang="fr-FR" href="http://localhost/fr">
<link rel="alternate" hreflang="gl-ES" href="http://localhost/gl">
<link rel="alternate" hreflang="de-DE" href="http://localhost/de">
<link rel="alternate" hreflang="el-GR" href="http://localhost/el">
<link rel="alternate" hreflang="iw-IL" href="http://localhost/iw">
<link rel="alternate" hreflang="hi-IN" href="http://localhost/hi">
<link rel="alternate" hreflang="hu-HU" href="http://localhost/hu">
<link rel="alternate" hreflang="in-ID" href="http://localhost/in">
<link rel="alternate" hreflang="it-IT" href="http://localhost/it">
<link rel="alternate" hreflang="ja-JP" href="http://localhost/ja">
<link rel="alternate" hreflang="ko-KR" href="http://localhost/ko">
<link rel="alternate" hreflang="lo-LA" href="http://localhost/lo">
<link rel="alternate" hreflang="nb-NO" href="http://localhost/nb">
<link rel="alternate" hreflang="fa-IR" href="http://localhost/fa">
<link rel="alternate" hreflang="pl-PL" href="http://localhost/pl">
<link rel="alternate" hreflang="pt-BR" href="http://localhost/pt">
<link rel="alternate" hreflang="pt-PT" href="http://localhost/pt_PT">
<link rel="alternate" hreflang="ro-RO" href="http://localhost/ro">
<link rel="alternate" hreflang="ru-RU" href="http://localhost/ru">
<link rel="alternate" hreflang="sr-RS" href="http://localhost/sr">
<link rel="alternate" hreflang="sr-RS-latin" href="http://localhost/sr_RS_latin">
<link rel="alternate" hreflang="sl-SI" href="http://localhost/sl">
<link rel="alternate" hreflang="sk-SK" href="http://localhost/sk">
<link rel="alternate" hreflang="es-ES" href="http://localhost/es">
<link rel="alternate" hreflang="sv-SE" href="http://localhost/sv">
<link rel="alternate" hreflang="tr-TR" href="http://localhost/tr">
<link rel="alternate" hreflang="uk-UA" href="http://localhost/uk">
<link rel="alternate" hreflang="vi-VN" href="http://localhost/vi">
I want remove languages that are not needed. I want these links to be removed as this is not the good practice for SEO. I want a default language for a theme. I tried adding translations.disabled=true in the portal-ext file but this didnt worked.
Your any suggestions are appreciated.
You have to restricted to the locales you want to use, adding the "locales" property to portal-ext.porperties. To restrict it to englisch and german for example, you can do this
locales=en_US,de_DE
See also the official wiki documentation
I quote it here:
Removing unwanted language
By default, Liferay supports all the follow languages (excerpt from portal.properties of Liferay 4.3.3):
locales=ar_SA,ca_AD,ca_ES,zh_CN,zh_TW,cs_CZ,nl_NL,en_US,fi_FI,fr_FR,de_DE,el_GR,hu_HU,it_IT,ja_JP,ko_KR,fa_IR,pt_BR,ru_RU,es_ES,sv_SE,tr_TR,vi_VN
If we only want to support English, German and Spanish, we simply remove the unwanted locales so that our locales value looks like this:
locales=en_US,de_DE,es_ES
The portal-ext.properties settings can be overridden my Portal settings at Control Panel > Settings > Display Settings > Available Languages. I'd say it's safe to set them there.
Also, there is a per-page option in the SEO section to disable the canonical links there.
go to web.xml and delete language mapping url after that start the server.
url--tomcat-7.0.42\webapps\ROOT\WEB-INF

Resources