Meteor mobile-config.js launchScreens - meteor

I'm creating the splash images for my app but I've got some questions:
Can I create of all them at once? I've seen some repos for this but
there are not updated with new sizes (e.g 2048x1536)
Would be possible to use the same image for different sizes?
My phone is 1920x1080 but there is no splash screen size for that so it takes one and applies a disproportionate image. If I've got
text on it it looks really badly.
What happens with the rest of images when I build? Meteor removes the rest? Are located in resources/splash.
Could be possible to use a html with css page?
Thanks in advance!

Next time you should consider splitting your questions into independent posts.
Creating splash images: if your image is simple enough, indeed you have many scripts that can generate the different sizes automatically. I am sure you can customize them to fit your sizes.
Use the same image for different sizes: in general, that would mean your image will be stretched by the device to fill the screen. On Android, you can define a 9-patch PNG that will tell the device which pixels can be stretched, so that some part(s) of your image is not deformed.
Deformed image for 1920x1080 screen: depending on the pixel density, there should very probably be a placeholder for that.
Storage of image versions: by default, all versions (i.e. sizes) are packaged within your APK / APP, so that whatever the device needs will be available once user has downloaded the app.
Using an HTML+CSS page for splash screen: in general, no, but it depends on what you want to do with your splash screen. Meteor calls it "launch screen", because it is the first thing it displays while the app is loading / "launching". In particular, the WebView and local server may not be ready yet, and cannot serve any HTML/CSS. That is why you have to use a plain image, which is passed to a very simple activity while the app is loading. But some people also use a "waiting screen" between some parts of their app. In that case, your WebView and local server are already loaded, and you can simply use whatever you want.
Update:
For Android, if 9-patch PNG does not fit your need, you can also try to request Cordova's splashscreen plugin to maintain the aspect ratio of your image:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/#preferences
<preference name="SplashMaintainAspectRatio" value="true" />
"SplashMaintainAspectRatio" preference is optional. If set to true, splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios.
In Meteor, you would use App.setPreference in mobile-config.js:
App.setPreference("SplashMaintainAspectRatio", true, "android");

Related

AMP story disable fullscreen mode

I am creating an AMP story for my project with fullHD screens. I am trying to disable the "fullscreen mode" which is automatically turned on when the browser has some specific resolution. I need to get only fullscreen story without the background and buttons etc. I use screen 9:16 (1080x1920).
Example:
https://people.com/amp-stories/royal-a-to-z/
Screenshots:
Right - https://drive.google.com/file/d/1PZmG1HOfC7TkwEgD-xTeWfalI-kkaVaD/view?usp=sharing
Wrong - https://drive.google.com/file/d/128Qcg4cl4H2pUC0TxYvPG0vg_PIXPJML/view?usp=sharing
It is not currently possible to control which experience is used from the source code of the story; these default experiences are baked into the JavaScript of amp-story. If you are hoping to use this in e.g. a kiosk environment where you are looking to modify the behavior in a single browser window, you can increase your browser's zoom level to accommodate the larger screen resolution, and the desktop experience should not get triggered.

Should I resize the images at server side or use css for the MVC Application

I develop a MVC + Angular js Ecommerce site with huge number of images been loaded. I have a few queries regarding the performance of the site.
There is huge number of images been loaded. Shall I create thumbnails of different size needs and then show them or should i resize with css or any other technique.
How can i cache the images for the site.
If you care about performance and load times, you should create thumbnails server side. Css will only scale the image to your desired width but will still load the bigger one.
I suggest to make your thumbnails and then use those different image sizes for your different needs (smaller ones for product lists, bigger ones for product pages...).
You could even make use of different image src's for the same place toggling them depending on device width so you go even further improving load times on mobile devices. You could achieve this via ng-src or even with css with srcset

Google's page speed test thinks I should optimize my images by more than the image size currently is

I'm really confused with this one as it seems impossible to do.
When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:
Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).
The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.
I'm using jquery unveil and using the retina function on it too could that be the problem?
Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.
Really confused, any help would be appreciated.
Thanks
There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.
Images are optimized for different platforms (Desktop and Mobile)
Images are optimized for physical size.
Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.
Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.
You can deal with this on few ways:
Media Query (note that you have to use background image in this case)
Srssets
JS
Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)
Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!

Mediawiki Images no resize

How can I force mediawiki to disable resizing and use the original size of my image? My main problem is that I'm uploading small parts of screenshots. If I don't use the original size then they look awful. (Imagine a 237px wide image resized to 400px....) But I don't see any option for that.
http://www.mediawiki.org/wiki/Help:Images#Size_and_frame
By simply using the image name, it will fit the image to screen which is really bad! For example, a 300px wide screenshot cutout looks awful on a full hd monitor... You could say that the image may be too large for the users' screen but in my particular case that is not the case. I'll always be using small images (300px and smaller) and the users will always watch these pages on desktop monitors.
I'm sorry I was very dump. If I don't use any option then it is displayed in its original size. I was mistaken because somebody has changed the zoom level of my browser, but I did not realize this because the monitor resolution was so high...

INSTAPRESS WP PLUGIN - CSS Image Sizing on Mobile and Desktop alignment

I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.

Resources