How to integrate content delivery network in existing codeigniter Application.
So that base-url needs to point main server and
resource-url (like images, css, js etc) need to point cdn server.
All images are linked with absolute path like below
<img src="<?php echo base_url("media/images/image_name.jpg"); ?>" alt="StackOverflow" >
And the Result will be like below
<img src="http://example.com/media/images/image_name.jpg" alt="StackOverflow" >
Here i need to replace example.com with cdn.example.com.
Do i need to edit manually in all places?
Thanks for Helping.
It is like normal call in view
e.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
We need to create one helper method like below
function cdn_base_url() {
$url = base_url();
if(is_cdn_integrated){
$url = 'http://cdn.example.url.com/';
}
return $url;
}
And we need to call that method in view files like below instead of calling with base_url().
<img src="<?php echo cdn_base_url()."media/images/image_name.jpg"; ?>" alt="StackOverflow" >
Related
In my head section of my form.layout.blade.php I have the following:
<head>
<script src="/js/main.js"></script>
<head>
This is layout file is loaded before all pages are loaded. Is there a way to not load main.js for a specific route?
you can use if statement like this. main.js will not load on this page
#if(!Request::is('subpage/url'))
<script src="/js/main.js"></script>
#endif
The workaround I used for not loading scripts on all sites, is that I put script paths in variables in controllers, something like this:
public function show($id){
$scripts[] = '/js/main.js';
view()->share('scripts', $scripts);
return view('view', $someData);
}
This allows me to use this script only on a page I really need it, like this:
#if(isset($scripts))
#foreach($scripts as $key => $value)
<script src="{{mix($value)}}"></script>
#endforeach
#endif
Hope that this can lead you in right direction.
You can use if statements
#if(!in_array(Route::currentRouteName(), ['route.name', ...]))
<script src="/js/main.js"></script>
#endif
I am following this: https://laravel.com/docs/5.3/elixir
Here is my gulpfile.js:
elixir(mix => {
mix.webpack('app.js')
.styles([
'bootstrap.min.css',
'agency.css',
'font-awesome.min.css',
'bootstrap-social.css',
'bootstrap-datetimepicker.min.css',
'select2.min.css',
'icheck.css',
'custom.css'
])
.scripts([
'jquery.easing.min.js',
'jqBootstrapValidation.js',
'agency.min.js',
'moment.js',
'bootstrap-datetimepicker.min.js',
'select2.min.js',
'contact_me.js',
'icheck.min.js',
'ckeditor.js',
'echo.js',
'custom.js'
])
.version(['css/all.css', 'js/all.js']);
});
Here, I'm simply merging all css and js files into two files: all.css and all.js to minimise HTTP request(to improve performance)
Those two merged files, getting stored at
public/build/css/all-5ba9458ba4.css
public/build/js/all-1723826a20.js
And I'm including them into templates like:
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
<script src="{{ elixir('js/all.js') }}"></script>
The issue here is that those combined css and js i.e all.css and all.js getting stored inside of "build" directory.
So, I need to move other related dependencies (like fonts) inside that build directory.
So, what is the solution over here?
Any help would be appreciated.
Thanks,
Parth vora
Elixir's version method allows you to set a path I believe
mix.version(['css/all.css', 'js/all.js'], 'public');
Then use
elixir('path/to/script.js', null) // note the null
In your case
<link rel="stylesheet" href="{{ elixir('css/all.css', null) }}">
<script src="{{ elixir('js/all.js', null) }}"></script>
This should work:
mix.version(['style.css', 'script.js'], 'public');
https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
As per this documetation, I think there is no such option to provide custom path for version method.
https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
I'm still new to Laravel. Anyway, I'm making a small system of viewing and creating articles to be shown in the main site. I wanted to create a page that displays an article from the database, using a parameter from the URL, like this:
http://localhost:8000/read/1
The above, for example, will display the article with 'id' value of 1 in the database.
So it works just fine, but problem is, after I got it to work (which took me some time since I'm a newbie), the whole style just disappears from the page. I tried to rewrite everything but it still didn't work. New pages that I create include the style just fine.
This is my route line:
Route::get('read/{id}', array('as' => 'read', 'uses' => 'NewsController#readArticle'));
NewsController readArticle function:
public function readArticle($id) {
$article = NewsMessage::where('id', $id) -> first();
return View::make('news.read', array('article' => $article));
}
And the file read.blade.php (located in views/news/read.blade.php)
#extends('layouts.main')
#section('content')
{{ $article -> title }}
#stop
So the whole PHP code works fine and I manage to get the title. But for some reason, the whole style disappears and this is what I see:
http://puu.sh/ctO6J/db30fbe102.png
So any idea, what have I dont wrong that caused this? The other pages work just fine with the style included.
Thank you!
The issue is that the path to the image is incorrectly specified.
You can either use the built in asset methods or something like {{ URL::to('/')/imagepathhere/filename.jpg }}
Assuming you have your styles links wrote as:
#extends('layouts.main')
#section('styles')
<link href="css/custom.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
#endsection
#section('content')
{{ $article -> title }}
#endsection
Correct Syntax:
#extends('layouts.main')
#section('styles')
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
#endsection
#section('content')
{{ $article -> title }}
#endsection
And make sure your css folder is located at public folder when calling with asset() helper.
This issues of disappearing the whole page styles is causing by accessing the image or css file or any other resources, and the solution is to use asset() helper function.
NOTE: YOUR ROUTES AND CONTROLLER HAS NO ISSUE, YOU DON'T NEED TO TOUCH EITHER.
I am trying to replace the default lightbox 'modal' to 'slimbox', because 'modal' doesn't have the navigation arrows.
Demo of slimbox with navigations
Demo of modal without navigations
I am using these paths to modify the calling of slimbox
[templatename]/html/com_virtuemart/productdetails/default.php
components/com_virtuemart/productdetails/default.php
Joomla v2.5
Virtuemart 2.0.6
Slimbox2
The following is my attempt:
//Enable Slimbox2 plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/slimbox/slimbox.css');
$document->addScript($front.'js/slimbox/slimbox2.js');
$js = 'jQuery(document).ready(function($) { $("a.lightbox").slimbox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="lightbox" rel="lightbox"'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
?>
But its still not working I wondered what's wrong?
[Reference][3]
You aren't applying the slimbox class to the image reference, your applying it to the container of the image aren't you? You need to deal with the image file url directly in my opinion.
// get the file_url of the first image
$imgPath = $this->product->images[0]->file_url;
// output the image
<a class="slimbox" href="<?php echo $imgPath; ?>">
<img src="<?php echo $imgPath; ?>" alt="" />
</a>
I'm trying to add the "Pin it" button from Pinterest to the pruduct detail pages in our website.
So far I've tried:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
and
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
With any of these I can get the pruduct's URL and the product's name, but I can not get the product's image. So the post does not work (it needs all 3 items to work: URL, Media and Description)
When I try this:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
I can post the product's image, but the URL is not dynamic (I'm just using the absolute URL to the website).
Any ideas on how I could implement this button in my product detail pages?
Most of the answers here don't urlencode() the querystring that's generated for the pinterest link, so I'm a little surprised they've been working - my approach has been a variant of Andrew's that uses http_build_query() to do this for me.
The following code would work when placed inside template/catalog/product/view.phtml:
<!--START PIN BUTTON-->
<?php
$_pinlink['url'] = $_product->getProductUrl();
$_pinlink['media'] = $this->helper('catalog/image')->init($_product, 'image')->__toString() ;
$_pinlink['description'] = $_helper->productAttribute($_product, $_product->getName(), 'name') . " - " . strip_tags($_product->getDescription());
?>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
I've also noticed that Pinterest strips all html tags from posted descriptions, so there didn't seem much point in passing them through - hence the strip tags on the description.
This seems to work for me:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
My only concern with this is that it gives the cached image url - rather than a direct one. I do not know how permanent this cached url is. It would seem better to refer to the 'source' rather than the cached version in this instance. But I am not sure....
Have you ever try to get current product url in your code? As a result, in product view page, the URL of the product available, just get this url like below :
$curProductUrl = $this->helper('core/url')->getCurrentUrl();
// or we can take product id then use in the code
$_product = $this->getProduct();
$_id = $_product->getId();
$_productUrl = $_product->getProductUrl();
$_smallImageUrl = $_product->getSmallImageUrl();
Try this for adding the image to Pinterest. It has worked well for me.
$this->helper('catalog/image')->init($_product, 'image')->resize(150)
The URL you are generating has semicolons after each parameter. Is that intentional? (... replaces your <? php ?> blocks)
Pin It
&media;, &description;.
Try removing the semicolons.
Also, if your output is not automatically HTML escaped the ampersands should be HTML entities instead: &media= and &description=.
Here's my version of the Pin It button for magento product pages and it works beautifully.
I use the canonical url of the product. For the description: I first insert the name of the product, followed by two breaks (%0A), followed by the description of the product. The htmlentities code for the product description will convert any quotes you have so Pinterest can read it.
<!--START PIN BUTTON-->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
Here is what you have to do:
Copy and paste this code into your themes view.phtml file and your all set:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
This will load the product description, image, and link
Sometimes if you put the url later in the dynamic url, it will get stuck loading. So just copy/paste the code above and your done. No customization required.
This works for me:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
But it uses the cached images ...
I'm trying to use the original image path, but with no success until now.
Hope this helps