search

StudioMercury / digital-publishing-tools-for-wordpress

Digital Publishing Tools for WordPress
http://digitalpublishing.smny.us
Apache License 2.0
8 stars 7 forks source link

article.php template not pulling in styles #33

Closed TimHaslam closed 8 years ago

TimHaslam commented 9 years ago

After updating to 2.0.9 my styles in the template-article.css file are no longer being called in. Article comes through with default styling. I also attached my settings in the DPS WP admin to show that the template is right. dps-settings

article.php file:

<?php
/*
Template Name: Adobe Publish - Sample Article
*/
?>

<?php
    // If bundling set the file path to be relative to the article
    if( isset($_GET["bundlr"]) ) {
        $filePath = 'HTMLResources/';
        $urlPath = 'navto://';
    } else {
        // $filePath = plugins_url( DPSFA_DIR_NAME . '/publish-templates/HTMLResources/' );     
        // If you move the publish-templates folder into your template directory then uncomment the below line and comment out the line above.
        $filePath = get_bloginfo('template_directory') . '/publish-templates/HTMLResources/';
    }

    add_filter('dpsfa_bundle_article', function($entity){
        $path = pathinfo($entity->template);
        return array(
            "HTMLResources/fonts/glyphicons-halflings-regular.eot" => $path['dirname'] . '/HTMLResources/fonts/glyphicons-halflings-regular.eot',
            "HTMLResources/fonts/glyphicons-halflings-regular.svg" => $path['dirname'] . '/HTMLResources/fonts/glyphicons-halflings-regular.svg',
            "HTMLResources/fonts/glyphicons-halflings-regular.ttf" => $path['dirname'] . '/HTMLResources/fonts/glyphicons-halflings-regular.ttf',
            "HTMLResources/fonts/glyphicons-halflings-regular.woff" => $path['dirname'] . '/HTMLResources/fonts/glyphicons-halflings-regular.woff',
            "HTMLResources/fonts/glyphicons-halflings-regular.woff2" => $path['dirname'] . '/HTMLResources/fonts/glyphicons-halflings-regular.woff2',
        );
    });

?>

<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <title><?php the_title(); ?></title>

    <link rel="stylesheet" href="<?php echo $filePath; ?>css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo $filePath; ?>css/template-article.css">

</head>

<body class="article">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
                <?php the_post_thumbnail( 'big-slider', array( 'class' => 'img-responsive' ) ); ?>
                <div class="entry"> 
                    <h1><?php the_title(); ?></h1>
                    <article>
                        <?php the_content(); ?>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <script src="<?php echo $filePath; ?>js/jquery-2.1.4.min.js"></script>
    <script src="<?php echo $filePath; ?>js/bootstrap.min.js"></script>
    <script src="<?php echo $filePath; ?>js/main.js"></script>

</body>
</html>
<?php endwhile; endif; ?>

and template-article.css:

body {font-family:'Myriad Pro', arial, sans-serif;}
.entry a {color:#cc0000;text-decoration:none;}
.entry a:hover {color:#990000;text-decoration:underline;}

.container {padding-left:0px;padding-right:0px;}

.entry {
    line-height: 22px;
    padding:0 10%;
    box-sizing:border-box;
    font-family:'Myriad Pro', arial, sans-serif;
}
html{
  color: #000;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {padding-left:0px;padding-right:0px;}

.entry p {
    margin-bottom: 20px;
    font-size:16px;
    line-height:24px;
}

.entry img {
    max-width: 100%;
    height: auto;
}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 {
    margin-top: 25px;
    margin-bottom: 10px;
    line-height: 1em;
    font-family: Helvetica;
    font-weight: normal;
}

.entry h1 {font-size: 26px;font-weight:600;}

.entry h2 {
    font-size: 22px;
}

.entry h3 {
    font-size: 20px;
}

.entry h4 {
    font-size: 18px;
}

.entry h5 {
    font-size: 14px;
}

.entry h6 {
    font-size: 12px;
}

.entry ol,
.entry ul {
    margin: 0 0 20px 0;
font-size:16px;
line-height:24px;
}

.entry ul li {
    list-style: outside disc;
    list-style-image: none;
}

.entry ol li {
    list-style: outside decimal;
}

.entry li {
    margin: 0 0 5px 0;
}

.entry li ul,
.entry li ol{
    margin: 5px 0 0 15px;
}

.entry #user-login ul {
    margin-bottom: -5px;
}

.entry table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #eee;
    border-collapse: separate;
    margin-bottom: 1.5em;
}

.entry table tr:nth-child(even) {
    background: #F9F9F9;
}

.entry table td,
.entry table th {
    padding: .4em;
    text-align: left;
    border-right: 1px dotted #eee;
}

.entry table thead th {
    background: #F4F4F4;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    padding: 0.7em .4em;
    vertical-align: middle;
}

.entry table tbody th {
    background: #F4F4F4;
    border-bottom: 1px solid #eee;
}

.entry table tbody td {
    border-bottom: 1px solid #eee;
}

.entry table tr th:last-child,
.entry table tr td:last-child {
    border-right: 0;
}

.entry table tbody tr:last-child td,
.entry table tbody tr:last-child th {
    border-bottom: 0;
}

blockquote p {
    color: #999;
    padding: 0 18px;
    font-family: "Georgia";
    font-size: 18px;
    line-height: 28px;
    font-style: italic;
    border: 4px solid #777;
    border-width: 0 0 0 4px;
}

.fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
}
    .entry .fluid-width-video-wrapper {
        clear: both;
    }

.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
chrishutchinson commented 8 years ago

I have been experiencing the same issue, where styles were not coming through during the bundling process.

I've dug through the source code and removed the line $path = ltrim($path, '/'); from classes/dpsfa-bundlr.php on line 3438, which resolved my issue, it wasn't able to generate the path to my CSS files correctly, and as such was excluding them from the bundle.

I'm not sure if this is a realistic solution, or if it might cause a problem elsewhere, however I did note that the same line wasn't in place when the bundle process is checking for images (see line 3402).

StudioMercury commented 8 years ago

We just released an update 2.0.10 with an improvement to the packaging of the article. We updated the way the template. If you look inside the article.php file you'll see we're looking for full paths (or relative paths to the server now). This is part of a larger goal to allow any template (or theme) to be used for creating an article. Relative paths are no longer relative to the article. You can manually specify relative paths in the filter (dpsfa_bundle_article). It's been committed to github but will be available via wordpress's plugin portal within the hour.