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.
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.
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
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
Up to now, I used to use template auto-parser. I like the fact I can modify any element of the template using typoscript, without altering the initial HTML file. I also like the fact that I can render the html template directly in a web browser, filling it with dummy elements to see examples of menus and content elements. Finally, with the new backend templates, i now can place content elements anywhere on a grid, in a way that mimics the real aspect of the website.
I know there is also TemplaVoila. I never took the time to learn it. My feeling is that it is less compatible with some extensions, but maybe I am wrong.
Now, there is fluid, that will be used in the next version of Typo3. While it is clear that it is better using it that using template markers, I don't really understand why I should be better using Fluid than using template auto-parser or TemplaVoila. What I dislike is the fact it requires to modify the html template with special tags, meaning that either the web designer has to know Fluid, or the Typo3 integrator has to modify templates from the designer each time a modification is performed.
My question is: should I migrate form template auto-parser to Fluid for my website template? What are the benefits of using Fluid? Why should it be better? What template system should I use with Typo3?
As long as TypoScript does not support objects, the benefits of FLUIDTEMPLATE over template auto-parser are only a few. So there is no need to migrate.
But IMHO there are some arguments to switch to fluid:
more and more extensions will use fluid, so it will help you to learn fluid
you can use an ide with code-completion for fluid (it is just XML!)
fluid is really powerfull, you can have f.e. if statements which checks for empty content
some day TypoScript will support objects as well
But for extension developement, it is totally different. In an Extension, i would allways prefere using FLUID. You do not have to deal with template things inside your extension anymore. Just pass the data to fluid and things which concern the view will be done in your template.
Whever you choose, it should be something based on Fluid - this will allow you to be extremely versatile and it makes the implementation less important than the template, which is quite good.
I myself am the creator of the "Fluid Powered TYPO3" framework (formerly known as FED) and would of course recommend that you take a look at what this framework can do for you - it's capable of great things, not the least of which is saving you a lot of time while at the same time allowing you to create even more consistent templating for pages and content - and even backend modules.
And we're always happy to help new users. We are currently in the process of improving our documentation, but you can already find many fully up-to-date guides on our Github page - https://github.com/FluidTYPO3 - the repository called "documentation" is the place we will store all the documentation.
You may want to have a look at http://fedext.net http://fluidtypo3.org - especially the "Tour of features" which tries to explain the point of Fluid Powered TYPO3 in as few words as possible. After that, the examples from the documentation will give you a much clearer picture of what Fluid Powered TYPO3 can do for you.
We focus on efficiency always - we've tried to do all the heavy lifting so that you really can just sit down and begin creating page templates. We took a lot of inspiration from TemplaVoila but there is no more re-mapping of content and things like this: when you change your templates, that change is immediately reflected, which makes it very nice to work with in iterations and do things like continuous delivery and -integration.
Hopefully this helps!
Cheers,
Claus aka. NamelessCoder
You could also argue, that adding special tags like
<f:section name="typo-content">
<div id="content">This is where the designer intended content to go</<div>
</f:section>
Could assist your designer while doing a redesign to know where you "mapped" your content elements to. This is neither the case with autoparser nor with TemplaVoila. So if the designer moves stuff around you probably get your templates back and they still work without any modifications.
The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.