I want to change the frontend font size from the admin panel in Laravel. Suppose there is a
<h2 class="intro">Introduction to PHP...?? </h2>
in style.css-->>>>
.intro{
font-size:20px;
}
I want this font size dynamic from admin panel by catching the class. If i need 25px i use that or any size I need I will use that.
How can I do that in laravel??? Give me some suggestions to step up...
You can simply use something like this:
Save a file named style.php in the path where the asset files are located. Then use in your base blade file like this:
<link href="{{ asset('path/style.php') . '?fontSize=' . $fontSize }}" rel="stylesheet"/>
The fontSize variable is the font size you want to use.
And use in style.php
<?php
header("Content-Type:text/css");
?>
.intro {
font-size: <?= $_GET['fontSize'] ?>;
}
One way to do this would be via Javascript and your controller:
In your controller, just pass a variable called $fontSize to your view file. The with JavaScript, get the element by the class name and set the CSS font-size property to whatever value your $fontSize variable has like this:
<script>
let h2Item = document.querySelector('.intro');
h2Item.style.fontSize = '{{ $fontSize }}'
</script>
Remember that the variable you are passing from your controller should not just be an integer, rather it should be something like 20px 30px 2em etcetera.
Related
in My Laravel project I use vue . In my vue component I want to show static image, but the image not showing
<img style="border:10px solid #000;" :src="'public/images/principle.jpg'" alt="">
<img style="border:10px solid #000;" src="/images/principle.jpg" alt="">
The error is because you are defining a string into a vue binding
:src=""
This expects a javascript constant
You could just do
src="/images/test.png"
But this will cause errors as you navigate to sub routes and pages.
In Laravel there is an asset helper and it looks like this
asset('images/test.png')
This will output a full url
http://localhost:8000/images/test.png
This asset helper is useful in PHP. But is not available to JS
So you can make it available using a vue mixin
In the head section of your HTML
Add this
<script> window._asset = '{{ asset('') }}'; </script>
This will bind the asset helper to the window
Next create a mixin in your app/js
It will look something like this
module.exports = {
methods: {
asset(path) {
var base_path = window._asset || '';
return base_path + path;
}
}
}
The final step is to require the mixin
in your app.js
Vue.mixin(require('./asset'));
Then you can use it in vue
<img :src="asset('images/test.png')" />
I'm using Webpack/Laravel and injecting vuejs on id #app in my page so to have skeleton loading page I want to have this markup
//client side, will show after ~0.2 seconds
<div id="app" v-cloak>
<hello-world>
</div
//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
<div class="skeleton">
<span class="skeleton_ribs"></span>
</div>
</div>
I managed to display loading gif in background as pseudo element when v-cloak and everything inside from #app__loading is removed, but if I add normal elements in markup they appear at the bottom of the page after #app loads
[v-cloak] > * { display:none }
[v-cloak] + #app__loading::before {
content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
display: flex;
justify-content: center;
align-items: center;
}
But I would like something like this to work with markup inside #app__loading, but it doesn't work
[v-cloak] > * { display:none }
#app-loader{
display: block;
}
[v-cloak] #app::finish-loading{
[v-cloak] #app-loader{
display: none!important;
}
}
You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.
This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.
But they're actually not related (and not the same element). If you changed the id of the one in index.html you'd need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.
Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you've shown so far, that should make it work as expected.
For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.
If you still can't get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.
To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts - give display none
export default {
mounted() {
document.querySelector('#app__loading').style.display = 'none';
},
}
i'm litte confuse about this, so i wanna make one function which called menu_function.
for what? so all file php in view, will load this menu_function
this menu_function will load menu option in each php file in view, so it will load different menu option in different php file in view
what i'm think is like this
public function menu_function()
{
$dataV["menu"] = "<a href='profit' style='color:blue; font-size: 14px; font-weight: bold;'>Profit PT</a>";
$dataV["menu1"] = "<a href='profit/member' style='color:blue; font-size: 14px; font-weight: bold;'>Profit Member</a>";
$this->load->view("test", $dataV);
}
i think is bad having html tag in controller or i already read this, according that is efficient i make another php in view just for menu option and load in another view?
why i want to make this? so in future if i wanna add another menu option or remove 1 or more menu option just change in 1 file, not having open all view and remove menu option 1 by 1.
maybe another suggest? thanks
What I would do is to create a templates folder inside the views directory, and put there view files that you may require from several controllers.
/application/views/templates
Let's name that file header.php and it would look like this
<a href='<?php echo site_url('profit'); ?>' style='color:blue; font-size: 14px; font-weight: bold;'>Profit PT</a>
<a href='<?php echo site_url('profit/member); ?>' style='color:blue; font-size: 14px; font-weight: bold;'>Profit Member</a>
Then, you could include this template in every controller you would want
$this->load->view('templates/header');
Also, for future reference, if you want a function to be available in different controllers you can:
Extend the CI_Controller core class.
class MY_Controller extends CI_Controller {
public function __construct() {
parent::__construct();
}
/* define here all the functions you want */
}
Then you would create your controllers extending MY_Controller instead of CI_Controller whenever you would want to call the functions.
Use helpers, libraries and drivers.
I have my website layout structured this way:
header
--content
footer
Where header and footer are #included.
On some pages I have this classes to body
<body class="property-map-append-top has-breadcrumb"> and to other pages: <body class="property-map-append-top">
How can I do this for specified pages?
It depends on what do you mean by 'some pages'. You could pass a variable from a controller, like hasBreadrumb and use it in Blade template:
<body class="property-map-append-top #if($hasBreadcrumb)has-breadcrumb#endif">
Sometimes I do this in my views:
<body class="{{ $bodyClass or 'default-body-class' }}">
You can add classes to the $bodyClass variable in your controllers, but only when you want to override the default class (the string which comes after the 'or'). With this syntax you can opt to not send the variable to the view and still avoid an error.
What is the best way to include the contents of an SVG file (located in the assets folder) in a Laravel 5 blade template?
I don't want to use image/object/embed tags, this should be an inline SVG for reasons of speed.
I know I could use <?php file_get_contents("file.svg") ?> but is there a better way specific to Laravel/Blade?
Edit: to clarify, the method should work with all SVG files, including the one below.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path stroke="red" fill="#00f" d="M10 10h100v100H10z"/>
</svg>
Similar to the accepted answer but a bit cleaner (imo).
Use the laravel directive to extend blade, like so (in your App Service Provider, as outlined here):
\Blade::directive('svg', function($arguments) {
// Funky madness to accept multiple arguments into the directive
list($path, $class) = array_pad(explode(',', trim($arguments, "() ")), 2, '');
$path = trim($path, "' ");
$class = trim($class, "' ");
// Create the dom document as per the other answers
$svg = new \DOMDocument();
$svg->load(public_path($path));
$svg->documentElement->setAttribute("class", $class);
$output = $svg->saveXML($svg->documentElement);
return $output;
});
Then use it in your blade like so:
<div class="Login__image Login__cloud">
#svg('cloud.svg', 'Cloud')
</div>
This works, that's the simplest way I could think about :
{!! file_get_contents('images/icon.svg') !!}
Why not place the svg into a blade template?
resources/views/icons/dashboard.blade.php
then add in your views using blade syntax?
#include('icons.dashboard')
View Composer Method
I ended up using a view composer in a service provider.
In the service provider's boot() method:
// Wildcard view composer
view()->composer('*', function($view) {
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Get XML without version element
$logo = $svg->saveXML($svg->documentElement);
// Attach data to view
$view->with('logo', $logo);
});
And in my view:
<!-- Echo unescaped SVG content -->
{!! $logo !!}
I am using DOMDocument as it allows me to remove the XML version element which should not be in the HTML.
The CSS class is not essential but saves me wrapping the logo with another HTML element for styling.
If you only need the logo in a specific Blade partial such as header you could write
view()->composer('header', function($view) {});
http://laravel.com/docs/5.0/views#view-composers
https://laracasts.com/series/laravel-5-fundamentals/episodes/25
Blade Partial Method
This method is not best practice since this sort of code should not really be in a view. However it is very simple and much better than adding PHP code in every single view.
Make a new partial (lets say logo.blade.php) with the following code:
<?php
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Echo XML without version element
echo $svg->saveXML($svg->documentElement);
?>
You can now use the SVG image in a blade template by including the partial like so:
#include('logo')