Got a trouble when including some external javascript code (example can be jquery.treeview plugin with css and images included) - in vendor/assets (where this should go) it seems it doesnt work with images. Any experience or example of doing this?
I suspect it's because you need to correct /images/foo.jpg to the new scheme of /assets/foo.jpg
If not, please include logs and examples.
Along the lines of what Zach said, the solution I've used is to modify the js/css files to be erb templates, and used asset_path('treeview/foo.jpg') to replace '/treeview/foo.jpg', and move all plugin images to the app/assets/images/treeview folder.
This will make everything work swimmingly, but it is less than ideal in requiring hacking up plugins before they work with the new system.
Of course, you can also keep your CSS and JS files in /public/javascripts and just javascript_include_tag them as usual, but you'll lose the precompile/bundle/compress functionality the asset pipeline provides.
Related
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
I'm pretty new to laravel and so far I'm liking it. Due to some situations where I forgot to include my new js or css files into my layout, Im looking for a way to link all files from those folders.
Im totally willing to create this myself, but I'm not sure what is the best way to do this. So far I have registered some serviceproviders, like viewcomposers and helpers. I was thinking I can make another viewcomposer which collects the folders I want, and link it to the desired layout.
But I don't want to create unnecessary functions (which might already exist). I'm hoping you guys can give me some insight in what's possible in laravel, good/bad practice, useful classes to use etc.
I wouldn't do this.
I would use Elixir (depending on which version of Laravel you are using) to compile and version my assets. This will mean that you only need to include the references to one file CSS file and one JS file in your view.
https://laravel.com/docs/5.3/elixir
You then just need to maintain your gulpfile.
Versioning your assets also means that you never need to CTRL+F5 to refresh them.
I come from a gulp background and I am looking to minify images with webpack.
Normally I would have a src folder with my raw images that would get minified to a dist folder with all my minified images. This is have I have learned to minify images with gulp.
Using webpack I came across this:
https://github.com/tcoopman/image-webpack-loader
When using this, webpack just loads the image and perform the minifcation on the spot or am I wrong here? I don't see any output option so I am kind of confused.
I would like to have a setup similar to gulp where in the end I have a folder of original images and a folder of minified images.
Am I wrong to assume that I could maintain this workflow with webpack?
It is my understanding that you are correct in your line of thinking. As far as I know, Webpack's image tooling is for actually loading the image on spot. I actually came across this same issue recently, and after a bit of research realized I had to either
(1) continue using gulp for this task, or
(2) write my own image script using imagemin, and then use npm-scripts to run it. I ended up choosing the latter, which took a bit, and honestly was in some ways just rebuilding things that already work; but it was definitely worth the time for what I learned.
(If anyone knows more about webpack's image capabilities please correct me; I did quite a lot of research.)
I have installed CodeSleeve asset-pipeline to manage and minify assets for my project. As I understood, all the scripts and stylesheets are controlled from manifest files located at: app/assets/stylesheets/application.css and app/assets/javascripts/application.js
That is all great, but what if I want to load different assets for different page? For example admin side of the application.
This situation is also mentioned in asset-pipeline documentation and recommended to use separate manifest files.
For example, if your application is silo'ed into admin section and user section then it probably makes sense to have a separate manifest file for each section.
Sounds great, but question remains. How?
Here is a similar question about asset-pipeline on Rails 3.1 and a somewhat complicated solution for such a obvious need, as is the need to include different assets in different sections of the application.
I still tried to make sense of that solution, but this is about Rails, so I still have no idea where are the manfiest files added in Laravel version?
I must admit I first went much longer and complex path, hacking the config array with Laravel Event listener. Got it working though until I turned on production environment, which broke my admin section styles. Now after all the hair-pulling came back to asset-pipeline documentation and found the very simple solution which had been right in front of my eyes the whole time: All you have to do is add parameter to include tag, like this:
<?= javascript_include_tag('admin/application') ?>
This will point to folder assets/admin and look for application.js from that folder. Resulting html markup will be:
<script src="assets/admin/application.js" data-foo="bar"></script>
Same thing with stylesheets.
CKeditor's installation instructions tell me to just unzip the whole distribution file on my webserver's production directory. But it is full of files I definitely don't want there, like source code, examples, and even server-side code in PHP. I got rid of most of these files but there is one I'm not sure about: contents.css.
I can see this file uses a lot of styles I definitely don't want to see in my site. My question is:
Is contents.css required by CKeditor, or used by default? Do I even need this file on my production site?
I suppose it depends on what you're using in CKeditor, or what you plan to use later. Personally, I'd suggest renaming the file (something like) contents.css.old and creating a new contents.css file, copy across all the styles that you think you'll need and then destruct-test your implementation of CKeditor, to assess whether you've got all the styles that you need.
Add to, or remove from, that file to get your finished version and then use that one. I'd strongly advise keeping the original version around though, for future development purposes.
To your specific questions, though:
Is contents.css required by CKeditor, or used by default?
I believe so.
Do I even need this file on my production site?
Not so far as I know, its absence will likely cause things to look a little less-pretty, though, until you apply your own styles.
As suggested, above, though, I'd rename the original and then create your own stylesheet with the same name, it's rather easier than going through all the various js files looking for, and changing as appropriate, references to contents.css.