Structure for a blog

[Michkael]

Hi guys,

I am migrating my website into processwire and I have now to recreate the blog part.
On my homepage I have a carousel containing the previews of the last articles.
The user can now do two things:
1) Navigate to the Blog page, here there is an entire page with all the written articles directly accessible by clicking on them.
2) Click the preview of the article and directly navigate to the page of the article.
Look at the picture for reference.

My questions are:

1) Should I do a page "blog" and all the articles being children?
2) How can I shrink the image of the article to the right size to become the preview both in the blog page and in the home page?
3) How can I reuse informations like the date, author name, title of the article both in the blog and in the home page (in the previes).
4) Do I have to create a .php file for every children page?

Any additional advice is well accepted ?
Have a nice day.

Michael

[Peter Knight]

Hi Michael

Wether it’s a blog, or a news page or a product overview page, the fundamentals are the same.

1. This makes most sense and is a well organized structure. I like to create a page called blog. This is the blog homepage or overview listing a small preview of each blog post. In a sub folder under blog I actually store my blog posts in a sub folder called called posts. This is because within my blog folder I also have pages for tags and categories and archives  I want to keep them all orderly. You’re probably not at a point where you want tags and categories but it means in future you have the foundations in place. But even if you started out differently and realized you need to re organize everything further down the road, it’s a trivial thing to make your blog work with a different structure and some small changes to your selector in your template  

2  you can display a smaller image with css or look at the image api and specify a width or height etc  

3  on your blog article template, create a field for each and then pull this info onto any page you wish wether it’s the blog home or the homepage etc

4 you would have 1 blog post template and every page would be based on this template

Sorry this is so general with no actual examples but I’m typing on the phone.

 

[Michkael]

Thank you for your answers @Peter Knight.
Maybe you can help me with this additional question:

To put the least limitation possible, I let people insert images in the textarea field thanks to CKEditor.
Now the single image is not anymore in the responsive class, hence the size is not correct and when I decrease the screen size, the image is not resized.
I a normal case I would go and create a new style in the css, how should I proceed in PW?
Consider that there are at least 3 required sizes (notebook, tablet and phone).

Thank you

[szabesz]

Hello,

2 hours ago, Michkael said:

I a normal case I would go and create a new style in the css, how should I proceed in PW?

There are basically three approaches you can choose from:

1. "Styles" dropdown:
Make use of CKEditor's "Styles" dropdown, and define the styles the editors must apply to each image:
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/
https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#advanced-tips

2. by using Hanna Codes:
This approach is not for everyone but very versatile:
https://processwire.com/talk/topic/11549-insert-any-html-tag-with-attributes-using-hanna-code/
http://modules.processwire.com/modules/process-hanna-code/

3. automatically manipulate CKEditor content via custom coding:
https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&comment=172616
http://modules.processwire.com/modules/textformatter-fluid-images/
http://modules.processwire.com/modules/textformatter-make-links/
https://processwire.com/talk/topic/14835-module-textformatter-for-uikit-images/

Hope this helps.

 

[Peter Knight]

Which mobile framework are you using to build this? Are you using UIKit or Boostrap etc?

[Peter Knight]

8 hours ago, Michkael said:

Thank you for your answers @Peter Knight.
Maybe you can help me with this additional question:

To put the least limitation possible, I let people insert images in the textarea field thanks to CKEditor.
Now the single image is not anymore in the responsive class, hence the size is not correct and when I decrease the screen size, the image is not resized.
I a normal case I would go and create a new style in the css, how should I proceed in PW?
 

Is this image a general image that appears within the main blog content. Or is it the thumbnail image which is used on some overview pages to represent the main thumbnail image of an article/post ?

 

[Michkael]

I am using bootstrap.

I introduce the images via a field and upload them using the built-in image loader in CKEditor.
There I can modify the size but it won't be responsive. Isn't there a way to set only one dimension and let the other scale or something similar?
You can see the front-end on full screen, half screen and mobile in the attached images.

Moreover, If I add the string <br> in CKEeditor it print it out without converting it in a new line. And if I create the space pressing shift+enter, the processes version ignores it and stick all (images and text) togheter. Do you know why? I have tested ACF on/off, HTML purifier on/off, allow extra content <br> all succesless.

@Peter Knight Thank you for your support!
@szabesz I have noticed now your reply, I am gonna check it right now.

 

[Michkael]

On 12/9/2018 at 1:48 PM, szabesz said:

1. "Styles" dropdown:
Make use of CKEditor's "Styles" dropdown, and define the styles the editors must apply to each image:
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

I am very sorry for the ignorance but I don't know where to put the CSS file.
CSS admin goes here ->  /* /site/templates/styles/admin.css */
JS here -> // /site/templates/scripts/cke.js
and the CSS CKEditor where should it go?
The other link you pasted says you have to put the styles in : mystyles:/site/modules/InputfieldCKEditor/mystyles.js  could you please explain me the difference?

Quote

3. automatically manipulate CKEditor content via custom coding:
https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&amp;comment=172616
http://modules.processwire.com/modules/textformatter-fluid-images/
http://modules.processwire.com/modules/textformatter-make-links/
https://processwire.com/talk/topic/14835-module-textformatter-for-uikit-images/

For the module fluid image it adds aconfigurable CSS class, but where?
Thank you for your help @szabesz

[szabesz]

CKEditor is a nasty beast when it comes to configuring it, but I will try to help ? 

First things first, how to configure it: https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file

You probably did this but to make things clear: the field's type is Textarea, while the inputfield's type is CKEditor. So far so good ?  
On the Details tab: content type is recommended to be Markup/HTML and it should be. "Markup/HTML (Content Type)" option can be configured as required, as they do not affect the CSS we are dealing with.

The things in question be configured on the Input tab, under the CKEditor settings, so here come the interesting bits. Available core toolbar items are listed there, and as an example, here is what I often use:

PWImage, Format, Styles, RemoveFormat, Bold, Italic, NumberedList, BulletedList, PWLink, Unlink, Table, SpecialChar, Sourcedialog

Format and Styles are needed to make those dropdowns show up. If you do not have too many CKEditor fields on the edit page then I recommend setting them to "Regular Editor". We have a thread of discussing settings, BTW: https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/

Turning ACF and HTML Purifier on is generally recommended, however, they might make things harder in terms of keeping those HTML bits intact when saving the page. In the case of ACF, you need to deal with "extra allowed content" so that your code actually gets saved as intended. Here are some forum topics to tackle some issues that may arise:

https://processwire.com/talk/topic/19519-ckeditor-and-extra-allowed-content/
https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&amp;comment=172616
https://processwire.com/talk/topic/12773-ckeditor-does-not-reapply-styles/#entry116174

Normally I turn ACF on, but keep HTML Purifier off in some cases, as I usually use "Regular Editor" instead of "Inline" and have trusted users. However, HTML Purifier is good for making sure only valid code is saved, so it is a trade off not to turn it on. When I do use HTML Purifier, then I sometimes temporarily turn it off during development but I make sure to turn in on for the production site, even for trusted users. If you run into troubles, try turning it on and off to see what it changes in the source.

Sadly, HTML Purifier is not yet configurable in ProcessWire. You can give this request a thumb's up though: https://github.com/processwire/processwire-requests/issues/226

Setting up Format Tags is self explanatory, usually I use at least the minimum of p;h2;h3;h4;h5 (h1 is always generated by the template file so no need to include it).

Extra Allowed Content is very important, normally I use this:

p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*};i(*)[*]{*};tr(*)[*]{*};*[id];*(class);

*[id] and *(class) are somewhat redundant as they allow any IDs and any classes while (*)[*] also allow any of those in the case of the element they are applied to.

Now we are getting to the bits you are probably concerned with:

• Custom Editor CSS File (regular mode) - which can be used to style the HTML of content editor itself as opposed to the frontend 
• Custom Editor JS Styles Set - this is the file you need when you want to define styes for the Style toolbar dropdown
• Custom Config Options - the notes of the field read: these settings can also be set in one of these files (e.g.) ...config.js and ...config-body.js and this is what I normally use.

To configure these options properly this is what you need to tripple check:

• Make sure: you did create the directory /site/modules/InputfieldCKEditor/ and copied the file called mystyles.js from /wire/modules/Inputfield/InputfieldCKEditor/ to its counterpart: /site/modules/InputfieldCKEditor/
• Make sure: files in the directory /site/modules/InputfieldCKEditor/ are named exactly as the ones configured in the options.
• In the case of Custom Editor JS Styles Set, make sure that in the JS file the function parameter reflects the name you defined in the admin. The default is "mystyles", defined this way: mystyles:/site/modules/InputfieldCKEditor/site_styles.js which means that in the JS file you need CKEDITOR.stylesSet.add( 'mystyles', [... but if you want to use a different string, then replace "mystyles" both in the admin's configuration filed and the accompanying JS file, something like: cke_extra:/site/modules/InputfieldCKEditor/my_extra.js and CKEDITOR.stylesSet.add( 'cke_extra', [...

Regarding the configuration files themselves, here is an example for config-body.js:

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.uiColor = '#AADC6E';
    //config.enterMode = CKEDITOR.ENTER_BR; // stops new <p> tags from being added, adds <br /> instead.

    config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g); // needed for empty <i> tags (icons)
    config.protectedSource.push(/@/g); // needed for empty <i> tags (icons)
    /* If this one is enabled:
     * config.allowedContent = true;
     * then it is not possible to stop adding widht and height to images */
    config.disallowedContent = 'img[width,height]'; // to stop adding widht and height to images
};
CKEDITOR.dtd.$removeEmpty['i'] = 0; // needed for empty <i> tags (icons)

Regarding mystyles:/site/modules/InputfieldCKEditor/mystyles.js here is one approach for UIkit 3:

CKEDITOR.stylesSet.add( 'cke_extra', [
 { name: 'Normal Paragraph', element: 'p', attributes: {'class': 'site-paragraph'} },
 { name: 'Clear runaround', element: 'p', attributes: {'class': 'uk-clearfix'} },
 { name: 'Warning Paragraph', element: 'p', attributes: {'class': 'uk-alert-warning', 'data-uk-alert': ''} },
 { name: 'Success Paragraph', element: 'p', attributes: {'class': 'uk-alert-success', 'data-uk-alert': ''} },
 { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-body-img'} },
 { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-body-img'} },
 { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-body-img'} },
 { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-body-img'} },
 { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-body-img'} },
 { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-body-img'} },
 { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center site-body-img'} },
]);

This method above defines classes for the Style toolbar dropdown in a way that more than one class or attribute is applied to the selected element. For example align_left is applied because the default ProcessWire CKEditor class for left align is this (see this post). However, to make sure that in the frontend the same element is also aligned to the left, I also apply uk-float-left uk-width-1-2@s to it. This is just a dead simple approach but you can make it more sophisticated.

If you want to turn CKEditor into a WYSIWYG editor then you need do some extra work, because you need to make sure your contents.css defines the classes and styles also used on the fronted. I have not ventured too far in this direction though. Normally I use UIkit 3 on the frontend and not in the admin so I simply mimic the most important subset of the frontend's styles in contents.css. I will need to improve on this practice but only after I have switched from the Reno Admin Theme to Admin Theme UIkit.

I hope I cleared up a few things for you. I you want even more tips form others, I recommend using google to search like this: https://www.google.hu/search?q=CKEditor+site%3Aprocesswire.com%2Ftalk&amp;oq=CKEditor

[Peter Knight]

Hi @Michkael

I haven't read back through the previous posts so apologies if this is addressed above by someone else.

Responsive Images
I primarily use UIKit (v3) for my sites and one thing I really like is that images are responsive by default and don't require any extra markup.

Quote

Images and other elements like <audio>, <canvas>, <img>, <svg> and <video> are responsive by default in UIkit. If the layout is narrowed, they adjust their size and keep their proportions. To prevent this behavior, add the .uk-preserve-width class from the Utility component to the element or any container.

This is particularly useful for clients because they don't have to apply any CSS to their images. I like to keep things super-simple for my clients to save them having to remember CSS class names and it also keeps my support times down.

Blog Overview Structure

My blog 'Overview' page is very simple and here's a simple wireframe.

To have the blog overview page populate with content, I am only asking my clients for a few simple items

1. Create a page with template=blog-post
2. Add a preview image (the thumbnail above) to an images field
3. Complete a field called blog-summary

The key thing here is really how you handle the preview image and there's a couple of ways to do this as outlined in the help docs

FIRST IMAGE

You can can tell your client that the first image in an image file will always be the preview thumbnail. This has worked well for me. 

// grab and output first image
$image = $page->images->first();
if($image) echo "<img src='$image->url'>";

or

IMAGE WITH TAG

You can tell your client to 'tag' an image within an image field to make it the preview thumbnail. That works well too. 
 

// retrieve first image with tag 'mytag'
$image = $page->images->getTag('mytag');

or

SPECIAL IMAGE FIELD

You could always create a specific images field just for the thumbnail and limit it to 1. That way your client has zero configuration.

I know some of the guys like to keep their fields to a minimum and usually I too try to avoid this. I make a call based on the actual client and their level of experience with CMS etc.

 

Blog Post Structure

On the actual blog post, I almost always have the preview image as the first image in the post.

Crucially, this is added automatically by my PHP / templating.

IE client only adds an image once for it to be both

• thumbnail
• intro image

For the other images within the body of a post (number 2 and 3 below), it's up to the client to add these to the images field and then apply via the text editor etc.

 

So I never run into the issue you mentioned re CSS and images.

 I know there are ways to add CSS to the CK Editor and ask the client to apply them but I try to steer clear of that. To me, a CMS is a content tool. Not a design tool. Telling clients they have formatting options within the CKEditor field beyond H1, H2 etc opens up the possibility for them to get 'creative' and can quickly make the site content look messy.

If I really, really had to apply CSS to the images within the body field, I would probably look at something called field templates which was announced a while back.

I can't recall but i *think* this allows you to specify a mini field template. Within that you could probably target your images with something like

.my-body-template img
{
    // css rules
}

Might be worth a look.

 

[Michkael]

Thank you for the time you took to answer.
@Peter Knight unfortunately I am using bootstrap on this template, the next time I will consider uikit, this is not the first time people suggest me to switch ?
@szabesz Thank you thank you. Now I see how it works. This answer should be pinned as tutorial for CKEditor!