Before upload a photo to my server I want to modify background, layout,.. of image like as Photo Filter of Instagram (please review attach image).
Please help me about that, jQuery plugin or Library to do it?
For styling images, you should mostly use CSS. There are pretty good CSS libraries out there for this. for example Instagram.css
<link rel="stylesheet" href="instagram.min.css">
Add a class filter-[filter-name] from list of possible classes:
<figure class="filter-[filter-name]">
<img src="assets/img/instagram.jpg">
</figure>
Results:
You can then use javascript or jQuery to dynamically add classes and apply filters.
I think this is solution for your problem
https://www.html5rocks.com/en/tutorials/canvas/imagefilters/#toc-conclusion
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Related
i'm trying to add <script> ... </script> to HTML element in Neos CMS, could you please tell me how to do it, because HTML element in Neos CMS doesn't accept js. Is there any alternative how to do it please. Thanks for any recommendations.
There is a package available with wich the editor can add source code like that. But be careful with this feature as with great power (of the editor) comes great responsibility!
Depending on what your use case is, it may be more secure to provide a custom NodeType for the editor which then adds this JS code via fusion.
One thing you may want to think about is loading things from external sources might be problematic for GDPR compliance.
Like in this example you can use a FocusArea in the Backend.
The result in the Frontend looks like this.
<img src="..." data-focus-area="{"x":4994,"y":2809,"width":4994,"height":2809}" />
What is needed in Frontend so that this focus-area is always visible?
I think there are jQuery libraries for it.
I doesn't used this feature for now, but a quick look on this seems promising:
jQuery Focuspoint
Please note that this feature is only relevant if your space for the image is smaller than the image you want to show.
I would like to insert some pictures in my custom web page for SonarQube 6.3.1. I tried to put it in resources/static like javascript files and call it with <img src="image.png"></img>but it doesn't work.
I do not really understand how SonarQube manage custom pages within the static folder. I followed the official guide but I do not understand for example how to use external resources (images, html templates, etc.) in the js file of my page.
Thank you for your help,
Benoît
I have finally found how to use my assets:
Put your assets in src/main/ressources/static, for example I added an image here src/main/ressources/static/images/loading.gif
Let myplugin my plugin's identifier
I am able to use my gif in src/main/ressources/static/page.js like this <img src="../../static/myplugin/static/images/loader.gif"></img>
Maybe it can help somebody...
I know that while uploading any Image/Asset into AEM DAM will create the renditions, but am wondering that how these renditions are going to be used?
Generally when doing content authoring we will be pointing to the DAM asset paths only, but never saw using particular renditions paths of the image. can anyone help me to give an example for using this renditions.?
The most common use case it to have "responsive" images by making use of the picture element (requires polyfills like picturefill.js when used with IE).
Here's an example taken from the Adobe documentation on Adaptive images:
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
As a result, the appropriate image will be rendered for the viewport breakpoints defined in data-media.
You can also consider using Named Transform Image Servlet that comes with acs-aem-commons package. It is handy to control many aspects of the image dynamically using just the image URL.
https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform/index.html
We have been having discussions in our product dev team regarding html maintainability and reuse. To set the context, we started with HTML5/CSS3 front end with plain JS under Play MVC, which in turn uses RESTful backend. Then we thought of adding AngularJS to the spin and to adopting a hybrid approach only to realize that two strong MVC frameworks don't necessarily work together and you have to pick one. So for the performance and type-safety among other issues, we decided to go with using Play framework and Scala based templates.
Here's the challenge: We would like to create reusable web components just like Apache Tiles, so that common elements such as header, menus, footer, etc. can be reused. These components are ready to go in Play to which dynamic content could be added to serve the entire page.
Can this be done? If yes, how?
Secondly, play templates seem to take you back in the time since they don't allow the separation of concern in html. Therefore for re-designing or improving html content, the html developer will have to deal with the template or merging new html with existing templates. How to make this process easier?
I'm don't know exactly how Apache Tiles works, but if I properly understand, it offers a way to create pages using smaller components (like header, menu, footer, etc) and some sort of include mechanism to glue these components together and then compose the page.
That said, you can achieve the same thing using Twirl. You just need to declare reusable blocks that can be used inside the same page, or you can have something like Rails partials that can be reused across different pages.
Let's see an example. Consider that you have the following files:
File app/views/partials/header.scala.html:
<header>
<h1>My Header</h1>
</header>
File app/views/partials/navigation.scala.html:
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>FAQ</li>
</ul>
</nav>
File app/views/partials/footer.scala.html:
<footer>
Some copyright info
</footer>
File app/views/main.scala.html:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#partials.header()
#partials.navigation()
#content
#partials.footer()
</body>
</html>
The files above defines not only some reusable partial templates (header, navigation and footer), but also a common layout (main) that all the pages of your application can reuse. Now, lets see a page that uses the structure above:
File app/views/users/profile.scala.html:
#(user: models.User)
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username</h2>
}
And there is more: since views are compiled to Scala code, you can import code written in Scala/Java and call it directly from your views, something like Rails view helpers:
File app/views/helpers/DateHelpers.scala:
package views.helpers
object DateHelpers {
def formatToISO8601(date: Date) = {
??? // format the date
}
}
Let's use this helper in our app/views/users/profile.scala.html page:
#(user: models.User)
#import controllers.DateHelpers._
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username.</h2>
<p>User since #formatToISO8601(user.createdAt)</p>
}
And there are other approaches to consider:
Ping-Play: Big Pipe Streaming for the Play Framework
You can create a Play module that integrate with Apache Tiles. I'm pretty sure this is possible.
A quick answer would be the following. If you are comfortable with Yeoman, you can keep most of the UI part in existing HTML, while rendering some pages with Scala templates. I would recommend Play-yeoman, which may help such that you can--with minimum effort--reuse UI components.
For instance, you may easily convert a NodeJS+Angular app into Play+Angular. The Play-yeoman plugin helps a lot. But it is not so flexible as it does not support any arbitrary Yeoman configuration, just Angular.