Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Requesting new iPhone 14 series skins #29

Closed
bikee1235 opened this issue Sep 17, 2022 · 7 comments · Fixed by #31
Closed

Requesting new iPhone 14 series skins #29

bikee1235 opened this issue Sep 17, 2022 · 7 comments · Fixed by #31

Comments

@bikee1235
Copy link

Hi
Can you please update latest iPhone skins

@Swalden
Copy link

Swalden commented Oct 26, 2022

Looks like we are waiting on facebook to update their frames as that is what frameit uses: https://design.facebook.com/toolsandresources/devices/

@robinjanke
Copy link

Hi @bikee1235 please have a look at my PR here:
#30

@jeremierichard
Copy link

Is there someone to merge the #31 PR?

@Starsky89
Copy link

Please add the iPhone 14 series. Facebook has them already. I really need them.

@Peetee06
Copy link

Peetee06 commented Oct 5, 2023

I set up a workaround and now have the latest frames including iPhone 14 and Samsung Galaxy S21+ lineup:

  1. Use gem which fastlane or sudo gem which fastlane to locate your fastlane installation (for me it looks like this: /Users/petertrost/.rvm/gems/ruby-3.3.0-preview2/gems/fastlane-2.216.0/fastlane/lib/fastlane.rb
  2. Navigate to the path up to and including fastlane-VERSION (for me cd /Users/petertrost/.rvm/gems/ruby-3.3.0-preview2/gems/fastlane-2.216.0)
  3. From there go to -> frameit -> lib -> frameit and open frame_downloader.rb in a text editor
  4. Replace the HOST_URL at the top with: https://peetee06.github.io/frameit-frames/. It should look like this then:
require 'fastlane_core/module'

require_relative 'module'

module Frameit
  class FrameDownloader
    HOST_URL = "https://peetee06.github.io/frameit-frames/"

  1. Run fastlane frameit to frame your screenshots as usual.

The repo contains the latest frames as of October 4th 2023. Including Samsung Galaxy S21+ and the iPhone 14 lineup.

Edit 2: It is more complex than initially expected. Not only did some of the naming change as mentioned below, but also the images for iPhone 14 lineup are not pixel accurate size leading to broken framing.

If you don't want to use my repo, you can also set this up with your own repo:

  1. fork the frameit-frames repo yourself and update the frames in it using these instructions
  2. After you committed and pushed the latest frames to your repo, you can update the HOST_URL as described above to the gh pages that was automatically deployed after pushing to the forked repo. The URL should look like this: https://YOUR_GITHUB_NAME.github.io/frameit-frames/

Edit:
For some reason some of the newer frames now have hyphens between the device name and its color. E.g. iPhone 14 – Midnight.png. To fix this you would need to change the sanitize_filename method in the Rakefile in fastlane/frameit/frames_generator in the fastlane repo to the following:

# Facebook's device naming is inconsistent. This method fixes the file names.
def sanitize_filename(filename)
  perform_ipad_renaming(filename
      .gsub('Grey', 'Gray') # some Apple devices have "Grey" instead of "Gray" color -> unify
      .gsub(' - Portrait', '') # iPads Pro include Portrait and Landscape - we just need Portrait; Landscape filtered via DEVICES_TO_SKIP
      .gsub(' - ', ' ') # Google Pixel device names are separated from their colors by a dash -> remove
      .gsub(' — ', ' ') # Some Apple devices have a long dash -> replace
      .gsub(' – ', ' ') # Some Apple devices have a special dash -> replace)
      .gsub('Note10', 'Note 10') # Samsung Galaxy Note 10 is missing a space in "Note10"
      .gsub('Mi Mix Alpha Front', 'Mi Mix Alpha')) # Xiaomi Mi Mix Alpha contains the words "Front", "Back" and "Side" => back and side are filtered via DEVICES_TO_SKIP, "Front" removed from the name here
end

You also need to resize the images for the iPhone 14 lineup because they are not pixel accurate leading to images not being framed correctly. To do so I used the screen pixel width in the below code (e.g. 1170 for iPhone 14) to calculate how I need to resize the images. Make sure the screen size in the image is equal to this number. Do not confuse them width the image width because that is larger as it includes the phone frame as well.

To actually make frameit be able to add the correct frames for the iPhone 14 lineup, I also needed to add the following lines to the file device_types.rb in the frameit directory. Make sure you exclude "Apple" here because for some reason the frame png files for iPhone 14 don't include "Apple" in their name:

    IPHONE_14 ||= Frameit::Device.new('iphone-14', 'iPhone 14', 14, [[2532, 1170], [1170, 2532]], 460, Color::MIDNIGHT, Platform::IOS)
    IPHONE_14_PLUS ||= Frameit::Device.new('iphone-14-plus', 'iPhone 14 Plus', 14, [[2778, 1284], [1284, 2778]], 458, Color::MIDNIGHT, Platform::IOS)
    IPHONE_14_PRO ||= Frameit::Device.new('iphone-14-pro', 'iPhone 14 Pro', 14, [[2556, 1179], [1179, 2556]], 460, Color::MIDNIGHT, Platform::IOS)
    IPHONE_14_PRO_MAX ||= Frameit::Device.new('iphone-14-pro-max', 'iPhone 14 Pro Max', 14, [[2796, 1290], [1290, 2796]], 460, Color::MIDNIGHT, Platform::IOS)

@josetaykus
Copy link

Is there someone to merge the #31 PR?

more than a year without answers, is fastlane dead? @joshdholtz

@palla89
Copy link

palla89 commented Dec 10, 2024

Hi, there are now iPhone 15 and 16 lineup, can we have them too in some way? :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants