Topic: blog image

How can I get a image like this;
http://enlab.co/files/blog.png

2 (edited by nakome 2014-11-10 19:20:47)

Re: blog image

This is ease look this:

File library/Morfy.php line 78

    private $page_headers = array(
                                    'title'         => 'Title',
                                    'description'   => 'Description',
                                    'keywords'      => 'Keywords',
                                    'author'        => 'Author',
                                    'date'          => 'Date',
                                    'robots'        => 'Robots',
                                    'tags'          => 'Tags',
                                    'template'      => 'Template',
                                    'thumbnail'     =>  'Thumbnail'  // this is a new object
                                );

Md file like blog:

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.


Blog template

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/blog/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/blog/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

    <?php Morfy::factory()->runAction('theme_content_after'); ?>
</div>
<?php include 'footer.html' ?>


If you use in normal page  use:

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>
<div class="tumb">
    <img src="<?php echo $thumbnail;?>" alt="<?php echo $page['title'];?>">
</div>

Example
https://dl.dropboxusercontent.com/u/23834858/fotos/blog%20thubnail.jpg

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..

Re: blog image

Okay I found it smile
look here video https://www.dropbox.com/s/bl241u6ef1pxh … 3.mp4?dl=1

4 (edited by dextra 2014-11-10 19:37:39)

Re: blog image

nakome wrote:

This is ease look this:

File library/Morfy.php line 78

    private $page_headers = array(
                                    'title'         => 'Title',
                                    'description'   => 'Description',
                                    'keywords'      => 'Keywords',
                                    'author'        => 'Author',
                                    'date'          => 'Date',
                                    'robots'        => 'Robots',
                                    'tags'          => 'Tags',
                                    'template'      => 'Template',
                                    'thumbnail'     =>  'Thumbnail'  // this is a new object
                                );

Md file like blog:

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.


Blog template

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/blog/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/blog/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

    <?php Morfy::factory()->runAction('theme_content_after'); ?>
</div>
<?php include 'footer.html' ?>


If you use in normal page  use:

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>
<div class="tumb">
    <img src="<?php echo $thumbnail;?>" alt="<?php echo $page['title'];?>">
</div>

Example
https://dl.dropboxusercontent.com/u/23834858/fotos/blog%20thubnail.jpg

yes I did it smile
I learn quickly wink

Re: blog image

Good smile

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..

Re: blog image

Doesn't work on Monstra 3.0.1, can you help please?

Re: blog image

Daidalos wrote:

Doesn't work on Monstra 3.0.1, can you help please?

This code is only for morfy!

Re: blog image

So why it is in the Monstra Questions?
I need blog pages with pictures, is it possible in Monstra or not?

Re: blog image

Daidalos wrote:

So why it is in the Monstra Questions?
I need blog pages with pictures, is it possible in Monstra or not?

http://forum.monstra.org/topic/356/extr … e-snippet/

Re: blog image

nakome wrote:

This is ease look this:

File library/Morfy.php line 78

    private $page_headers = array(
                                    'title'         => 'Title',
                                    'description'   => 'Description',
                                    'keywords'      => 'Keywords',
                                    'author'        => 'Author',
                                    'date'          => 'Date',
                                    'robots'        => 'Robots',
                                    'tags'          => 'Tags',
                                    'template'      => 'Template',
                                    'thumbnail'     =>  'Thumbnail'  // this is a new object
                                );

Md file like blog:

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.


Blog template

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/blog/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/blog/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

    <?php Morfy::factory()->runAction('theme_content_after'); ?>
</div>
<?php include 'footer.html' ?>


If you use in normal page  use:

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>
<div class="tumb">
    <img src="<?php echo $thumbnail;?>" alt="<?php echo $page['title'];?>">
</div>

Example
https://dl.dropboxusercontent.com/u/23834858/fotos/blog%20thubnail.jpg

hi

how can I have this blog template
https://dl.dropbox.com/s/98syisu9ho2dlbe/2015-01-18_15-37-11.png
code

<!-- BANNER-TITLE SECTION START -->
    <section class="banner-title">
      <div class="overlay"></div>
      <div class="container content">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <h1 class="main-title"><span class="textbold">Blog</span> Page</h1>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="page-breadcrumb">
            <span class="rounded-btn">Home / Blog</span>
          </div>
        </div>
      </div>
    </section><!--/.banner -->
    <!-- BANNER-TITLE SECTION END -->

    <!-- BLOG-CONTAINER SECTION START -->
    <section class="blog-container">
      <div class="container">
        <div class="feed col-md-8">

          <div class="post">
            <div class="image">
              <img src="assets/images/portfolio1.jpg" alt="blog images">
              <div class="post-date">
                <div class="circle">
                  <div class="date">07</div>
                  <div class="month">oct</div>
                </div>
              </div>
              <div class="overlay animated fadeIn">
                <div class="share">
                  <a href="#"><div class="circle"><i class="fa fa-facebook"></i></div></a>
                  <a href="#"><div class="circle"><i class="fa fa-twitter"></i></div></a>
                  <a href="#"><div class="circle"><i class="fa fa-google-plus"></i></div></a>
                  <a href="#"><div class="circle"><i class="fa fa-linkedin"></i></div></a>
                  <a href="#"><div class="circle"><i class="fa fa-envelope"></i></div></a>
                </div>
              </div>
            </div><!--/.image-->
            <div class="title">
              <h2><a href="#">POST TITLE GOES HERE</a></h2>
            </div>
            <div class="text">
              Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, gravida nibh vel velit auctor aliquet proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, gravida nibh vel velit auctor aliquet...
            </div><!--/.text-->
            <div class="info">
              <div class="col-md-8">
                <span class="info-text">
                  <i class="fa fa-user"></i><a href="#">Johny Doe</a>
                </span>
                <span class="info-text">
                  <i class="fa fa-comments-o"></i><a href="#">144 comments</a>
                </span>
                <span class="info-text">
                  <i class="fa fa-tag"></i>News, Post
                </span>
              </div>
              <div class="col-md-4 readmore-container">
                <a href="#" class="readmore rounded-btn">Read More</a>
              </div>
            </div><!--/.info-->
          </div><!--/.post-->

        </div><!--/.feed-->
        
        <div class="sidebar col-md-4">

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-align-justify"></i> Categories</h3>
            </div>
            <div class="content">
              <ul>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> News And Update 
                    <span>(13)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Interviews 
                    <span>(7)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Graphic And Web Design 
                    <span>(20)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Wordpress Hacks
                    <span>(34)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Freebies
                    <span>(17)</span>
                  </a>
                </li>
              </ul>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-calendar-o"></i> Archives</h3>
            </div>
            <div class="content">
              <ul>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> January 
                    <span>(13)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> February 
                    <span>(7)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> March
                    <span>(20)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> April
                    <span>(34)</span>
                  </a>
                </li>
              </ul>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-tag"></i> Popular Tag</h3>
            </div>
            <div class="content">
              <span class="tag-label">Web Development</span>
              <span class="tag-label">Web Design</span>
              <span class="tag-label">Graphic Design</span>
              <span class="tag-label">UI/UX Design</span>
              <span class="tag-label">Photography</span>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-pencil"></i> Text Widget</h3>
            </div>
            <div class="content">
              <div class="text-widget">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-envelope-o"></i> Newsletter</h3>
            </div>
            <div class="content">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Join Our Newsletter">
                <span class="input-group-btn">
                  <button class="btn" type="button">
                    <i class="fa fa-check"></i>
                  </button>
                </span>
              </div>
            </div><!--/.content-->
          </div><!--/.section-->

        </div><!--/.sidebar-->
      </div><!--/.container-->
    </section><!--/.blog-container-->
    <!-- BLOG-CONTAINER SECTION END -->';

how can I have this blog post template
https://dl.dropbox.com/s/aybuzwi9idkandi/2015-01-18_15-41-38.png
code

    <!-- BANNER-TITLE SECTION START -->
    <section class="banner-title">
      <div class="overlay"></div>
      <div class="container content">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <h1 class="main-title"><span class="textbold">Blog</span> Single</h1>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="page-breadcrumb">
            <span class="rounded-btn">Home / Blog</span>
          </div>
        </div>
      </div>
    </section><!--/.banner -->
    <!-- BANNER-TITLE SECTION END -->

    <!-- BLOG-CONTAINER SECTION START -->
    <section class="blog-container">
      <div class="container">
        <div class="singlepost col-md-8">
          <div class="title">
            <h1>Donec Venenatis Mattis</h1>
          </div>
          <div class="main-image">
            <img src="assets/images/blog-singlepost.jpg" alt="blog main image">
          </div>
          <div class="info">
            <span class="info-text">
              <i class="fa fa-user"></i><a href="#">Johny Doe</a>
            </span>
            <span class="info-text">
              <i class="fa fa-comments-o"></i><a href="#">144 comments</a>
            </span>
            <span class="info-text">
              <i class="fa fa-tag"></i>News, Post
            </span>
          </div><!--/.info-->
          <div class="article">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget enim elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas nibh sapien, adipiscing vitae tellus at, imperdiet convallis urna. Integer vel tempus massa. Sed lobortis mi eget aliquet vehicula. Morbi in posuere sem, blandit hendrerit lorem. Nulla nec nibh sed libero convallis convallis rhoncus ac velit. Nam dapibus diam sed scelerisque imperdiet. Curabitur vehicula eleifend sapien sit amet tincidunt. Donec sed aliquet lectus, quis pharetra velit. Aliquam aliquet interdum gravida. Duis tincidunt mi eu urna vestibulum, id rutrum metus elementum. Cras adipiscing, felis sed pulvinar semper, nunc lacus porta urna, nec porttitor magna tellus et metus. Fusce venenatis consectetur dui id sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

            Nam vitae elit risus. Nulla vel est elit. Curabitur pellentesque vulputate blandit. Sed pharetra orci enim, eget pulvinar tellus scelerisque ac. Vestibulum feugiat dolor et hendrerit fermentum. Morbi ultrices nunc eget est fermentum, in viverra leo fermentum. Nam euismod eros et tempor iaculis. Nullam vitae diam ac nulla ullamcorper placerat. Fusce elementum imperdiet urna, a mattis nulla fringilla sit amet. Vivamus vehicula suscipit dolor.</p>

            <h1>H1 Tag Sample</h1>
            <p>Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit. Fusce venenatis tincidunt diam, quis euismod ipsum consectetur faucibus. Sed ac enim vel dui hendrerit dapibus. Nulla placerat nulla eu volutpat dapibus. Donec nisl sem, tempor venenatis tellus sit amet, faucibus interdum augue. Phasellus ultrices id neque nec bibendum. Quisque odio lorem, consectetur a metus id, venenatis malesuada sem. Mauris ut lorem sit amet magna mollis convallis dapibus ut nulla. Morbi euismod, dui nec dapibus auctor, nisl nisi bibendum ante, ac vehicula tellus risus a nibh. Donec porta adipiscing nunc, et pharetra leo mollis et.</p>

            <h2>H2 Tag Sample</h2>
            <p>Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit. Fusce venenatis tincidunt diam, quis euismod ipsum consectetur faucibus. Sed ac enim vel dui hendrerit dapibus. Nulla placerat nulla eu volutpat dapibus. Donec nisl sem, tempor venenatis tellus sit amet, faucibus interdum augue. Phasellus ultrices id neque nec bibendum. Quisque odio lorem, consectetur a metus id, venenatis malesuada sem. Mauris ut lorem sit amet magna mollis convallis dapibus ut nulla. Morbi euismod, dui nec dapibus auctor, nisl nisi bibendum ante, ac vehicula tellus risus a nibh. Donec porta adipiscing nunc, et pharetra leo mollis et.</p>

            <h3>H3 Tag Sample</h3>
            <p>Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit. Fusce venenatis tincidunt diam, quis euismod ipsum consectetur faucibus. Sed ac enim vel dui hendrerit dapibus. Nulla placerat nulla eu volutpat dapibus. Donec nisl sem, tempor venenatis tellus sit amet, faucibus interdum augue. Phasellus ultrices id neque nec bibendum. Quisque odio lorem, consectetur a metus id, venenatis malesuada sem. Mauris ut lorem sit amet magna mollis convallis dapibus ut nulla. Morbi euismod, dui nec dapibus auctor, nisl nisi bibendum ante, ac vehicula tellus risus a nibh. Donec porta adipiscing nunc, et pharetra leo mollis et.</p>

            <h4>H4 Tag Sample</h4>
            <p>Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit. Fusce venenatis tincidunt diam, quis euismod ipsum consectetur faucibus. Sed ac enim vel dui hendrerit dapibus. Nulla placerat nulla eu volutpat dapibus. Donec nisl sem, tempor venenatis tellus sit amet, faucibus interdum augue. Phasellus ultrices id neque nec bibendum. Quisque odio lorem, consectetur a metus id, venenatis malesuada sem. Mauris ut lorem sit amet magna mollis convallis dapibus ut nulla. Morbi euismod, dui nec dapibus auctor, nisl nisi bibendum ante, ac vehicula tellus risus a nibh. Donec porta adipiscing nunc, et pharetra leo mollis et.</p>

            <h2>Blockquote</h2>
            <p>
              Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit.
            </p>

            <blockquote>
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.
              <small>John Doe, CEO</small>
            </blockquote>

            <h2>Left Image</h2>
            <p>
              Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit.
            </p>
            <p>
              <img src="assets/images/blog-singlepost.jpg" alt="Image" width="300" class="pull-left img-align-left">
              Fusce rutrum ultrices augue, nec blandit sapien cursus et. Sed porttitor dui id mauris condimentum vestibulum. Praesent vitae ligula tristique ante malesuada bibendum et in nulla. Nunc ac facilisis diam. Sed non arcu sed nisl tempus eleifend sed eget arcu. Donec viverra adipiscing dignissim. Quisque elementum neque et lacus fringilla, vitae luctus felis tempor. Duis a auctor eros, congue sollicitudin lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>

            <h2>Right Image</h2>
            <p>
              Vestibulum purus est, dapibus vitae facilisis non, accumsan a ipsum. Quisque sollicitudin elementum iaculis. Curabitur ultricies nunc non augue elementum, eu pharetra lorem hendrerit. Nam ac mi placerat, porttitor lacus id, rutrum urna. Fusce nec feugiat nisi. Etiam nunc purus, cursus eu tincidunt ac, faucibus ac velit.
            </p>
            <p>
              <img src="assets/images/blog-singlepost.jpg" alt="Image" width="300" class="pull-right img-align-right">
              Fusce rutrum ultrices augue, nec blandit sapien cursus et. Sed porttitor dui id mauris condimentum vestibulum. Praesent vitae ligula tristique ante malesuada bibendum et in nulla. Nunc ac facilisis diam. Sed non arcu sed nisl tempus eleifend sed eget arcu. Donec viverra adipiscing dignissim. Quisque elementum neque et lacus fringilla, vitae luctus felis tempor. Duis a auctor eros, congue sollicitudin lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>
          </div>

          <div class="share">
            <div class="title bordered-title">
              <h2>Share Post</h2>
            </div>
            <div class="link">
              <a href="#"><div class="circle"><i class="fa fa-facebook"></i></div></a>
              <a href="#"><div class="circle"><i class="fa fa-twitter"></i></div></a>
              <a href="#"><div class="circle"><i class="fa fa-google-plus"></i></div></a>
              <a href="#"><div class="circle"><i class="fa fa-linkedin"></i></div></a>
              <a href="#"><div class="circle"><i class="fa fa-envelope"></i></div></a>
            </div>
          </div>
          <div class="comment">
            <div class="title bordered-title">
              <h2>Comments</h2>
            </div>

            <div class="comment-list indent-one">
              <div class="comment-container">
                <div class="avatar"><img src="assets/images/team1.jpg" alt="blog avatar"></div>
                <div class="content">
                  <h4 class="name">
                    Johnny Doe
                    <span><a href="#">Aug 11, 10:05 pm</a></span>
                  </h4><!--/.name-->
                  <div class="text">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                  </div><!--/.text-->
                  <div class="reply"><a href="#">Reply</a></div>
                </div><!--/.content-->
              </div><!--/.comment-container-->
            </div><!--/.comment-list-->

            <div class="comment-list indent-two">
              <div class="comment-container">
                <div class="avatar"><img src="assets/images/team2.jpg" alt="blog avatar"></div>
                <div class="content">
                  <h4 class="name">
                    Tiffany Morey
                    <span><a href="#">Aug 11, 10:05 pm</a></span>
                  </h4><!--/.name-->
                  <div class="text">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                  </div><!--/.text-->
                  <div class="reply"><a href="#">Reply</a></div>
                </div><!--/.content-->
              </div><!--/.comment-container-->
            </div><!--/.comment-list-->

            <div class="comment-list indent-one">
              <div class="comment-container">
                <div class="avatar"><img src="assets/images/team3.jpg" alt="blog avatar"></div>
                <div class="content">
                  <h4 class="name">
                    Colin Stewart
                    <span><a href="#">Aug 11, 10:05 pm</a></span>
                  </h4><!--/.name-->
                  <div class="text">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                  </div><!--/.text-->
                  <div class="reply"><a href="#">Reply</a></div>
                </div><!--/.content-->
              </div><!--/.comment-container-->
            </div><!--/.comment-list-->

            <div class="comment-list indent-one">
              <div class="comment-container">
                <div class="avatar"><img src="assets/images/team4.jpg" alt="blog avatar"></div>
                <div class="content">
                  <h4 class="name">
                    Tessa William
                    <span><a href="#">Aug 11, 10:05 pm</a></span>
                  </h4><!--/.name-->
                  <div class="text">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                  </div><!--/.text-->
                  <div class="reply"><a href="#">Reply</a></div>
                </div><!--/.content-->
              </div><!--/.comment-container-->
            </div><!--/.comment-list-->

          </div><!--/.comment-->

          <div class="respond">
            <div class="title bordered-title">
              <h2>Leave a reply</h2>
            </div>
            <form action="#">
              <div class="row">
                <div class="col-md-4">
                  <label for="author">Name<span class="required">*</span></label>
                  <input id="author" class="form-control" name="author" type="text" required>
                </div>
                <div class="col-md-4">
                  <label for="email">Email<span class="required">*</span></label>
                  <input id="email" class="form-control" name="author" type="text" required>
                </div>
                <div class="col-md-4">
                  <label for="url">Website<span class="required">*</span></label>
                  <input id="url" class="form-control" name="url" type="text" required>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label for="comment">Add Your Comment</label>
                  <textarea id="comment" class="form-control" name="comment" required></textarea>
                  <input name="submit" type="submit" id="submit" class="submit-btn" value="Submit Comment">
                </div>
              </div>
            </form>
          </div><!--/.respond-->

        </div><!--/.singlepost-->
        
        <div class="sidebar col-md-4">

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-align-justify"></i> Categories</h3>
            </div>
            <div class="content">
              <ul>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> News And Update 
                    <span>(13)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Interviews 
                    <span>(7)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Graphic And Web Design 
                    <span>(20)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Wordpress Hacks
                    <span>(34)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> Freebies
                    <span>(17)</span>
                  </a>
                </li>
              </ul>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-calendar-o"></i> Archives</h3>
            </div>
            <div class="content">
              <ul>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> January 
                    <span>(13)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> February 
                    <span>(7)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> March
                    <span>(20)</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="icon-caret-right"></i> April
                    <span>(34)</span>
                  </a>
                </li>
              </ul>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-tag"></i> Popular Tag</h3>
            </div>
            <div class="content">
              <span class="tag-label">Web Development</span>
              <span class="tag-label">Web Design</span>
              <span class="tag-label">Graphic Design</span>
              <span class="tag-label">UI/UX Design</span>
              <span class="tag-label">Photography</span>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-pencil"></i> Text Widget</h3>
            </div>
            <div class="content">
              <div class="text-widget">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div><!--/.content-->
          </div><!--/.section-->

          <div class="section">
            <div class="title bordered-title">
              <h3><i class="fa fa-envelope-o"></i> Newsletter</h3>
            </div>
            <div class="content">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Join Our Newsletter">
                <span class="input-group-btn">
                  <button class="btn" type="button">
                    <i class="fa fa-check"></i>
                  </button>
                </span>
              </div>
            </div><!--/.content-->
          </div><!--/.section-->

        </div><!--/.sidebar-->
      </div><!--/.container-->
    </section><!--/.blog-container-->
    <!-- BLOG-CONTAINER SECTION END -->

how do I accomplish this;
thanks!

Re: blog image

Hi there,

Well first of all, you need to get the css file and place the code on it, maybe its good to create a new css file and add it to your template blog file!

Then, replace the links with your links for monstra for example:

<div class="avatar"><img src="<?php echo Site::url(); ?>assets/images/team3.jpg" alt="blog avatar"></div>

So when you create your blog post you have everything connected wink

This is how your default blog post looks like:

<?php Chunk::get('header'); ?>
<div class="container-wide">

    <div class="container">

        <div class="row">
            <div class="col-xs-12">
                <?php Action::run('theme_pre_content'); ?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-8">
                <?php echo Blog::getPosts(3); ?>
            </div>
            <div class="col-xs-4 tags">
                <h3>Tags</h3>
                <?php echo Blog::getTags(); ?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <?php Action::run('theme_post_content'); ?>
            </div>
        </div>

    </div>
    
</div>
<?php Chunk::get('footer'); ?>

Here you leave it as it is.... You want to change the Div's only for the ones your new template have, so on this one you can change the divs to meet your design leave all the rest as it is now!

Edit the header.chunk.php file and place your new css files from your template.

Then on the file: blog-post.template.php you want to make the same thing to meet your criteria.

<?php Chunk::get('header'); ?>

<div class="container-wide">

    <div class="container">

        <div class="row">
            <div class="col-xs-12">
                <?php Action::run('theme_pre_content'); ?>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="monstra-blog-post">
                    <?php echo Blog::getPost(); ?>
                </div>
                <small class="monstra-blog-date"><?php echo Blog::getPostDate('d M Y'); ?> / <?php echo Blog::getPostAuthor(); ?></small>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <?php Action::run('theme_post_content'); ?>
            </div>
        </div>

    </div>
    
</div>
<?php Chunk::get('footer'); ?>

Just call the actions you want inside of your own design! big_smile

Thats it wink

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

Re: blog image

hi wormsunited,
This is blog morfy! no monstra.

Re: blog image

Howdy it works exactly the same way wink

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

Re: blog image

wormsunited wrote:

Howdy it works exactly the same way wink

bro is not the same

Re: blog image

Hi there mate!

What i want to tell you is that you need to replace the filespath like nakome said

<?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/blog/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/blog/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

Best regards wink

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

Re: blog image

good morning friend,
I'm trying to do but does not come out right sad

Re: blog image

Ok lets do this step by step then....

This is the basic structure for blog posts (as the default template) file => blog_post.html

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <h3><?php echo $page['title']; ?></h3>
      <p>Posted on <?php echo $page['date']; ?></p>
      <div><?php echo $page['content']; ?></div>   
      <?php Morfy::factory()->runAction('theme_content_after'); ?>
      <hr>
</div>
<?php include 'footer.html' ?>

Now to match your criteria you need to add your own theme, start by creating your folder under themes/my-wonderfull-theme and then copy all the files under default theme there!

Lets start:

1st => You need to check on your header.html file

By default it looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta name="description" content="<?php echo $page['description']; ?>">
    <meta name="keywords" content="<?php echo $page['keywords']; ?>">    
    <?php Morfy::factory()->runAction('theme_meta'); ?>
    <link rel="shortcut icon" href="<?php echo $config['site_url']; ?>/favicon.png">
    <title><?php echo $page['title']; ?></title>
    <!-- Bootstrap core CSS -->
    <link href="<?php echo $config['site_url']; ?>/themes/my-wonderfull-theme/css/bootstrap.min.css" rel="stylesheet"> <!-- EDIT THIS FILE -->
    <link href="<?php echo $config['site_url']; ?>/themes/my-wonderfull-theme/css/default.css" rel="stylesheet"> <!-- EDIT THIS FILE -->
    <?php Morfy::factory()->runAction('theme_header'); ?>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- Wrap all page content here -->
    <div id="wrap">

You need to edit the filepath of the links on your theme to match see on code the '<!-- EDIT THIS FILE -->' i placed there.

2nd => Lets check the footer.html in this cases normally I place there the scripts.js (for less load of the pages) see on code the '<!-- EDIT THIS FILE IF YOU NEED IT -->' i placed there for you.

    </div>
    <div id="footer">
      <div class="container">
        <p class="text-muted pull-right">Powered by <a href="http://morfy.monstra.org/" title="Simple and fast file-based CMS">Morfy</a>.</p>
      </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo $config['site_url']; ?>/themes/my-wonderfull-theme/js/jquery.min.js"></script><!-- EDIT THIS FILE IF YOU NEED IT-->
    <script src="<?php echo $config['site_url']; ?>/themes/my-wonderfull-theme/js/bootstrap.min.js"></script><!-- EDIT THIS FILE IF YOU NEED IT -->
    <?php Morfy::factory()->runAction('theme_footer'); ?>
  </body>
</html>

3rd => Now check your html version (the original one), now you need the midlle part for this template starts working ignore all the code as the header.html and footer.html you just want what is under the body section so you dont need to copy the hole page on it.

4 => grab a notepad ++ and hit serach and replace the filespath of your theme and that's it!

Conclusion:

You can paste html code on the md file and it reads perfectly (tested), all you need to do is replace the filespath.

Now if you need anymore help, please copy/paste here the full code of your theme and i will create it for you but my time is short, i promiss i will do my best to help you!

wink Best regards and good luck

http://monstracreative.com - themes, plugins and snippets for monstra cms

:: ATTENTION ::
Need help? Login at your account at: http://monstracreative.com/users/login. -> You have a excellent support center at our website! wink

Re: blog image

I think that was a misunderstanding!
I sent you private message thank!

19 (edited by dextra 2015-02-19 07:58:19)

Re: blog image

nakome wrote:

This is ease look this:

File library/Morfy.php line 78

    private $page_headers = array(
                                    'title'         => 'Title',
                                    'description'   => 'Description',
                                    'keywords'      => 'Keywords',
                                    'author'        => 'Author',
                                    'date'          => 'Date',
                                    'robots'        => 'Robots',
                                    'tags'          => 'Tags',
                                    'template'      => 'Template',
                                    'thumbnail'     =>  'Thumbnail'  // this is a new object
                                );

Md file like blog:

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.


Blog template

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/blog/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/blog/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

    <?php Morfy::factory()->runAction('theme_content_after'); ?>
</div>
<?php include 'footer.html' ?>


If you use in normal page  use:

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>
<div class="tumb">
    <img src="<?php echo $thumbnail;?>" alt="<?php echo $page['title'];?>">
</div>

Example
https://dl.dropboxusercontent.com/u/23834858/fotos/blog%20thubnail.jpg

news5.html

<?php include 'header.html' ?>
<?php include 'navbar.html' ?>
<div class="container">
    <?php Morfy::factory()->runAction('theme_content_before'); ?>
      <?php
            //  Morfy::factory()->getPages($url,$order_by,$order_type,$ignore,$limit);
            // $url  is a folder of posts
            $url = CONTENT_PATH . '/news5/';
            // $order_by is a order like date or title 
            $order_by = 'date';
            // $order_type is a order type  like ASC or DESC
            $order_type =   'DESC';
            // $ignore  = array of files to ignore
            $ignore =  array('404','index');
            // $limit is a number of posts
            $limit = 2;
            $posts = Morfy::factory()->getPages($url,$order_by, $order_type,$ignore,$limit);
            foreach($posts as $post) {

                // use default image if not write Thumbnail 
                $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

                echo '<h3><a href="'.$config['site_url'].'/news5/'.$post['slug'].'">'.$post['title'].'</a></h3>                
                <p>Posted on '.$post['date'].'</p>
                <div class="tumb">
                    <img src="'.$thumbnail.'" alt="'.$post['title'].'">
                </div>
                <div>'.$post['content_short'].'</div>';
            }
    ?>

    <?php Morfy::factory()->runAction('theme_content_after'); ?>
</div>
<?php include 'footer.html' ?>

news5_post.html

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>
<div class="tumb">
    <img src="<?php echo $thumbnail;?>" alt="<?php echo $page['title'];?>">
</div>

image not found!!

Re: blog image

Show me a screen of devtools form chrome

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..

Re: blog image

In localhost works!
while a server is not working
example tells me that the path of the image
http://mydomain.com/news5/public/images/default.jpg
http://postimg.org/image/jqrvrf65z/
http://postimg.org/image/bavek89qh/

Re: blog image

ok I found that is wrong wink

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.

change

Title: Example title one
Description: New Description  
Keywords: Keywords here
Author: Author
Date: January 11, 2014
Tags: Tags here
Template: index
Thumbnail: /public/images/image.jpg
--------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ut, aliquid modi consequatur vitae minima dolor quibusdam sit nisi eos temporibus exercitationem aperiam deleniti nesciunt dignissimos deserunt ducimus provident facilis.

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'public/images/default.jpg'; ?>

change

<?php $thumbnail =  ($page['thumbnail']) ? $page['thumbnail'] : $config['Site_url'].'/public/images/default.jpg'; ?>;

 $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'public/images/default.jpg';

change

 $thumbnail =  ($post['thumbnail']) ? $post['thumbnail'] : $config['Site_url'].'/public/images/default.jpg';

Re: blog image

Yes in new morfy  you need use this wink

..::: Moncho Varela ::::..   ..::: @Nakome ::::..   ..::: Github ::::..