public function indexAction() {
- $this->view->headScript()->addScriptAndStyle('blog-post');
+ $this->view->headScript()->addScriptAndStyle('610-blog');
//$parent = $this->view->currentPage->getParent();
//$parent_data = $this->getBootstrap()->getCMSDatasOfNavigationPage($parent);
$model = Fluidbook_Model_Blog::factory()
->order('publish_date DESC')
- ->where('id = ?', $this->getRequest()
- ->getParam('post_id'));
+ ->where('id = ?', $this->getRequest()->getParam('post_id'));
+
+ // Non-admin users can't see offline or future posts
+ if (!$this->isAllowed('edition')) {
+ $model->where('online = ?', 1);
+ $model->where('publish_date <= NOW()');
+ }
+
$post = $model->find();
if (count($post) < 1) {
// Get the first and only array item
$post = reset($post);
+ $post = $post->unserialize();
$this->view->post = $post->unserialize();
$this->view->headTitle($post->getTitle(), 'SET');
$intro_image->setMaxItems(1);
$this->addElement($intro_image);
- $intro_text_color = new Zend_Form_Element_Select('intro_text_color');
- $intro_text_color->setLabel('Intro Text Colour')
+ $intro_style = new Zend_Form_Element_Select('intro_style');
+ $intro_style->setLabel('Intro Block Style')
->setMultiOptions([
'light' => 'Light',
'dark' => 'Dark',
]);
- $this->addElement($intro_text_color);
+ $this->addElement($intro_style);
$intro_gradient_start = new CubeIT_Form_Element_Color('intro_gradient_start');
$intro_gradient_start->setLabel('Intro Gradient Start')
protected $intro_image;\r
protected $intro_gradient_start;\r
protected $intro_gradient_end;\r
- protected $intro_text_color;\r
+ protected $intro_style;\r
protected $content;\r
protected $publish_date;\r
protected $author_id;\r
$table->addColumn('intro_image', 'text');\r
$table->addColumn('intro_gradient_start', 'string', ['length' => 7]); // Hex code\r
$table->addColumn('intro_gradient_end', 'string', ['length' => 7]); // Hex code\r
- $table->addColumn('intro_text_color', 'string', ['length' => 7]); // light|dark\r
+ $table->addColumn('intro_style', 'string', ['length' => 5, 'default' => 'light']); // light|dark (used for setting text colour + header style)\r
$table->addColumn('content', 'text');\r
$table->addColumn('publish_date', 'datetime');\r
$table->addColumn('author_id', 'integer', ['unsigned' => true]);\r
/**\r
* @return string\r
*/\r
- public function backgroundBlock($content, $data, $class = array('content-wrapper', 'no-shrink'))\r
+ public function backgroundBlock($content, $data, $attributes = [])\r
{\r
- $style = '';\r
- $attributes = array('class' => $class);\r
+ if (!isset($attributes['style'])) {\r
+ $attributes['style'] = '';\r
+ }\r
+\r
+ if (!isset($attributes['class'])) {\r
+ $attributes['class'] = ['content-wrapper', 'no-shrink'];\r
+ }\r
\r
if (isset($data['backgroundimage']) && !isset($data['bg_image'])) {\r
$data['bg_image'] = $data['backgroundimage'];\r
$target_height = $mobile_max_width * $image_ratio;\r
$mobile = $this->imageProcess()->imageProcessGetURL($mobile_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
} else {\r
- $attributes['data-bg-ratio'] = $attributes['data-bg-ratio'];\r
$mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
}\r
} else {\r
- $attributes['data-bg-ratio'] = $attributes['data-bg-ratio'];\r
$mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
}\r
\r
}\r
\r
if (isset($data['bg_color'])) {\r
- $style .= "background-color:" . $data['bg_color'] . ";";\r
+ $attributes['style'] .= "background-color: {$data['bg_color']};";\r
}\r
- $attributes['style'] = $style;\r
\r
return $this->htmlElement($content, 'div', $attributes);\r
}\r
--- /dev/null
+<?php
+
+class Fluidbook_View_Helper_BlogBody extends CubeIT_View_Helper_Abstract {
+
+ public function blogBody(Fluidbook_Model_Blog $post) {
+
+ $res = '<div class="content-wrapper grid">';
+ $res .= '<div class="blog-post-body">';
+
+ foreach ($post->getContent() as $content) {
+
+ $res .= '<div class="block-'. $content->content_type .'">';
+
+ switch($content->content_type) {
+ case 'text':
+ $res .= $this->_text($content);
+ break;
+
+ case 'image':
+ $res .= $this->_image($content);
+ break;
+ }
+
+ $res .= '</div>'; // .block-$content->content_type
+ }
+
+ $res .= '</div>'; // .blog-post-body
+ $res .= '</div>'; // .content-wrapper
+
+ return $res;
+ }
+
+ protected function _text($content) {
+ return $this->markupDotclear($content->text);
+ }
+
+ protected function _image($content) {
+
+ $class = (!empty($content->image_style)) ? 'image-'.$content->image_style : '';
+
+ $res = '<figure class="image '. $class .'">';
+
+ if (!empty($content->image)) {
+ $res .= $this->imageCms($content->image, $content->image_caption);
+ }
+
+ if (!empty($content->image_caption)) {
+ $res .= '<figcaption>'. $content->image_caption .'</figcaption>';
+ }
+
+ $res .= '</figure>';
+
+ return $res;
+ }
+
+}
*/\r
public function blogIndex() {\r
\r
- $posts = Fluidbook_Model_Blog::factory()->order('publish_date DESC')->find();\r
+ $model = Fluidbook_Model_Blog::factory()->order('publish_date DESC');\r
+\r
+ // Don't show offline or future posts to non-admins\r
+ if (!$this->acl()->isAllowed('edition')) {\r
+ $model->where('online = ?', 1);\r
+ $model->where('publish_date <= NOW()');\r
+ }\r
+\r
+ $posts = $model->find();\r
\r
$res = '';\r
\r
foreach ($posts as $post) {\r
/* @var $post Fluidbook_Model_Blog */\r
- $res .= $this->post($post->unserialize());\r
+ $res .= $this->blogIntro($post, false);\r
}\r
\r
return $this->htmlElement($res, 'div', ['class' => 'blog-index']);\r
}\r
-\r
- protected function post($post) {\r
-\r
- $URL = CubeIT_Navigation_Page::generateAutoUri($post, Bootstrap::getBlogPostURLTemplate());\r
-\r
- $img = $this->view->imageCms($post->getIntroImage(), $post->getTitle(), null, null, ['class' => 'blog-hero-image']);\r
-\r
- $res = $this->link($img, $URL);\r
- $res .= '<br/>';\r
- $res .= $this->dateTime($post->getPublishDate(), CubeIT_Date::DAY .' '. CubeIT_Date::MONTH_NAME .' '. CubeIT_Date::YEAR);\r
- $res .= $this->link($this->htmlElement($post->getTitle(), 'h2'), $URL, ['class' => 'news-heading-link']);\r
- $res .= '<div class="acc">';\r
- $res .= $this->markupDotclear($post->getExcerpt());\r
- $res .= '</div>';\r
- $res .= $this->link(__('Lire la suite'), $URL, ['class' => 'read-more']);\r
- return $this->htmlElement($res, 'article');\r
- }\r
}\r
--- /dev/null
+<?php
+
+class Fluidbook_View_Helper_BlogIntro extends CubeIT_View_Helper_Abstract {
+
+ public function blogIntro($post, $is_single = true) {
+
+ $post = $post->unserialize();
+
+ $URL = CubeIT_Navigation_Page::generateAutoUri($post, Bootstrap::getBlogPostURLTemplate());
+
+ // This helper is used in two contexts: the blog index and on the single blog post
+ // In the blog index, the title should be a H2 and have a link on it
+ // In the single post view, the title is a H1 without a link
+ if ($is_single) {
+ $title = $post->getTitle();
+ $title_tag = 'h1';
+ } else {
+ $title = $this->link($post->getTitle(), $URL);
+ $title_tag = 'h2';
+ }
+
+ // Blog intro content structure
+ $res = '<div class="grid">';
+ $res .= '<div class="blog-intro-content">';
+ $res .= $this->dateTime(
+ $post->getPublishDate(),
+ CubeIT_Date::DAY .' '. CubeIT_Date::MONTH_NAME .' '. CubeIT_Date::YEAR,
+ ['class' => 'blog-intro-date']
+ );
+ $res .= $this->title($title, $title_tag, ['class' => 'blog-intro-title']);
+ $res .= $this->markupDotclear($post->getExcerpt(), [], ['class' => 'blog-intro-excerpt']);
+ $res .= '</div>'; // .col-2
+ $res .= '</div>'; // .grid
+
+ // Prepare data and attributes for use in the backgroundBlock helper
+ $data = [
+ 'title' => $post->getTitle(),
+ ];
+
+ $attributes = [
+ 'class' => ['content-wrapper', 'blog-intro', $post->getIntroStyle()],
+ 'style' => "background-image:linear-gradient(135deg, {$post->getIntroGradientStart()}, {$post->getIntroGradientEnd()});",
+ ];
+
+ if ($post->getIntroImage()) {
+ $data['bg_image'] = $post->getIntroImage();
+ }
+
+ return $this->backgroundBlock($res, $data, $attributes);
+ }
+
+}
\r
$res = $this->htmlElement($res, 'div', array('class' => 'col-2'));\r
$res = $this->htmlElement($res, 'div', array('class' => 'grid'));\r
- $res = $this->backgroundBlock($res, $cf, array('content-wrapper'));\r
+ $res = $this->backgroundBlock($res, $cf, ['class' => ['content-wrapper']]);\r
\r
return $this->htmlElement($res, 'section', array(\r
'class' => 'contactFooter section',\r
'data-themecolor' => '#8aab41', // Todo: possibly set this via the admin?\r
'data-section-name' => 'contact', 'data-puce' => __('Contact')));\r
}\r
-}
\ No newline at end of file
+}\r
\r
$content = $this->htmlElement($content, 'div', array('class' => 'content-inner'));\r
$content .= $outerContent;\r
- $content = $this->backgroundBlock($content, $this->data, array('content-wrapper', 'no-shrink', 'fullheight'));\r
+ $content = $this->backgroundBlock($content, $this->data, ['class' => ['content-wrapper', 'no-shrink', 'fullheight']]);\r
\r
return $this->htmlElement($content, 'section', $attributes);\r
}\r
-<?php // TODO: blog post detail view ?>
-<pre style="margin-top: 200px;">
- <?php print_r($this->post); ?>
-</pre>
+<?php
+
+$attributes = [
+ 'class' => 'blog-post-single',
+ 'data-header-theme' => $this->post->getIntroStyle(),
+];
+
+echo $this->htmlElement($this->blogIntro($this->post), 'section', $attributes);
+echo $this->blogBody($this->post);
+echo $this->contactFooter();
+
--- /dev/null
+@import "000-imports";
+
+.blog-index {
+ padding: 144px 0;
+
+ @media @m1280 {
+ padding: 86px 0;
+ }
+ @media @m900 {
+ padding: 96px 0;
+ }
+ @media @m768 {
+ padding: 68px 0;
+ }
+
+}
+
+
+.blog-intro {
+ display: flex;
+ align-items: center;
+ padding: 0 !important;
+
+ &.light {
+ color: #fff;
+ }
+
+ &.dark {
+ color: @color-text;
+ }
+
+ &-content {
+ flex-basis: 40%;
+ }
+
+ &-date {
+ display: block;
+ margin-bottom: 0.5em;
+ }
+
+ &-title {
+ color: currentColor !important;
+ font-size: 60px !important;
+
+ &:after {
+ background-color: currentColor !important;
+ }
+
+ a {
+ color: currentColor;
+ text-decoration: none;
+
+ &:hover {
+ color: currentColor;
+ }
+ }
+ }
+
+ &-excerpt {
+ font-size: 15px;
+ line-height: 1.7;
+ }
+
+ .picture {
+ @media @m1024 {
+ display: none;
+ }
+ }
+
+}
+
+
+.blog-post-body {
+ max-width: 1008px;
+ margin: 0 auto;
+ font-size: 24px;
+ line-height: 1.67;
+
+ > * + * {
+ margin-top: 1.5em;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+}
projects / fluidbook-v3.git / commitdiff