Location of specific CSS file Magento 2 - magento

I'm debugging an issue in Magento 2 and I'm looking for a specific CSS file. I logged the file name of the last file somewere in the Emogrifier.php and this is supposed to be the file:
/static/version1497256942/frontend/Speak/porto/nl_NL/css/email-fonts.css
Now, I cannot find this file anywere. I only can find the place where it's imported: _email-extend.less in that same Porto theme folder.
This is what that looks like: #import url("#{baseUrl}css/email-fonts.css");
When I go to the URL it finds that file in the static content. But I cannot find that file with that specific name anywere...

If Magento2 has been installed via composer then you are looking for '/vendor/magento/theme-frontend-blank/web/css/email-fonts.less' (If Magento2 has been installed from the github repository, then '/app/design/frontend/Magento/blank/web/css/email-fonts.less').
Grunt converts all less files into css after the static content deployment.

Related

File Manager for TinyMCE 5 Not showing uploaded images,404 image not found,but it exists in the folder - Laravel

So,i've been having problems with integrating file manager to TinyMCE 5,uploading images into a specified folder using the file manager works without any issues,that is also true for deleting the images,but the problem is when you try to use the images,they appear as blank and if you open a console you will see error 404 messages that images don't exist
The solution that worked for me is that i went to .env file which is inside of your laravel project and then changed this line of code which is usually located in the first few lines of the file:
APP_URL=http://localhost
to this
APP_URL=http://127.0.0.1:8000
It seems like file manager uses APP_URL to build the URL for some reason,still haven't found out why tho

How to handle images with webpack encore & assets

so I seem to be a bit confused on how to work with images in webpack encore + assets.
I store all JS & CSS like this
/assets/js
/assets/css
...
With encore I can access them later from my /public/build folder - no issues there.
Now I want to store some images (e.g. file upload).
First idea was to store them inside a folder like /assets/images. But with the current settings & using assets I can only access files inside /public/build folder.
So I tried to use to copyFiles to copy everything from /assets/images to /public/build/images.
But this does not automatically copy my files (e.g. file upload to /assets/images/ does not copy it to /public/build - which is in order not accessible in my project). So I would need to run manually encore - which I don't want.
Second idea was to store the uploaded images directly inside /public/build/images but those files would be deleted when I run encore.
Next I disabled the webpack option cleanupOutputBeforeBuild, so images would not be deleted. But without this option the folder will be flooded by new JS & CSS Files everytime I run encore.
What do I need?
A solution to store my images either way in /assets folder & make them available for my project.
or
store the images directly in /public/build folder without encore deleting them nor flooding the folder with JS/CSS by disabling cleanupOutput Option.
Thanks in advance ~Syllz
If u need to use it in JS, just require the file:
// assets/app.js
import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;
When you require an image file, Webpack copies it into your output directory and returns the final, public path to that file.
If u need using it from a templates:
You need to install file-loader to use copyFiles()
yarn add file-loader#^6.0.0 --dev
then enable it in webpack.config.js:
.copyFiles({
from: './assets/images',
//optional target path, relative to the output dir
//to: 'images/[path][name].[ext]',
//if versioning is enabled, add the file hash too
to: 'images/[path][name].[hash:8].[ext]',
//only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
then use it in your twig template:
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">
more details in Symfony documentation
You can use the CopyWebpackPlugin to do this. You can read this post for more details.
Solution to my problem:
Store the images into /public/images and not into the build folder - which will be deleted when running encore.

Having problems building github page(SCSS import fails (Jekyll))

I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io
The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.

Uploading file on Prestashop order page

uploaded the module in the link below in my prestashop 1.6.1.7 but unfortunaly I can't find it in the list of modules.
https://www.prestashop.com/forums/topic/456742-free-module-file-upload-let-customers-upload-other-files-besides-images/
Can you please help me to solve this issue.
First of all make sure that after unzip this module you have directory called fileupload (it is very important)
Then upload this folder through FTP to directory /modules not /themes/<theme_name>/modules
Go to your modules in backoffice and make sure you don't have any filters like "show only installed and active" etc.
Your module name is "fileupload" so on the list should be module with this name
Install and enjoy :)

Why does FineUploader's template/default.html look for files in the client folder?

Why does FineUploader's template/default.html look for files in the client folder? When you follow the set up instructions on their website you are left with something that looks like this:
root#UbuntuVM:/usr/local/nginx/html/example.com/wwwroot# ls
0.0.0.0 fine-uploader-gallery.css placeholders
all.fine-uploader.js fine-uploader-gallery.min.css processing.gif
all.fine-uploader.min.js fine-uploader.min.css retry.gif
composer.json fine-uploader-new.css template.html
composer.lock fine-uploader-new.min.css templates
composer.phar iframe.xss.response.js trash.gif
continue.gif LICENSE vendor
edit.gif loading.gif
fine-uploader.css pause.gif
And in the template folder there is a default.html file that looks for client/fine-uploader.js. I followed the instructions - why is the default template not working?
The Fine Uploader HTML templates serve as a starting point for your web app. It is expected that you make appropriate adjustments based on the location of your resources and your desired look and feel.

Resources