(OLD 5.7 Discussion FORUM)

5.7.4.2 Ignoring Caching settings

Permalink June 30, 2015 at 3:49 PM

http://www.i17tbirdstorage.com/

I previously posted about this issue but it was NOT resolved as I thought and seems to be an issue with the caching settings. No matter what I do, even if I turn off ALL caching settings and then delete the cached CSS files in the files directory, the website ignores my no caching settings and regenerates a cached CSS file and references it instead of referencing the un-cached CSS or LESS files. I know this is happening because when I delete the cached css file and refresh the files/cache/css directory another cached CSS file appears. The only way it seems to be forced to reference the actual CSS/LESS file is to change the name and update the header to reference the new file. Then all my changes show up as intended until I make another change to the file. Then, it ignores the fact that caching is turned OFF and it references the cached CSS file.

It was driving me nuts... but I do believe that it's a C5 cache setting issue; at least with this install. Any thoughts?

barkingtuna replied on Jul 1, 2015 at 4:46 pm Permalink Reply

Bumpidy Bump, Bump, Bump...

andrew replied on Jul 1, 2015 at 4:55 pm Permalink Reply

We reference the file from within the cache directory because we have to have somewhere to store the completed compiled CSS. We can't just reference the .less file directory in the browser. So when you turn off the theme css cache on that page, yes the resulting theme will still load its CSS from application/files/cache – but every time you refresh the page that CSS file will be rebuilt. You can check this yourself by checking the file creation times on the cache files.

barkingtuna replied on Jul 1, 2015 at 5:17 pm Permalink Reply

That makes sense, but it isn't working or I wouldn't have posted about this a couple times. I can clearly see the file creation times as you say. However, the new file that is created in the cached directory does NOT match the file in the Theme directory. Why, I have no idea, but that is the case. I use Bluehost and either edit directly through their file manager or edit and upload. Yet, after uploading, refreshing cache, deleting browser history and cache, and refreshing the browser, the classes that I make edits to remain the same. I'd be more than happy to create a series of screenshots to demonstrate this.

Could it have anything to do with my company firewall having some sort of extraordinarily long TTL setting? I had an issue a while back with a site propagation not completing for 72 hours here, but completing within an hour everywhere else.

barkingtuna replied on Jul 1, 2015 at 5:42 pm Permalink Reply 1 Attachment

OK... I changed an H1 from a 3em to a 4em by directly editing within Bluehost on the override.css file and saved. I logged into the website, cleared the cache, and logged out. I then cleared history and cache in Chrome and refreshed the page. I logged back into bluehost and went to my override.css file in the Theme's directory, viewed it, and then put it side by side to the website. Look at ".homeh1 .c5h-section-title h1" in Inspect Element on the left, and Bluehost on the right. The correct size, that I updated it to as you can see, is 4em yet the website still displays 3em.

barkingtuna replied on Jul 1, 2015 at 5:48 pm Permalink Reply

I looked at the the home page on a colleague's computer and the changes are in fact visible, yet they aren't on mine. I really do wonder if it is a firewall issue or setting on my machine specifically that displays cached files for a murderously long period of time. I'm baffled.

andrew replied on Jul 1, 2015 at 7:55 pm Permalink Reply

Hmm, I don't understand. What is the "override.css" file? Aren't we talking
about editing a .less file that compiles down to a .css file?

barkingtuna replied on Jul 1, 2015 at 8:44 pm Permalink Reply

Would it matter? The override.css file was just a file I created to keep my modifications separate and in an effort to figure this issue out. That said, I just modified it to override.less, uploaded it, and changed the head.php file.

<?php  defined('C5_EXECUTE') or die("Access Denied.");?>
<!DOCTYPE html>
<html class="no-js" lang="<?php  echo Localization::activeLanguage()?>">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <!-- CSS -->
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/normalize.css"/>
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/foundation.css"/>
      <script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/elements/calculator.js"></script>
      <?php  echo $html->css($view->getStylesheet('main.less'))?>
      <?php  echo $html->css($view->getStylesheet('override.less'))?>
      <!-- Fonts -->
      <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
      <!-- JS -->

Viewing 15 lines of 30 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied.");?>
 
<!DOCTYPE html>
<html class="no-js" lang="<?php  echo Localization::activeLanguage()?>">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
      <!-- CSS -->
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/normalize.css"/>
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/foundation.css"/>
      <script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/elements/calculator.js"></script>
      <?php  echo $html->css($view->getStylesheet('main.less'))?>
      <?php  echo $html->css($view->getStylesheet('override.less'))?>
 
 
      <!-- Fonts -->
      <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
 
      <!-- JS -->
      <script src="<?php  echo $this->getThemePath();?>/js/vendor/modernizr.js" type="text/javascript"></script>
 
      <!-- Background Images -->
      <style>
         body {background-repeat: <?php  echo Config::get('c5hub.mortar.body_background_image_repeat');?>;}
         header {background-repeat: <?php  echo Config::get('c5hub.mortar.header_background_image_repeat');?>;}
         .c5h-banner-wrap, .c5h-banner-wrap-full {background-repeat: <?php  echo Config::get('c5hub.mortar.banner_background_image_repeat');?>;}
         .c5h-page-meta-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.page_info_background_image_repeat');?>;}
         .main-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.main_background_image_repeat');?>;}
         .c5h-footer-top-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.footer_top_background_image_repeat');?>;}
         .c5h-footer-bottom-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.footer_bottom_background_image_repeat');?>;}
      </style>
 
      <?php  Loader::element('header_required');?>
   </head>
   <body>
 
      <div class="<?php  echo $c->getPageWrapperClass()?>">

I then, at home this time not at the office, modified that same class back to 3em from the 4em, logged into the site, turned OFF all caching, deleted cache, deleted browser cache and history, and the refreshed the page to no avail. I turned caching back on, cleared website and browser cache, and refreshed the browser to no avail again. Then, I changed the override.less to overrides.less and updated the head.php to

<?php  defined('C5_EXECUTE') or die("Access Denied.");?>
<!DOCTYPE html>
<html class="no-js" lang="<?php  echo Localization::activeLanguage()?>">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <!-- CSS -->
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/normalize.css"/>
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/foundation.css"/>
      <script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/elements/calculator.js"></script>
      <?php  echo $html->css($view->getStylesheet('main.less'))?>
      <?php  echo $html->css($view->getStylesheet('overrides.less'))?>
      <!-- Fonts -->
      <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
      <!-- JS -->

Viewing 15 lines of 30 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied.");?>
 
<!DOCTYPE html>
<html class="no-js" lang="<?php  echo Localization::activeLanguage()?>">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
      <!-- CSS -->
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/normalize.css"/>
      <link rel="stylesheet" href="<?php  echo $this->getThemePath();?>/css/foundation.css"/>
      <script type="text/javascript" src="<?php  echo $this->getThemePath(); ?>/elements/calculator.js"></script>
      <?php  echo $html->css($view->getStylesheet('main.less'))?>
      <?php  echo $html->css($view->getStylesheet('overrides.less'))?>
 
 
      <!-- Fonts -->
      <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
 
      <!-- JS -->
      <script src="<?php  echo $this->getThemePath();?>/js/vendor/modernizr.js" type="text/javascript"></script>
 
      <!-- Background Images -->
      <style>
         body {background-repeat: <?php  echo Config::get('c5hub.mortar.body_background_image_repeat');?>;}
         header {background-repeat: <?php  echo Config::get('c5hub.mortar.header_background_image_repeat');?>;}
         .c5h-banner-wrap, .c5h-banner-wrap-full {background-repeat: <?php  echo Config::get('c5hub.mortar.banner_background_image_repeat');?>;}
         .c5h-page-meta-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.page_info_background_image_repeat');?>;}
         .main-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.main_background_image_repeat');?>;}
         .c5h-footer-top-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.footer_top_background_image_repeat');?>;}
         .c5h-footer-bottom-wrap {background-repeat: <?php  echo Config::get('c5hub.mortar.footer_bottom_background_image_repeat');?>;}
      </style>
 
      <?php  Loader::element('header_required');?>
   </head>
   <body>
 
      <div class="<?php  echo $c->getPageWrapperClass()?>">

Magically, it applied my change and cached the new overrides.css file. It took changing the LESS file name and updating the header file to see the changes take place immediately.

barkingtuna replied on Jul 1, 2015 at 9:02 pm Permalink Reply

This is incredibly frustrating because I don't feel that this issue is being taken seriously. I'm not an accomplished developer, like you guys, but I build a decent amount of websites with C5 and this is my second 5.7 site; first in 5.7.4.2. The other site, built with 5.7.3.1 had none of these issues.

MrKDilkington replied on Jul 2, 2015 at 1:59 am Permalink Best Answer Reply

@barkingtuna

Are you using Expires headers in an .htaccess file or is your server (by default or through a cPanel setting)?
https://httpd.apache.org/docs/current/mod/mod_expires.html...

Is your server using some type of caching?

Are the 5.7.3.1 sites that you built on this host or a different host?

Have you used this host before?

On a different host then the one you are currently working on, create a default 5.7.4.2 installation. After installing, check to see if you have the same problem.

barkingtuna replied on Jul 2, 2015 at 2:49 am Permalink Reply

You nailed it MrKDilkington... You asked the right questions and it immediately dawned on me. Thank you! I feel like a complete moron, but sometimes a different set of eyes can help you see what's directly in front of you!

This was an update to an existing website that I had forgotten is cached using Cloudflare. When I built the site under my main domain and a temporary directory, I built it on a domain that was NOT connected to Cloudflare CDN, so the changes took effect as expected. The problems started the second I went live on the permanent domain at which point Cloudflare began caching the site and I found out that it's default Cache Expiration is 1 day! So, that would explain why changing the file name and header worked immediately, as the new file was not yet cached by Cloudflare. I temporarily disabled Cloudflare and tested 3 separate changes and they all displayed after refreshing cache.

I haven't updated this site in so long I had completely forgotten that it was connected to Cloudflare. Thanks again for the help!

Forums

(OLD 5.7 Discussion FORUM)

5.7.4.2 Ignoring Caching settings

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?