I'm actually trying to set in my twig template css generated from a controller. File is included (if I access the url of the controller in my browser I see generated css) but not applied.
For more details, I've got a twig template (base.html.twig) in which I include controller result using <link rel="stylesheet" type="text/css" href="{{ path('mycsscontroller') }}">.
The 'mycsscontroller' route go to MyCssController:indexActionwhich return $this->render('mytwigfile.css.twig').
The content generated is a valid css.
I already tried to set generated content in a file then include it using <link rel="stylesheet" type="text/css" href="{{ asset('mycssfile') }}"> and css is included and applied on page!
I really don't understand what I'm doing wrong there...
Thanks
Try return response in you controller with css content type
return new Response('my_css_styles_as_string', 200, ['Content-Type'
=> 'text/css'])
Related
Let's just say I have a basic class-based view like:
from django.views.generic import TemplateView
class HomePage(TemplateView):
template_name = "homepage.html"
and in homepage.html of course we load some CSS, apocryphally:
{% extends "base.html" %}
{% load static %}
{% block CSS %}
<link rel="stylesheet" type="text/css" href="{% static 'css/default.css' %}" />
<link rel="stylesheet" type="text/css" href="some CDN based CSS file' %}" />
{% endblock %}
Now I'd like the view to read/load the CSS that will be sent to the client.
If we could just find the source files, we could parse them with cssutils.
And of course it's technically possible to find and parse the template file too, but Django already implements that and has a template loader. Is there any way short of rendering the template into a string, and trying to parse the HTML to extract CSS rules? And even if that's the path we need to pursue, is there a package that will given rendered HTML, and return the CSS rules?
An interesting problem that arises from the need, server-side, to extract some CSS information, notably colours.
In laravel app, I have kept my css and js is asset folder inside public folder and I call these css my blade using
<link rel="stylesheet" href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}">
but when Execute page in browser , this css file is not executing so I tried to access this url directly through browser url 'http://127.0.0.1:8000/assets/front-end/assets/css/owl.theme.default.min.css'
then the result shows like 'This page is not working'.
my pblic folder css accessing tree is
public/assets/front-end/assets/css
Please advise
change it:
href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}"
to:
href="{{ asset('assets/front-end/assets/css/owl.theme.default.min.css') }}"
{!! !!} is for rendering tags in text
Firstly you check your public folder, css file location.
Change it -
<link rel="stylesheet" href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}">
Right - <link rel="stylesheet" href="{{ asset('assets/front-end/assets/css/owl.theme.default.min.css') }}">
or
<link rel="stylesheet" href="{{ asset('/') }}assets/front-end/assets/css/owl.theme.default.min.css">
I hope this is help for you!
to access a resource in Laravel you need to use the {{ }} syntax and call the URL::asset() method:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/assets/front-end/assets/css/owl.theme.default.min.css') }}">
more details about accessing resources in laravel: how to access file in public folder
Looking to use one of the examples for Bootstrap 4.5, but whenever I change the filename of the html file or the css file for the example, it breaks the formatting link for the example page. How can I duplicate the original example files and alter the names (to something like "my_page.html" or "my_page.css" for example) without changing the page itself?
If you change the name of your stylesheet (CSS), you also have to update it in your HTML, otherwise it will point your stylesheet to the old name and will break. This works the same for all other file resources you are linking to a HTML page, such as other HTML pages, images, scripts etc.
UPDATE WITH AN EXAMPLE:
Lets say I have three files: index.html, contact.html and stylesheet.css. In my index.html and contact.html pages, they might have the following code:
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Contact me
<!-- contact.html -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Home
Both pages have a link to the stylesheet, and each page has a link to the other page.
Now, I want to change the name of my stylesheet to awesome-style.css, and my contact page to awesome-contact.html. I would have to make the following changes to my HTML pages:
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="awesome-style.css">
Contact me
<!-- awesome-contact.html -->
<link rel="stylesheet" type="text/css" href="awesome-style.css">
Home
I have changed three lines of code here. The stylesheet has to be changed in all HTML pages for your styling to still apply to all pages. In my index.html page, I have changed the link from contact.html to awesome.contact.html so it will still link to the correct HTML page.
I have never had to change any code in awesome-style.css, as you never tell it what HTML documents you will be using it in.
Trying to build a responsive email template in a Twig file. Using Swiftmailer within a Symfony application to send the emails. Two issues I am having so far is the images only show when I view the email on my localhost not when the email is viewed in Gmail, Inbox or Yahoo!
Linking the images using an absolute path (currently). Also, tried a relative path with the same result.
<img src="{{ absolute_url(asset('bundles/coreecommerce/images/logo.png')) }}">
Problem #2 is include stylesheets. I have some media queries in a stylesheet I am trying to include within a head tag like this.
{% block stylesheets %}
<link href="{{ asset('bundles/coreecommerce/css/email.css') }}" rel="stylesheet" />
{% endblock %}
I'm doing something wrong here. Just not sure what? Can you include stylesheets, inline styles for a responsive email in Twig?
Thanks for any help.
To inline images in your html mails you should take a look at this section of the documentation.
To show you the example with twig, you can start with something like this:
<?php
$message = \Swift_Message::newInstance();
$fileToEmbed = 'a path to image file';
$templateParams = [
'fileToEmbed' => $message->embed(\Swift_Image::fromPath($fileToEmbed)),
];
// then compose the mail like this
$message
// set subject etc...
->setBody($this->twigTemplating->render('yourMailTemplate.html.twig', $templateParams), 'text/html')
;
And then in you twig template you just create a IMG tag with template variable:
<img src="{{ fileToEmbed }}">
So TL;DR you just need that $message->embed(\Swift_Image::fromPath($fileToEmbed)) return value to be passed to your mailing template and use it as src attribute.
To locate the image file within your bundle you can use Kernel::locateResource method like this (assuming that your logo.png is located in CoreEcommerceBundle/Resources/public/images/ directory):
$fileToEmbed = $this->kernel->locateResource('#CoreEcommerceBundle/Resources/public/images/logo.png');
I'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
So my question is basically, how the hell do I include simple CSS file inside Twig template?
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
This created a new folder
/web/bundles/webshome/...
this is just linking to the
src/Webs/HomeController/Resources/public/
right?
Questions
Where do you place your asset files, JS, CSS, and images? Is it OK to put them in Bundle/Resources/public folder? Is that the right location for them?
How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
Should I configure something else?
You are doing everything right, except passing your bundle path to asset() function.
According to documentation - in your example this should look like below:
{{ asset('bundles/webshome/css/main.css') }}
Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):
app/console assets:install web --symlink
Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
And you can use %stylesheets% (assetic feature) tag:
{% stylesheets
"#MainBundle/Resources/public/colorbox/colorbox.css"
"%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
You can write path to css as parameter (%parameter_name%).
More about this variant: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.
Scattering your web assets across tens of different bundles makes it
more difficult to manage them. Your designers' lives will be much
easier if all the application assets are in one location.
Templates also benefit from centralizing your assets, because the
links are much more concise[...]
I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.
In case you are using Silex add the Symfony Asset as a dependency:
composer require symfony/asset
Then you may register Asset Service Provider:
$app->register(new Silex\Provider\AssetServiceProvider(), array(
'assets.version' => 'v1',
'assets.version_format' => '%s?version=%s',
'assets.named_packages' => array(
'css' => array(
'version' => 'css2',
'base_path' => __DIR__.'/../public_html/resources/css'
),
'images' => array(
'base_urls' => array(
'https://img.example.com'
)
),
),
));
Then in your Twig template file in head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
</body>
</html>