Voyager Template Released

About 2 weeks ago, we announced the demo of Voyager - a multipurpose Joomla template while working at the same time with Vanilla template. Today, I am really happy to present you with the completion of our first collaboration efforts with ThemeButler, Voyager template is officially available on our apps store.

Read more

Hi folks! So today I’m really super excited to share something we’ve been testing heavily for a long time now. As of now… new Ionic apps will run on WKWebView…BY DEFAULT ????!

Ok, so let’s have a brief history lesson on why this is really important and also beneficial to you as a developer. It’s no secret that WKWebView has been out for some time now, but in that time, it’s had some issues, especially in hybrid app land. Many people have attempted to work around these issues, but it’s not until recently that we’ve gotten to a place where WKWebView can be reliably used in people’s apps, without broken functionality. This means we get incredible performance gains on iOS, reduced memory footprint, scroll events, and so much more by just using the new webview!

Adding WKWebView to your app

In order to add WKWebView, we need to add the plugin from the Ionic repository.

ionic cordova plugin add cordova-plugin-ionic-webview --save

If you already had the plugin installed, or were using a different version/fork, you’ll need to uninstall what you have first.

ionic cordova plugin rm cordova-plugin-WKWebView-engine

And that’s it! Once the plugin install is done, your next native build will include a faster, lighter, and more modern webview!

Important concerns

Since this is an entirely different webview than UIWebview, there are a few things to be aware of before making the change.

Data in localstorage/IndexDB will not be transferred to the new webview

This makes sense when you think about how this is essentially a new browser. If your data is stored using the SQLite plugin, by itself or in combination with @ionic/storage, this can be dealt with. Before pushing a new update with the webview, it might be worth taking the time to migrate that data over from web storage, to a native storage solution.

WKWebView enforces CORS

UIWebview, or the older webview in iOS, never actually enforced CORS, but WKWebView does and does not provide a way to disable it. To address this, you need to implement CORS correctly and add the following entry:

Origin: https://localhost:8080

IF this is not possible (you do not own the API), a workaround can be to use the native HTTP plugin, @ionic-native/http.

Native files not loading correctly

If you’re using the Camera plugin, or reading/writing from the devices file system, you might get a file path that looks something like

file:///some/really/long/path.png

The file:// portion of the URL must be removed in order for the resource to load correctly. You can do this manually, but as of ionic-angular@3.2.0, we provide a quick function that will handle this automatically.

import { normalizeURL } from 'ionic-angular';let path = cordova.file.dataDirectory;console.log('Original: ' + path);path = normalizeURL(path);console.log('Fixed: ' + path);

Cordova plugins also allow you to reference a file via the cdvfile:// protocol. This path is something that gets resolved in native code, so it cannot be used with normalizeURL.

Authentication services need to whitelist localhost

Since WKWebView uses a server under the hood, it will create a url for your app, localhost:8080, instead of serving things through file://. In doing this, authentication providers, like Firebase and Auth0, need to be told to allow this URL when it hits their API. There should be a section called “Allowed Origins” or “Authorized Domains”. This will make sure your app can authenticate correctly.

That’s it! We’ve put all of the notes here in our WKWebView docs, if you ever need to reference them again. We’re very excited about shipping WKWebView as default, and we hope to see many of you adopt it into your apps. I’d also like to thank so many of you for all your feedback, testing, and issue reporting during the early versions and releases of the plugin. Your feedback has only made the plugin even better! Thanks ????

Read more

Morgan Consulting Website for YOOtheme Pro

This September we are getting down to business with Morgan Consulting, our latest theme release. This template comes with a wrapped layout and a straight and tidy design. Its 11 pages are custom made to fit consulting, finance, legal or any kind of business websites. Morgan Consulting comes with the latest features of YOOtheme Pro and UIkit.


Morgan Consulting Style

This theme’s style reflects simple professionalism. Muted colors, subtle box shadows and clean typography allow your visitors to focus on your content. The wrapped page has been given a border that adds elegance to the theme’s look and reoccurs as spacing between images and sections throughout all pages. The deep, vivid blue and contrasting beige add color to the otherwise clean and monochrome style.

Style

Six new styles

Apart from the default style, Morgan Consulting features five more lovingly created color variations. All of these are available in the Style Library and can be applied to this or any other YOOtheme Pro website.

default
White Dove
White Green
White Orange
White Red
White Yellow

Wrapped layout

For the first time since the release of YOOtheme Pro we are using a wrapped layout. You can center the page or align it to the left. Add vertical padding to create the impression that the page is floating. All this is perfect to present content that is heavy on typography. Of course, you can also switch to a classical full with layout. The pages of Morgan Consulting will still work and look great.

Wrapped Layouts

Custom Icons

Morgan Consulting features 6 specially made icons that represent consulting, legal or similar services. Each was carefully crafted and can be used freely. For an example, take a look at the Services page.

Icons

Layouts & Topic

This theme comes with no less than 11 individual page layouts that cover the needs of business websites. The Home page introduces our company Morgan Consulting, gives a quick overview of their services and previews information from the other pages. The Services page goes into detail on the kinds of services offered and provides form downloads, an FAQ as well as contact information. The sub pages Tax Planning, Legal Advisory and Financial Services contain details, graphs, download tables and more about the respective services offered. Projects opens with a video background header and features a portfolio of cases in an original grid layout. It leads to the case study CWE Group that focuses on a particular project. Visitors can get to know the enterprise, employees and their clients on the Company page. You can find the vita of a single partner on the Peter Watson page. For a nice display of job offerings, check out the Careers page. Lastly, the Contact page provides contact information, a Google map and a newsletter form.

Frontpage
Services
Tax Planning
Legal Advisory
Financial Services
Projects
CWE Group
Company
Peter Watson
Careers
Contact

Free quality stock photos

Our new theme comes with 58 lovingly curated and free-to-use images and even two background videos. The gallery below shows you a few examples of what to expect in this month‘s package:

58 lovingly curated and free-to-use images

So, enjoy creating your next website with our Morgan Consulting theme and don’t forget to let us know what you think in the comments below.

  • Beautiful Morgan Consulting style
  • 11 page layouts
  • Great for business websites
  • Business and Consulting topic
  • 58 lovingly curated and free-to-use images and 2 videos
  • All these features are available in YOOtheme Pro

Joomla DemoWordPress DemoTry Morgan Consulting Layouts

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

Getting your Ionic apps updated for iOS 11 is easy. There are a few things you need to do and some steps are different depending on whether you’re using UIWebView or WKWebView.

Note: if you don’t push a new build then your apps will work the same as they always have. These changes are required for apps doing updates for iOS 11 using Xcode 9.

ionic-angular nightly

The latest nightly of ionic-angular introduces compatibility for the iPhone X to make sure that your app looks great on this new device. To install the latest nightly run 3.6.1-201709212234. These fixes for the iPhone X will also be in the next stable release of ionic-angular so no fear in updating when it comes out.

Viewport Fit

The first change is to make sure you update your viewport meta tag in your index.html to add the viewport-fit=cover field. This ensures the webview takes up the full size of the screen. The new default is to stick the webview in the new safe regions which is not what you want for Ionic/Cordova apps:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

This change has been made to the base starter project for Ionic 1.x and 2.x and above, so new projects are covered.

Learn more about new safe regions in iOS 11.

WKWebView

WKWebView will soon be the default for all Ionic apps running on iOS, before the release of the iPhone X. However, many are using it today.

This week we pushed a number of fixes to WKWebView fix padding issues, an issue with videos, and some smaller feature requests. Please update your plugin to the new version to try it.

If you aren’t using WKWebView yet, we suggest trying it today. We will be moving to make it the default given iPhone X and better support for safe regions. For installation instructions check out the readme here.

New Icon and Splash

Xcode needs a 1024×1024 sized icon for submission. ionic resources doesn’t yet generate this file, but you’ll need it for submission. We are working on adding this to the resources generator.

Additionally, to support iPhone X fullscreen, a new splashscreen image needs to be provided. For an existing project you will need to run npm install -g ionic to get the latest version of the cli, and then run ionic resources. This will generate the correct splashscreen image and reference it in your config.xml automatically for you. For new projects, you dont need to do anything, the correct setup is already built in.

cordova-plugin-statusbar

There is currently a PR open to update the cordova statusbar plugin but it has not been merged yet. We are expecting this to be merged very soon, but in the meantime you can install the plugin with that PR automatically by running the following commands:

rm -rf platformsrm -rf pluginsionic cordova plugin add https://github.com/jcesarmobile/cordova-plugin-statusbar\#patch-1ionic cordova emulate ios

If you follow the above instructions and are having problems deploying to a simulator or device, open the platforms/ios/myapp.xcodeproject and hit the play button in the top left corner Xcode.

Report an issue

Notice anything weird or out of place? Please file an issue and reference iOS 11 and this blog post: https://github.com/ionic-team/ionic/issues/new

Read more

YOOtheme Pro 1.9 released

This YOOtheme Pro release is another massive one! In the latest UIkit Beta 26 release we introduced the new Lightbox component. We are happy to tell you that this powerful feature is now also available in YOOtheme Pro for the Grid and Gallery elements. The 1.9 release brings other great improvements like a Modal mode for image and button elements, advanced child theme features and more.


Lightbox for Gallery and Grid element

The new lightbox option brings great image and video galleries to your sites. It allows you to open links, images or videos inside a lightbox by clicking an item from a gallery or grid and even to navigate between items from within the lightbox. There are three basic effects available to create smooth transitions: Slide, Fade and Scale. It doesn’t matter what device you use, the lightbox is fully responsive.

Lightbox

Modal for Image and Button element

You can now set the link target to Modal mode for any link inside a Button or Image element. Linked media files are displayed inside a modal without leaving the page. Regular links will show in an iframe inside the modal.

Modal

Enhanced link picker

The link picker has received an update. Apart from system links you can now also pick files, like a PDF for example. Both options can be found side by side as icons inside the link field in the element’s content tab.

Link Picker

Section Title

We have added the new title setting to sections within the Page Builder. Align the title to different positions on the right and left sides of your sections and rotate it 90 degrees clockwise or counterclockwise. This new option is great for pages with many content sections – for example one pager websites.

Section Title

Vertical alignment option

This new option aligns the section content vertically, if the section height is larger than the content itself. To use this option, make sure to actually set a section height, otherwise it will be exactly as high as its content.

Section Alignment

Mixed image orientation mode

Photographers in particular will be happy about this feature. It ensures that photo galleries with portrait as well as landscape format look good. Just enter width and height values. YOOtheme Pro automatically detects the format and aligns the images accordingly while preserving image proportions.

Gallery Mixed Image Orientation Mode

Enhanced overlay and gallery options

The Overlay and Gallery elements have been extended with more advanced options. You can now set a min height for images. This prevents images from becoming too small on mobile devices.The image will be cropped automatically, if necessary. Another addition is the option to choose only a hover image for gallery or overlay items. This means that no primary picture needs to be picked. So basically the gallery looks like the section background and only reveals its image content on hover. This produces a nice effect that we used in our latest theme release Jack Baker.

Gallery Overlay

Center option for toolbar

We've added a center option for the toolbar. All content inside that position will be centered when you activate it.

Centered Toolbar

Child Theme

Here is another big thing that is particularly interesting for all developers. A child theme allows to store custom code (like JavaScript, CSS, Less or layout files) in a separate theme folder so that they are preserved during YOOtheme Pro updates. Child themes have been supported for a while already. With the 1.9 release, you can now do even more:

Add custom elements

You can now add custom Builder elements using child themes. Add a /builder directory inside the child theme and every subfolder will be available as a new Builder element inside the browser. You can copy the default Builder elements in here as a starter or create completely new content elements.

Overwrite index.php

Along with existing layout files you could overwrite, you can now also place an index.php in your child theme to overwrite the main layout file of the theme.

Register custom modules

For the really advanced developers out there, we have added support to place a config.php inside your child theme. This allows you to register custom modules and therefore extend the theme with any kind of custom PHP code you want.

For detailed explanations of these advanced features, check out the new child theme documentation.

Wrapping up

This was the third huge update for YOOtheme Pro in a row. With the lightbox and advanced child theme features we have addressed some of the most frequent requests. We want to thank you for your feedback and ideas that we have been receiving. Obviously, we are constantly working on YOOtheme Pro. 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

© 2020 Extly, CB - All rights reserved.