YOOtheme Pro 1.7 released

This YOOtheme Pro release is a really huge one — like two in one! The much anticipated Builder Module for Joomla and the Builder Widget for WordPress have arrived! But that‘s not all! Another giant feature is the new Parallax effect! From now on you can animate nearly every element in your layout, like text, images, section backgrounds as well as grids and galleries. More innovations of the latest YOOtheme Pro version are the Newsletter and the Popover element. And there is still more. Time to get excited!


The Builder module and widget

YOOtheme Pro now comes with an additional Joomla module and a WordPress widget which gives you the full power of the layout builder. By publishing this module/widget on the top or bottom positions, you can create sophisticated layouts with unlimited sections above and below the main content.

The Builder Module and Widget

Collapsing layouts

In YOOtheme Pro 1.7, the Module element (Joomla) or Widget element (WordPress) lets the layout column collapse, if the selected module is not published on a specific page or if the user does not have the permission to see it. This prevents empty areas on your page when a module is not visible on the current page and makes builder layouts really flexible when combined with Joomla modules and WordPress widgets.Collapsing layouts

Position and Area elements

There is also a new Position element (Joomla) and a new Area element (WordPress) which allows you to place a complete Joomla module position (or a WordPress widget area respectively) inside your builder layout. If no module is published on a position, the layout column will collapse. This is very powerful — you can now create the module position layout of the theme yourself.

Positition and Area Elements

All these new additions solve a number of issues. For example, you can have multiple sections with complex layouts above and below the main content, the sidebar position can now show up within a builder page, you can have different footers on different pages, multi-lingual footers are now possible and much more.

The deeper integration of Joomla modules and WordPress widgets is a start to make YOOtheme Pro well suited for complex websites, like news portals and more. This is just the beginning and we are really excited about what's next to come. We also reworked the module documentation with info graphics and video tutorials to get you started.

Parallax for elements

The popular Parallax feature is part of the latest UIkit release and can be seen in action in our June theme Juno. There are no limits to your creativity in combination with this effect. You can animate your content by entering the user-friendly interface with range pickers. Give your website a subtle 3D effect and highlight certain elements. Just play around and let headlines, text and images fly with the Parallax effect.

Parallax for elements

Background image parallax for sections

The new YOOtheme Pro release also includes the Parallax feature for background images of sections in the page builder. It makes it possible to animate the background horizontally or vertically and even works when the background image is set to auto, cover or contain.

Background Image Parallax for sections

Parallax mode for grid and gallery element

Additionally, the Parallax effect is available for the Grid and Gallery elements. This is an eye-catcher for every website and creates a smooth effect while scrolling.

Parallax mode for grid and gallery element

Newsletter element

Newsletters make it easy to keep your customers up to date on new products, projects or sales discounts. Our Newsletter element allows you to collect news subscribers for your Mailchimp or Campaign Monitor account. You have the choice between three layouts and can show or hide the name fields.

Newsletter element

Popover element

Use popovers on visual elements such as the product presentations in our June theme. You can position the marker wherever you want and the dropdown with detailed information will appear by hovering or clicking on the marker. You can place it to the top, bottom, left and right.

Popover element

Width and height options for the logo

Thanks to the new advanced logo options you are able to set height and width for logos in YOOtheme Pro. The image will be resized and cropped automatically. Additional images for high resolution displays will be generated and set via the srcset attribute.

More additions

These are the main features of YOOtheme Pro 1.7, but there is even more. For example, you can now render the headline element as a div, which is useful to remove semantic meaning, and you can also add a link to the headline. Furthermore, there is a new link style called text available across all elements in the builder. And last but not least: From now on the Media Picker will remember your last browsed folder upon opening to improve your workflow.

We are really excited about YOOtheme Pro 1.7 and hope you are too! Stay tuned and give us your feedback in the comments below.

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

This is a guest post from Yann Braga. Yann recently won our Ionic Jedi Hackster contest, so we wanted to bring him on as a guest blogger to share his story with us…

Greetings, folks! My name is Yann Braga and I’m a full stack developer based in Fortaleza, Brazil.

On a computer, in a galaxy not so far away…

On May 4th, 2017 Ionic invited developers to participate in a remote hackathon to Become an Ionic Jedi Hackster. Of course I had to contribute to this event. We were given 48 hours to create a Star Wars themed app using the latest Ionic and the newly released Ionic CLI v3.

Feel the force flow through you

To be honest, I’m not a huge Star Wars fan, but the event increased my interest and inspired the idea to create a simple app providing users with: Star Wars movie information, characters appearing in each film, film trailers, film metadata, award nominations, and other data available from SWAPI.

The Features of the App

  • Animated(ish) splash screen
  • Custom icons
  • Custom side menu transition
  • Switching sides (app theme)
  • Fetching data
  • Sound effects and Jedi Mode
  • Overlaying View with Trivia
  • Firebase and The Force map
  • Publish as PWA

Use the source

Ionic docs are amazing, sometimes it is easier to understand how to achieve what you need to accomplish with by viewing the source code instead.

I wanted the side menu transition to have a more custom effect. So I opened the Ionic menu component types, and found this code controlling the default side menu slide animation:

class MenuRevealType extends MenuType {  constructor(menu: Menu, plt: Platform) {    super(plt);    const openedX = (menu.width() * (menu.isRightSide ? -1 : 1)) + 'px';    const contentOpen = new Animation(plt, menu.getContentElement());    contentOpen.fromTo('translateX', '0px', openedX);    this.ani.add(contentOpen);  }}MenuController.registerType('reveal', MenuRevealType);

It’s nice to see what you can do with a few lines of code. With some help from EbilPanda, I was able to adapt that approach and create this very elegant custom effect:

custom sidemenu slide effect

Fetching the App Data

To improve load times for the data and to enable offline support, I used Ionic Cache. It is a module that handles request caching and uses Ionic Storage (thus supporting IndexedDB, SQLite and WebSQL). Using this allowed me to enhance user experience and reduce the app’s load time by only bootstrapping data required by initial screens, and then later loaded on-demand.

To populate the movie data, I wrote a simple web scraper in node that accesses the IMDb URL of a specific movie, then used Cheerio to read the DOM elements I needed and extract some data.

In case you’re unfamiliar, a web scraper is backend code that requests a web page and extracts the specified data. Feel free to use my web scraper project for your reference. It was quite fun writing it! ????

Firebase and The Force map

Developing this feature excited me most. My goal was to display a map of all the app users and the side of “The Force” they indicated while using the app.

come to the dark side

To develop this I:

  • Created a project on firebase and integrated into the app
  • On the maps page, request and register the user information (name and location)
  • Fetch data from Firebase
  • Allow each user to indicate their preference of the Force, either “Light” or “Dark”

By switching sides, the user’s avatar on the map changes accordingly, and there’s an animated lightsaber duel indicating how many users choose each side. Here’s a simulation I created of multiple people registering at the same time:
Force map demo

Converting to a PWA (Progressive Web App)

You can imagine my surprise when my app won the competition and I became the first Ionic Jedi Hackster! I was so excited that I decided to continue development of my application. I thought a great starting place would be to convert it to a Progressive Web App (PWA).

If you’re unfamiliar, a Progressive Web App is a web app that behaves just like a native app. This simplifies how users install your app because they don’t have to use an app store. They simply open a url and boom, it works!

Thankfully, Ionic supports PWA right out of the box! It offers a service worker and a manifest file by default. The service worker is a script that enables PWA functionalities such as: push notifications, background sync, offline support and many more. The manifest is processed by the browser and includes metadata such as: name, theme, icon, and enables the browser to add the app to the home screen of the mobile device for users to open it at a later time, just like native app shortcuts!

The project uses sw-toolbox by the Google Chrome Team, you can learn more about sw-toolbox here.

How do I create a production version of my app as PWA?

Plenty of people have asked this question on the Ionic developer community. The answer is simple:

just npm run ionic:build --prod then deploy the generated /www folder, and it’s done!

How do I deploy a PWA?

There are a couple of quick ways you to deploy your PWA:

  1. Host the app on your private server
  2. Use Firebase hosting services

Firebase offers free hosting, which makes interesting if you are just trying stuff out. Using Firebase developers can ship to production in minutes. Here is a great step by step guide.

You can view the live PWA of my winning hackathon app StarWarnic here, you can also use Ionic View and supply ID 6e8bd472, or you can build the app from source.

May the force be with you…always

I was really flattered to have won the challenge, and I’m grateful to have the opportunity to share my experience here as a guest blogger. Ionic is an amazing and versatile platform that has opened opportunities for many people. I highly recommend developers to get started with Ionic.

Wrapping up, I thought I would share how Ionic has improved my life as a developer:

I was introduced to Ionic last September at a local Ionic 2 Bootcamp I attended. The event was half a day long and covered the basics of Ionic 2(still in beta!) and Firebase. Instantly I admired the framework, and after the event I immersed myself in Ionic and the developer community.

Investing my time becoming an Ionic developer has been one of my best decisions. Knowing Ionic has allowed me to meet many wonderful developers, been a gateway into open source development, and has given me more than a job…Ionic has fueled my career!

Looking back, when I first started participating on Ionic’s worldwide slack community I would only ask questions, but now I’m active in the community and really enjoy helping so many people and being a contributing member of the Ionic Developer Community.

If you are interested in knowing more about my project, or if you have questions or want to chat, feel free to hit me up on Ionic Worldwide Slack or contact me through my website.

Read more

Security Update For EasySocial 2.0.19

It has always been our priority in ensuring that all our products are safe from any exploits. Today, while the team are in the midst of working on EasyArticles and EasySocial 2.1, a security analyst provided us with some insights on the way EXIF information was being processed in EasySocial which may lead to an unwanted xss attack. 

This possible mode of attack could affect sites that are processing EXIF metadata on photos uploaded on the site. If your site doesn't have EXIF installed or if you have already disabled this feature, you will not be affected but you are advised to update to the latest release as this release addresses the way EXIF metadata are being processed and on top of that, we have also included some bug fixes and minor enhancements into this update as well.


Update Soon

If you are using any versions prior to 2.0.19, kindly update to the latest version as soon as you can. Should you need any assistance with updating to the latest version, get in touch with us on our forums and our support guys will be there to assist you with the update. Please also refer to the link below for the changes and fixes applied in this update. 



Subscription Expired?

If you have an expired EasySocial license, you could use the coupon code SOCIAL25 to obtain 25% discount for your renewals. Please note that this coupon code valids till June 4th, 2017. 


Credits

All credits goes to Pedro (@tunelko) for discovering this loophole. 


Patch Files

We understand that not every customer is running on EasySocial 2.x or is not ready to upgrade their site yet. Therefore we urge you to download the patch file below for prior releases and patch it to your site. There is only a single file involved, you just need to extract the zip file and upload the photo.php file into the folder /administrator/components/com_easysocial/tables and you are good to go.


Read more

Juno Website for YOOtheme Pro

Showtime for this month‘s release: Juno! Our June 2017 theme for Joomla and WordPress presents interior, architecture and furniture related content in 7 well-matched layouts. It comes with a bunch of new features from the latest YOOtheme Pro version 1.7, like the much anticipated Parallax effect as well as the Popover and Newsletter elements. All these are perfectly integrated into the light and modern style of Juno. The tiled layout and use of pastel colors make this release stand out.


Juno Style

Obviously, this theme comes with its own special style. Juno is characterized by a combination of pastel colored tiles, large background typography and a parallax scrolling effect on content elements. Interactive details, like sliding button animations, provide a great user experience. The bright, minimalistic and clean layout is perfect for presenting your company’s services or products.

Style

Parallax

The popular parallax feature from the latest UIkit release plays a leading role in this month’s theme. In Juno, content elements as well as backgrounds are animated with this dynamic effect.

Parallax

Popover element

In Juno we used the new Popover element to create showrooms for product presentations. You can position the marker wherever you want and the dropdown gives detailed information, for instance about products or projects.

Popover Element

Column Tiles

With this theme we decided to put particular emphasis on styling columns as tiles. Since YOOtheme Pro 1.4 you could build layout boxes with different background styles, just like cards, but without outside shadows. That way, you can easily create split-screen layouts by placing two columns seamlessly next to each other. Any element can be placed inside each of these tiles.

Tiles

Button effect

Juno also comes with a pretty nice button effect. Just hover over one button and its background color will slide over smoothly.

Button Effect

Newsletter element

This theme presents a much requested feature: The Newsletter element! From now on it will be a lot easier to keep your customers up to date about new products, projects or sales discounts.

Newsletter

Layouts & Topic

Juno features 7 new layouts dedicated to interior and architecture websites. The Home page provides previews of all page topics. The Products page provides an overview of the available furniture with a zipper parallax effect. The Products case study gives customers detailed information on a single product, including an introduction to the product’s designer, images with technical specs and a gallery of related products. The About page introduces team members in a grid layout. Furthermore, customers can find contact details, customer feedback and information about the company’s locations. The Projects page highlights some of the commissions Juno have executed for different clients. A Projects case study presents the story and behind scenes impressions of a single project. On the Pricing page you will find service packages, an ordering process description and the FAQ.

Frontpage
Products
Products case study
Projects
Projects case study
About
Pricing
Pricing

What's next?

Next week we will post a comprehensive article presenting the new features of the YOOtheme Pro 1.7 release. This blog post will provide more detailed information about the Parallax feature as well as the Popover and Newsletter elements. Of course, we will keep adding more features in the future. Apart from all this, you can look forward to a another much anticipated addition: The Module Builder! Finally it will be possible to position content above or below blog content.

More about all this in our upcoming post on YOOtheme Pro 1.7. Until then have fun exploring our theme Juno and feel free to give us your feedback in the comments below.

  • Beautiful Juno style
  • 7 page layouts
  • Great for business websites
  • Interior, architecture and furniture topic
  • 51 lovingly curated and free-to-use images
  • All these features are available in YOOtheme Pro

Joomla DemoWordPress Demo

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

Introducing EasyArticles

We have been trying to refine the process of authoring in Joomla from a day to day basis and one of the most painful process is editing articles on the front end with proper workflows. Although the ACL in Joomla is pretty robust, it's still isn't suitable for a day to day authoring and publishing process. 


EasyArticles approach is to introduce article management and minimalist user interface right on the front end. It will be suitable for blogs, news, or any other content generation that requires a more robust workflow, beautiful composing interface and awesome features. We have combined a decade worth of experience from when we were working with EasyBlog and we were trying to revolutionize the way articles are created.

How EasyArticles Came About

Initially, it started off as an idea for EasyBlog to store it's data into Joomla Articles. As we were working on that, we realize that there were just too many features in EasyBlog that don't exist in the standard articles extension on Joomla. We do not want to end up hacking or modifying any core bits of Joomla article.

With EasyArticles, we have combined a decade's worth of the best composing experience and workflow which we learnt from EasyBlog. It allows site owner who doesn't need a full fledged blog to also be able to enjoy the goodies that are offered in EasyBlog.

Here are some of the cool features that will be rolled out on the initial release of EasyArticles.


​Great Authoring workflow

If you are authoring most of the articles by yourself, then Joomla articles would be a match made in heaven. For smaller, medium sized or even larger teams, the authoring workflow is pain to work with.

With the authoring workflow in EasyArticles, moderating or managing these articles would be convenient and painless. 


EasyArticles Dashboard
Birds-eye View of Everything


Beautiful Composer

You don't have to be a designer to create great content. This is one of the most important aspects in authoring that many neglected, thinking that their writers are designers or programmers that understand html codes. Writers themselves are not designers and we should not be expecting them to design the article or programmatically inject html codes.
We have heard this many times but it is important to remember that Content Is King. Writers should do what they do best, which is to write or draft great articles so that the site would follow the approach where content is being prioritized over thinking about where to place images, videos or anything else related to designing.
EasyArticles Composing Article
Composing Article
EasyArticles Publishing Article
Publishing Article


Media Manager

EasyArticles Media Manager
Media Manager

EasyArticles also comes with the same great media manager that is included in EasyBlog without the other complexity that comes with the blogging system.


In fact, while I am drafting this post with EasyBlog (thankfully!), I couldn't imagine how would anyone would use the stock media manager in Joomla! to compose articles. Certainly, there are tons of great media managers out there but they don't feel as native as composing with the same editor.


Front-end Everything

Have you ever tried to request your writers to manage articles on the front end because you don't want them to worry about how they could access the administration area? I believe most of you tried it and eventually just chose to compose from the administration area.
With EasyArticles, we have streamlined the management of your articles and categories into the front end allowing a more blissful experience while managing all this information. 
EasyArticles Article Management
Articles Management
image
Create Categories
image
Category Creation


Subscriptions & Notifications

Users on the site can subscribe and be notified by email in the event a new article is created or modified. This also includes push notifications!


Post Templates

EasyArticles Post Templates
Post Templates

One of the most used and loved feature in EasyBlog was the ease of re-using post templates without having to draft everything from scratch. We have also invented something similar for EasyArticles but with a more robust templating structure.


Not Another Pagebuilder

EasyArticles is not another page builder and it never will be a page builder. There are a ton of page builders available for Joomla already and there is no point reinventing the wheel again.
EasyArticles approach is to simplify your day to day authoring workflow and publishing right from the front end.

Compatibility With Joomla Editors

In order to achieve the minimalistic design in EasyArticles, it will include a built-in editor out of the box. It will also be able to work out of the box with most and if not all of your favorite Joomla editors.

Pricing

The price of EasyArticles will be disclosed when the alpha release is available. Having said that, EasyArticles will be included in all of our bundles. 

Yep, it will be FREE to users with an active bundle.


EasyBlog Progress

Rest assured that EasyBlog will still be actively maintained and developed by the team. EasyBlog has tons of features of a full blog and it should be kept that way. We have great ideas coming along with EasyBlog 5.2, including a pretty cool collaboration tool =)


To Wrap Up ...

Joomla! is definitely a great Content Management System and the addition of EasyArticles isn't to replace Joomla articles but rather to complement it. We have loads to add into EasyArticles as we move forward :)

What do you think? Share your thoughts, suggestions, criticism on the comment form below. The team and I would love to hear your thoughts!


Read more

© 2020 Extly, CB - All rights reserved.