In Shopify, it seems there are 2 areas to upload site images: Files (Settings -> Files) and Assets (Theme Editor -> Assets Folder). What's the difference here and why would you want to place images in one over the other?
Settings -> Files
These are the global files that can be accessed from any theme. You store different assets there, for example any image uploaded in the customize panel for the image picker field goes there. There are some other assets that goes there but this is the just of it, they are global assets and can be accessed from any theme even if you delete the theme from which you added the files via the customize panel.
In addition there is no API (as of now) that allows to communicate with this. Meaning that APPs can't upload files there directly.
Theme -> Assets
On another hand the theme assets are considered local for the specific theme, if you delete the theme those files are gone and you can't access them.
These files comes with the theme, so when you add a new theme to your store, the assets (css/js/images) comes with it.
There is an API that allows you to communicate with the Asset API so APPs can write and read from the theme asset folder.
Why would you use one instead of another
There is no specific rule here, you can use either of them for files, but there are a few good practices.
If your theme requires a specific functionality - add those files in the theme assets folder. For example CSS & JS files needs to go there. Why you ask?
There is a tool called ThemeKit that allows you to communicate with the theme and read/write files directly in the assets folder (and other places), this makes development and debugging a lot easier for developers. So if your css or js file is uploaded in the Settings -> Files there is no way to read/write it without downloading it and reuploading it there manually (which is a pain).
Since the theme assets comes with the theme when you download your theme and upload it to a different store it will just work. So in that sense please use the theme assets in those cases.
On another hand when you have specific customization options, some themes have the option to link to a SVG or MP4 files, since there is no way to add this, usually administrators upload such files in the Settings -> Files section and copy/paste the global link to the customize panel field.
So to put it simply theme assets are for the theme functionality, while settings files are for the customization assets.
When it comes to images, usually most of images should be manageable from the customize panel with an image_picker field, those will upload the image directly to the Settings -> Files without you doing anything.
But if you have for example a static image that the theme requires (for example the logo) and there is no customize option for it, then add that to the theme assets folder.
TL;DR
Theme assets are the files that are strictly tied to the theme in question while the Settings -> Files are the files that can be accessed from any theme.
When you are developing a theme write ALL files in the theme assets files in order to allow for the theme to be shared if you like or modified easily afterwards.
Use the Settings -> Files only when you need to link to a specific global asset or allow for the user to copy paste links in your customize settings of the theme.
#drip is correct here but I there's some info missing that I think could be helpful.
There is a size limit on themes (currently 50mb). So if your theme has many images and they are all in the assets folder then your theme might not upload if it breaks the threshold. Not to mention that you might not want to check all of those images into your theme repo.
This is where you could use the Settings -> Files section to store your files. Then you can reference them in your theme using the file_image_url tag referenced here https://shopify.dev/api/liquid/filters/url-filters#file_img_url
Also there is now an API for CRUD on these assets
https://shopify.dev/api/admin-graphql/2022-04/mutations/filecreate
I hope that helps future info fetchers.
Related
So I purchased a prestashop theme from TemplateMonster and the zip file is 324MB and when I try to upload the file in admin, I get an error that the file is too large. I know I can change php settings and maybe get it to work, but I figured I would just ftp it to my server, but filezilla drops the connection when I try to upload it. First, before I change php settings, will it work with such a large file? Also, when I look inside the zip file, I see a .sql file, a psd.zip, readme_en.zip, and 2 other zip files. Do all these files need to be uploaded? Just asking because I'm not sure why the PSD.zip file would need to be included.
413 Request Entity Too Large
Probably the main theme package contains additional assets, but in order to have your theme installed in Prestashop you just need the "main" ZIP theme
(the one that once unzipped contain folders like /assets /templates /modules etc.)
Then you can choose to upload it from your backoffice (you need to set the PHP max_upload_filesize accordingly) or copy the zip directly in your /themes directory and choose the "Import with FTP" option for the "Themes & Logo > Theme > Add new theme" backoffice page.
If you're having trouble with that method too, you can use the "Import from the web"
method by uploading your ZIP in a reachable public URL
I am a bit new to Vue.js. I am doing a social media application that allows users to upload and share images with others. I store my images in src/assets folder during development. However, when I build the project, all images are put in the dist folder. Therefore, what can I do to enable users to still upload images on production? Do I create the assets directory in the dist folder?
I have since tried different ways, including storing images on the backend. In dooing this, I reference the backend path relatively, using, for example, ../../../backend/public/assets..., and it works on development. However, when I build, the images that existed in the backend directory at the time of building are visible, however, whenever I try uploading more on production to the ../../../backend/public/assets... directory, they are uploaded successfully but are not visible (that is on production). I get an error that Cannot find module './image_name.image_extension'.
What am I doing wrong?
I have seen similar questions like this but there was no answer.
You must set your public path and change your way!!
first step to do is creating vue.config.js in your root directory, if you want to know more details, read this: https://cli.vuejs.org/config/
for example, I define prefix path for my files:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/",
};
remember, It's better if you use "#" to define your paths.
for example, if you want to load a image which located in src/assets/files/img/myImage.png, you can use #/assets/files/img/myImage.png in template section for binding or script section of your .vue files!
It always help you to find correct path of your files.
and finally your way is not standard because "src/assets/..." will used for compiled scripts and styles and also your files which you want to use on your UI layout like static images. so you have to use "public/assets/..." directory to save your file, then you will see everything is going well for you.
if you have a more question or stuck solving this problem again, I'm here to fix your issues.
Instead of putting all files in a place in the asset folder, I want to use CSS files in CSS folder, JS files in js folder and images in images folder. Then Include them in the asset folder, so that I can maintain the files easily.
I know Shopify doesn't support any sub-directories within the asset folder. But is there any trick to do that?
According to a Shopify employee. This is currently not possible and the reason is due to a limitation of the CDN they use. See that post here.
Regardless, it's not good practice to have source files in the assets folder. Look into the Shopify Slate tool. It's a theme scaffold and command line interface that helps keep your project structure organized.
You can organize your assets (both CSS and JavaScript) as source files with directory structures in a manner similar to this:
styles/
global/
modules/
settings
tools/
vendor/
The command line tool takes care of compiling all the source files into one CSS/JS file! As a consequence, you don't need to worry about including the respective files with <link> or <script> tags because it's all taken care of already!
Unfortunately, this is not something currently supported by Shopify (As of 14/Sept/2017)
I tried making sub-folders both at the root of my dev theme and in the asset folder of my dev theme in a few different ways, including through Shopify's ThemeKit editor, but Shopify did not let me create the folder.
Attempting to create sub-folders in the normal theme editor in the store (by naming an asset subfolder/filename) generates the error message: Theme files may not be stored in subfolders
Shopify's normal theme editor groups files by types so that they appear close together, and apparently that's as much as Shopify is giving us right now.
I would like to know how to change the default index.html file. I have created a classic project (for mobile web). In that I have created a .css file which includes my custom styles. Now I would like to include this file in index.html, so that those styles will apply on my application. But haven't seen the index.html file. After build, I am able to see this file in build folder. May I know how to update the index.html file?
Thanks in Advance,
Swathi.
Appcelerator uses XML for views, TSS for styling, and JS for controllers. Then Titanium compiles your source code into the native API (HTML for mobile web). Because you can also compile for iOS, Android, and Windows, your output is converted appropriately to your build directory. When you create a new Alloy project, you will find the default index.xml, index.tss, and index.js in the app views, styles, and controllers directories respectively. So to control index.html, edit these 3 index.* files.
I came to notice that there is one folder called assets in the root folder.To know more about it,I went through this link.Now I want to know adding some css in these files is good or shall I add css to to the main.css file inside css folder.
The asset folder is automatically generated by Yii based upon your environment so best avoid putting your CSS, images etc inside here. It also best to not commit these folders and files into SVN as they are automatically generated and folder names will differ from your qa/staging/live site to your local site.
There are some good reasons to use Yii's assets.
it prevents naming conflicts in css and js files
it allows you to keep CSS and JS files under your document-root but outside of your web-root (for easier version control)
it allows to easily switch between sets of CSS & JS files, rather than having to deal with each file individually (suppose the system admin needs to revert back to a previous version).
it allows you to publish assets (images, JS & CS) to several websites hosted on the same server.
Please check here or there for more details.
Well, when i started my first Yii project, i also put my CSS and JS files in assets. It works but then i found that its not just the right way. Its better to make a separate directory for your CSS file(s). Also there are some auto generated files in assets, so to avoid mix-up with those and your i prefer to make it separate. Hope you got the point.