In my Jhipster Application when I create new user it sends email for reset password, users getting email but I want to display one image in that email so it looks good
I have written fillowing line in ActivationEmail.html to add image but When user didn't get image in email.
<img th:src="#{|${https://crunchbase-production-res.cloudinary.com/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1484233225}/vexdy5hgzgljw17nums1.png|}" alt="Mountain View" style="width:150px;height:100px"></img>
please help me and suggest me right code to add image with Email ?
Creating a user through the User Management page uses the creationEmail.html template. Signing up through the register page uses the activationEmail.html template.
You can add images in your JHipster email templates by using a regular image tag:
<img src="https://jonathanturley.files.wordpress.com/2017/06/images.png" height="100" width="150" />
For example, the image should be displayed in the email like in this screenshot:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{email.activation.title}">JHipster activation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" th:href="#{|${baseUrl}/favicon.ico|}" />
</head>
<body>
<img src="https://jonathanturley.files.wordpress.com/2017/06/images.png" height="100" width="150" />
<p th:text="#{email.activation.greeting(${user.login})}">
Dear
</p>
<p th:text="#{email.activation.text1}">
Your JHipster account has been created, please click on the URL below to activate it:
</p>
<p>
<a th:href="#{|${baseUrl}/#/activate?key=${user.activationKey}|}"
th:text="#{|${baseUrl}/#/activate?key=${user.activationKey}|}">Activation Link</a>
</p>
<p>
<span th:text="#{email.activation.text2}">Regards, </span>
<br/>
<em th:text="#{email.signature}">JHipster.</em>
</p>
</body>
</html>
Related
i'm using
<div ><a href={`https://facebook.com/sharer/sharer.php?u=${this.state.linkShare}`} target="_blank" ><FaFacebook /></a></div>
to share my post in react app to facebook, but it just display my ip like that:
I try to add meta tag but it doesn't word too :(
<MetaTags>
<title>My Page 1</title>
<meta property="og:url" content={window.location.pathname} />
<meta property="og:type" content="website" />
<meta name="description" content="description sd here.." />
<meta property="og:title" content="My App" />
</MetaTags>
How can i share my post with description to facebook with react js?
OG Tags have to be in the original page source, you cannot set them dynamically with React. Facebook ignores JavaScript. One option is to use "Server Side Rendering", another one https://prerender.io/.
I have following code below where I used Angular Routing to direct users to new registration forms. The app works like this. The user sees a webpage which asks them to make a choice between a "digital quote" or "screen quote" by clicking the appropriate button. Once the button is clicked it should direct it to another page which shows the appropriate registration form. In terms of the different registration forms, I have that all built. But I have one big problem in terms of functionality. When the user clicks the button it should load the registration in a different page. I am not sure how to do that. Right not I am using an ng-view directive which means that the buttons and the initial questions still remain. My objective is that once you click the button, all you see are the corresponding/different registration pages. Any help or direction would be greatly appreciated. I don't believe Angular can solve this.
Thank you
the main page-> index.html
<html ng-app="myHome">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/>
<link rel="stylesheet" href="/css/redirect.css"/>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="/js/redirect.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="rotate">
<div class="col-md-6 col-md-offset-3">
<img src="/css/Logo_75.png">
</div>
</div>
<div class="row">
<h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br>
<h1>DIGITAL OR SCREEN QUOTE?</h1>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button type="button" class="btn btn-success">DIGITAL QUOTE</button>
<button type="button" class="btn btn-success">SCREEN QUOTE</button>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
The angular JS file or the redirect.js file looks like this:
var app = angular.module('myHome', [ngRoute]);
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/index.html' })
.when('/digital', { templateUrl: '/digital.html' })
.when('/screen', { templateUrl: '/screen.html' })
.otherwise({ redirectTo: '/' });
}]);
where digital.html is the registration form for the digital option and screen.html is the screen registration form option. If anyone wants to see those registration forms, I can paste those files as well. Thank you so much for your help.
When the user clicks the button it should load the registration in a
different page
Probably you can solve it in the next way.
Just get on button click new page from server.(remove # from href="#/digital") and create new route(/digital) in your server side application.
The only way to do that is to use anchor tag with target="blank". Angular is total SPA, so it will (ng-view) will never allow you to open the page in a new window (which I think you trying to do). It is better you use the <a> tag for your current need.
I'm currently trying to get the preview functionality from the Eclipse Web Page Editor with AngularJS up and running. Unfortunately nothing happens (see attached image) when I try to run the provided code.
It seems to run here.
The code runs in every web browser - so the question is why is it not working in the "Preview Tab" of the Eclipse Web Page Editor? Any ideas?
My Setup:
Eclipse Mars.1 Release (4.5.1) for Web Developers
AngularJS Eclipse 1.1
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
enter image description here
I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<img src="img/img1thumb.jpg" />
<img src="img/img2thumb.jpg" />
<img src="img/img3thumb.jpg" />
<img src="img/img4thumb.jpg" />
<img src="img/img5thumb.jpg" />
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this
<a href="color lef.jpg" data-type="album" rel="lightbox" >
<img src="color lef.jpg" width="100" height="100" />
</a>
<link href="css/lighbox.css" rel="stylesheet" />
should be
<link href="css/lightbox.css" rel="stylesheet" />
There is a spelling error in 'light'. Your original code is missing the 't'.
I'm trying to use an unlinked button in a mobile app using jQuery Mobile. I still want the button to be tappable but instead of the default ajax behavior I'd like to use my own.
However when I tap a button that isn't linked to something it doesn't give any feedback. That is to say the CSS doesn't change to the pressed state and then back again. When I tap a link that has a valid href or is inside a form it works.
Oddly enough clicking links in my desktop browser does invoke a change although it isn't the same as tapping a button. With the default CSS package buttons will turn blue momentarily when tapping them to submit a form or proceed to the next page. When I click on them on my desktop they go to hover state which is gray so it appears this isn't really working on any browser.
Does anyone know how to get a simple button to respond to a tap even if the button doesn't actually link anywhere?
EDIT: Here's some code to try I tried this on both iOS and Android with the same result.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="startpage">
<div data-role="header" data-theme="c">
<h1>Button Test</h1>
</div>
<div data-role="content">
<button id="test1">Test 1</button>
<button data-role="button" id="test2">Test 2</button>
<a data-role="button" id="test3">Test 3</a>
<a data-role="button" href="" id="test4">No href</a>
<a data-role="button" href="#" id="test5">href=#</a>
<a data-role="button" href="#page2" id="test6">This works because it's linked</a>
<form method="get" action="index2.html">
<input type="text" name="name" placeholder="Name"/>
<button type="submit" value="No tap change here either"></button>
</form>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header" data-theme="c">
<h1>Page 2</h1>
</div>
<div data-role="content">Linked buttons work</div>
</div>
</body>
</html>
OK I ended up filing a bug in the jQuery Mobile issue tracker and it appears to be a known issue.
https://github.com/jquery/jquery-mobile/issues/5009
https://github.com/jquery/jquery-mobile/issues/4469
The workaround is to use a link button like so:
Click me
With that the button will give feedback to the user even though it doesn't actually go anywhere or do anything.
They are looking into fixing this in v1.3.