Excerptsplus For Headway3

Excerpts+ for Headway 3
Excerpts+ for Headway 3

1 Introduction 1.1 2 About Excerpts+ 5
Installation 2.1 2.2 Installing Excerpts+ for the first time Installing on a site with Excerpts+ already installed 8 9
Using Excerpts+ 3.1 Adding an Excerpts+ block 11
Excerpts+ Options 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 Help Structure Layout Filters Titles Content Excerpts Meta Images 13 14 16 18 19 20 21 22 24 25 27 28 29 31
4.10 Image Sizing 4.11 Sliders 4.12 Developer 4.13 Hooks 4.14 Advanced Styling 5 Excerpst+ Styling 5.1 Styling Excerpts+ using the Headway 3 Design Editor
34
Tips and HowTos 6.1 6.2 Examples CSS Selectors 38 42
Introduction
Excerpts+ for Headway 3 - 4
Excerpts+ v2.0 User Guide
About Excerpts+
The Excerpts+ block provides added design and layout functionality to the Headway WordPress theme framework. It can be used to setup magazine layouts, fancy recent posts lists, featured post sliders, image rotators and much more.
What's New in Excerpts+ for Headway 3

Easy styling using Headway 3 Design Editor Greatly improved automatic calculation of cell sizes Options for cell padding and cell vertical gap Help panel with link to User Guide Advanced styling options panel Hooks for inserting your own code Developer options Improved management of image caching
Other Features
Excerpts+ version 2.0 is chock full of awesomeness: Pagination Uses first image if no featured image set User configurable layout Full content display option Option for image borders Uses category when on category archive page Uses author when on author archive page
Option to exclude specific posts or pages Option to show child pages of a page NextGen Gallery support Vertical crop alignment All new image processing system Crop alignment of images
System Requirements
WordPress 3.1 or greater Headway 3.0 or greater PHP with GD image processing library (99% of hosts provide this by default).
Contact
User support forums: support.headwaythemes.com (login required) Advanced technical support orto report errors in this guide: support@341design.com.au WordPress user support: wordpress.org/support
Disclaimer
This document Copyright 2012, Chris Howard Author: Chris Howard Revision: 1, 20 January, 2012 Headway is a product of Headway Themes headwaythemes.com WordPress is an Open Source, content management system (CMS) and a project of wordpress.org.
Installation
Installing Excerpts+ for the first time

If you have previously installed Excerpts+ on your site, you will need to follow the instructions below, for Installing on a site with Excerpts+ already installed. Headway blocks are plugins, and as such, are installed using the WordPress plugin installer. For this, you will need the Excerpts+ ZIP file that you downloaded from Headway Themes. On some systems, it may have been automatically decompressed. In that case, check in your computers Trash or Recycle Bin and copy it to somewhere on your hard drive. If you need more help on using WordPress, there is no better place for beginners tutorials than wp101.com.
The quick version

Use your sites WordPress plugin installer and activate the plugin once installed.
Step-by-step
In your WordPress, under the Plugins section, select the Add New plugin option and upload the Excerpts+ ZIP file.
Activate when prompted Thats it! You can now move on to chapter 3, on Using Excerpts+.
Installing on a site with Excerpts+ already installed

The quick version
The process for installation over an existing Excerpts+ is to deactivate existing one, install and activate the new Excerpts+ using the WordPress plugin installer, and then work through all existing Excerpts+ blocks ensuring all their settings are correct, paying particular attention to Image Widths, and the Structure. You will also need to re-publish any page with Excerpts+ blocks on it., even if you dont make any other changes.
Step-by-step
In your WordPress, under the Plugins section, find and deactivate your existing Excerpts+ block plugin. If you do not deactivate the old one first, you will get a fatal error message.
Still in the Plugins section, select the Add New plugin option and upload the Excerpts+ ZIP file.
Activate it when prompted. Thats it! You can now move on to chapter 3, on Using Excerpts+.
Using Excerpts+
Adding an Excerpts+ block

Adding an Excerpts+ block is the same process as adding any block in Headway. The Excerpts+ block will appear in the list of available blocks under More Blocks in the block selection menu.
This will create an empty Excerpts+ block that you can then start configuring to your hearts desire. (Remember to hit the Visual Editor's save button)
Excerpts+ Options
Help
The help options prove some useful links (including to the page this guide is stored on) and information
Structure
The Structure enable you to control the structure of each Excerpts+ cell. There are five rows and you can choose what appears in each. This enables you to easily control the order the title, image, meta data and excerpt appear in. Note: If you set any cells to display Image, the image width will automatically default to the full width of the cell. However, using cells for image location will be totally ignored unless the Image Location is set to "Use Structure Position".
Cell row 1
Choose the content type you want to display from Title, Meta1, Image, Content/Excerpt, Meta2.
Cell row 2
Cell row 3
Cell row 4
Cell row 5
Vertical alignment when image location is behind

Choose if you want the block of cells to align to the top or bottom of the image. (See examples below)
Cells aligned with bottom of image Excerpts+ for Headway 3 - 14 Excerpts+ v2.0 User Guide
Cells aligned with top of image
Layout
Number to show
Choose how many excerpts to show. Note: If pagination is enabled, this becomes the number shown per page.
Number across
Choose how many excerpts you'd like to display in each row.
Cells Vertical Gap

This sets the vertical gap between each cell across.
Cell Padding
Choose how much padding, that space, you want to put between the edge of the cells and their content
Number to show as full width content

If you have chosen to show excerpts, this option allows you to ovveride it for a specified number of posts therefore choose how many to post display their full content for. After this number is reached, only the excerpts will show.
Order
Set the order of the list posts to either descending or ascending.
Order by
Choose what order you'd like the excerpts to appear. Options are Date created; Date last modified; Author; Title; Comment count; Random; and Page order.
Link to text
You can display an additional link at the foot of your excerpts, for example to take you to all posts in the category of excerpts you've shown. This option lets you set the text for that link. Leave blank for none.
Link to URL
URL of additional link in the footer of your excerpts. Leave blank for none. Excerpts+ for Headway 3 - 16 Excerpts+ v2.0 User Guide
Row border
Choose whether to display a border under each row of excerpts.
Pagination
If enabled, it will display next/previous posts indicators, allowing readers to page through your posts. Note: NEVER put more than one block on a page that allows pagination. It could really mess up post navigation on that page and confuse the heck out of your readers.
Filters
Include Categories
Select categories to display.
Must be in ALL included categories

This changes the Include Categories from being any posts that are a member of any of the selected categories, to being posts that are a member of all of the selected categories.
Exclude Categories
Select posts in categories to exclude.
Author
Choose posts to display for an author or all.
Show Sticky posts first

Option to show sticky posts before other posts. Note: Due to a WordPress issue, this will display all posts, regardless of categories included or excluded
Include sub-categories when E+ is displaying on a Category Archive page

If the E+ block is displayed on a Category Archives page, select this if you wish to show the children of the category as well
Titles
Block Tittle
Here you can set an overall title for the block
Block title URL

And you can set the block title to link to another page on yours or anyone's website
Post Title Bullet

Precede the title with a bullet.
Post title background tint % (when Image Behind is selected)

The percentage of shading of the tint used behind the text info when image location is set to behind.
Post title background tint colour (when Image Behind is selected)

The colour of the tint used behind the text info when image location is set to behind.
Don't link to post/page

If selected, the title wil not link to the post/page
Link "Go to" text

Sets the preceding text for the tooltip when the user hovers over the link
Content
Content type
Choose the content type you want to display: Posts, pages or custom post types (if available).
Show full content or excerpt only

Choose whether you want to show and excerpt or the full content in each cell. If you choose Excerpt, you may also choose Styled Excerpt. To use styled excerpts, you will need the TinyMCE Excerpt plugin for WordPress. If you want to have user definable excerpts for pages, then try the Page Excerpt plugin for WordPress.
Specific IDs (optional)

Specify IDs of posts or pages or custom post types if you want to limit to specific content.
Show children of specific IDs (Page types only)

If you want to show the child pages of a particular page, then enter that pages ID in the Specific IDs, and enable this setting.
Exclude Specific IDs

If enabled, the specified IDs above will be excluded. Useful for excluding the pages like the 404 page when type is pages.
Skip n posts
Skips the chosen number of posts.
Excerpts
Note: If you wish to have true Page excerpts, the Page Excerpt plugin (wordpress.org/extend/plugins/page-excerpt/) is fully Excerpts+ compatible.
Excerpt Length
Number of characters or words of the excerpt to show. If the number is greater than the excerpt length, it will only show the full excerpt.
Characters or Words
Choose to trim excerpt length by characters or words
Truncation character
If the excerpt is truncated, choose the character to indicate this. Options are Ellipses, Arrows or none
Read More text

Wording to use to indicate to read more. If you want to include the post title, add %title% to the text entered.
No Excerpt/Content message
Text to display when no content.
Excerpt first, then list

Enable this if you only want to show an excerpt for the first post, then just a list of titles thereafter. Note: This only works when Number Across is set to one
Meta
Meta is nerdy sounding name for all the bits of extra information associated with a post. Things like date of publication, author, categories, comment count.
Meta information 1
Define content for the first meta info area. This can include text and HTML. For more on the available variables, please in your sites Headway configuration page for Posts. Default: %author% - %date%, %time%<br/>%categories%
Meta information 2
Define content for the second meta info area. This can include text and HTML. For more on the available variables, please in your sites Headway configuration page for Posts. Default: %comments_link%
Date format
Date format to use in meta info. Use %date% in meta content to show the time. See codex.wordpress.org/Formatting_Date_and_Time. for more information on formats available. Default: F j, Y
Time format
Time format to use in meta info. Use %time% in meta content to show the time. See codex.wordpress.org/Formatting_Date_and_Time. for more information on formats available. Default: g:i a
Show author picture

Option to show or hide the author of the post's picture.
Author picture width

Set the width to use for the author's picture. This will automatically apply to the height as well.
Category archive title

Set a title or not for the Category Archives page. Include %categories% for category names. Default: Showing by category: %categories%
Author archive title

Set a title or not for the Author Archives page. Include %author% for author name. Default: Showing by author: %author%
Images
Note: The default image used is the Featured Image of the post. This can be set under the Publish/Preview button. If it is not set, then Excerpts+ will attempt to use the first image it finds in the post.
Image location
Choose where to display the image: Next to the title ; In the content; Behind the excerpt content; or Use structure position to use the position set in the Structure settings
Image alignment
Option to position image to the left or right when location is in the content or the title, or centre if image location is in the content.
Align title, meta and content/excerpt with image

This will vertically align the all the text information with the image, instead of wrapping around the image.
Image borders
Show border around images.
Do not recreate images for this block

By default, this block's images will be recreated when publishing or refreshing in the Visual Editor. Once you are happy with the images for this block, then check this so they don\'t get rereated each time. This has no effect other than saving the time it takes to reload the Visual Editor.
Image Sizing
Image width
Set the width (in pixels) for the displayed image. Note: The image width is only used when the Image Location is either Title or Content. In all other uses, the image will take the full width of the cell.
Image height
Set the height (in pixels) for the displayed image.
Force image width Image quality

Lower values will reduce the size of the file but also reduce the clarity of the image. Higher values will make images slower loading. Value range is 0 to 100. However, if zero it will default to 70.
Vertical crop alignment

Choose how you want to vertically align the main image when it crops. Options are: Centre Top Top quarter Bottom quarter Bottom In the cropping examples below, you can see how the beginning point for cropping moves further down with each selection.
This is one you will really have to experiment with to find what suits the particular block and its images the best.
Horizontal crop alignment

Choose how you want to horizontally align the main image when it crops. Options are: Centre Left Left quarter Right quarter Right
Image resizing method

Choose how you want the image resized in respect of its width and height to the Display Image Height and Width Options are: Crop width and height to fit Stretch to width and height (Warning: Can distort image) Crop width, match height Match width, crop height Fit within width and height
Image fill color

Choose a fill colour for when an image doesn't fully fill the frame
Maximum image dimensions

This setting will limit source image maximum dimensions. eg. 1000x1000px. This is a preventative in case the site's users upload large dimension images - eg. 3000x2000 - which chew memory and slow down the system. Higher values may even cause the site to break on larger images if it runs out of memory. If an image exceeds this dimension, a grey box will display instead. Leaving it blank or zero will process the image as normal.
Sliders
Display as slider
Display excerpts in a slider instead of a multi-row grid. Each row will become a slide
Slide time
Input (in seconds) how long each slide should be displayed.
Slide transition
Select the type of transition you'd like between slides. Options are: Fade Slide
Transition time
Input (in seconds) how long the transition should take. Enter 0 to use mouse click to change slides.
Pager type
Select the type of display for the slide pager (i.e. navigation). Options are: Bullets Numbers None
Is the block background light or dark?

Select whether the colour behind the navigation is a light or dark shade. (This does not change the background of the block, merely the colour of the pager.) This option is provided so to make your navigation more visible depending if your background is dark or light.
Developer
These options are targetted at web developers who are familar with coding
Permalink rel
This option allows you to enter a custom Rel attribute as some plugins use the permalink Rel attribute wth their own code.
Permalink class
This option lets you set a custom class name for the permalin as some plugins use a specific class name
Adjust box calculation by

If you manuallly add padding or margins in custom CSS, it can throw out the automatic calculation of the cell widths. This option provides a "fudge" factor to let you comepnsate for that.
Show debug info

When activated, dumps heaps of variables which may be of use to a developer, but is defintiely of use for E+ debugging.
Hooks
Another one for the deloper types. Hooks allow the insertion of code in certain points on the page. The code must be valid PHP (without the <?php ?>). Therefore, HTML must be echoed. The names are self-explanatory.
Before title
Code entered here will target the hook named ep_before_title
After title
Code entered here will target the hook named ep_after_title
Before meta 1
Code entered here will target the hook named ep_before_meta1
After meta 1
Code entered here will target the hook named ep_after_meta1
Before meta 2
Code entered here will target the hook named ep_before_meta2
After meta 2
Code entered here will target the hook named ep_after_meta2
Before image
Code entered here will target the hook named ep_before_image
After image
Code entered here will target the hook named ep_after_image
Before content
Code entered here will target the hook named ep_before_content
After content
Code entered here will target the hook named ep_after_content
Before cell row 1

Code entered here will target the hook named ep_before_cellrow1
After cell row 1

Code entered here will target the hook named ep_after_cellrow1
After cell row 2

After cell row 3

After cell row 4

After cell row 5

Advanced Styling
These options let desingers easily apply custom styling to some elements. It's most useful for elements you want to apply a gradient to.
Block Title
Input custom CSS to style the block title (if used). Is applied to CSS selector: .ep-block-title
Block
Input custom CSS to style the block. Is applied to CSS selector: .excerpts-plus
Excerpt+ Cell
Input custom CSS to style each excerpt+ cell. Is applied to CSS selector: .ep-cell
Cell Row 1
Input custom CSS to style cell row 5. Is applied to CSS selector: .ep-cellrow1
Cell Row 2
Cell Row 3
Cell Row 4
Cell Row 5
Read More
Input custom CSS to style the Read More link. Is applied to CSS selector: .excerpt-read-more
Page Navigation
Input custom CSS to style page navigation buttons. Is applied to CSS selector: .ep-nav
Excerpst+ Styling
Styling Excerpts+ using the Headway 3 Design Editor

Excerpts+ Block
When you select the Excerpts+ Block in the Design Editor, the first panel of options shown is the general settings for the Excerpts+. If an Instance is not selected, then any change syou make, either here or in each specific element's options panel, will apply to every Excerpts+ block. So make sure to first select an Instance if you only want to apply it to a specific block. This panel provides formating for: Background Borders Rounded Corners Box Shadow and is applied to the css selector .block-type-excerpts-plus
Cell Wrapper
This panel provides formating for: Background Borders Rounded Corners Box Shadow and is applied to the css selector .excerpts-plus
Cell
This panel provides formating for: Background Borders Rounded Corners Box Shadow and is applied to the css selector .ep-cell
Block Title
This panel provides formating for: Fonts Text Shadow Background Borders Rounded Corners Box Shadow
and is applied to the css selector .ep-block-title
Block Title Hyperlink

This panel provides formating for: Fonts Text Shadow Background
and is applied to the css selector .ep-block-title a
Title
and is applied to the css selector .excerpt-title h2.entry-title
Meta
and is applied to the css selector .ep-meta.entry-meta
Meta Hyperlinks
and is applied to the css selector .ep-meta.entry-meta a
Body Text
and is applied to the css selector .excerpt-content
Body Text Hyperlinks

and is applied to the css selector .excerpt-content a
Read More
and is applied to the css selector a.excerpt-read-more
Page Navigation
This panel provides formating for: Fonts Text Shadow Background Borders Rounded Corners Box Shadow
and is applied to the css selector .ep-nav
Tips and HowTos
Examples
The following examples provide some info on how different lexcerpts layouts on the Excerpts+ demo pages were formed
Using Pagination
Pagination is when WordPress allows you to page through your posts. Youll see the Previous and Next buttons at the foot of posts when pagination is enabled. Key settings: Layout- Pagination: Enabled; Layout - Number to show full width: 1; Images - Image Location: Title; Images - Image Position: Left; Images - Title aligned with content : Enabled
Using Excerpts+ like an Image Rotator
An image rotator takes its image from a gallery or specified URLs. With Excerpts+, they are taken from the posts or pages. Consequently, it would be a little clunkier to use Excerpts+ as an image rotator than a specific plugin or block, but sometimes, it might be the right tool for the job. Excerpts+ for Headway 3 - 38 Excerpts+ v2.0 User Guide
Key settings: Structure - Cell Row 1 : Image (others: None) Layout - Number Across: 1 Filters - Include Categories: Choose a category were all the posts have images Image Sizing - Image Height: Of your choosing Sliders - Display as a slider: Show Sliders - Pager type: NoneNote: The Image Width is not used, because locating the image in a cell makes the image the full width of the cell.
Key settings: Structure - Cell Row 1: Title Structure - Cell Row 2: Content Structure - Vertical Alignment : Bottom Layout - Number Across: 1 Filters - Include Categories: Choose a category were all the posts have images Image Sizing - Image Height: Of your choosing Sliders - Display as a slider: ShowNote: The Image Width is not used, because locating the image in a cell makes the image the full width of the cell.
Using the Title and Content alignment
A popular design feature is showing an image, then aligning all the content with its right edge, so that the space underneath the image is empty. This is as simple as enabling it in Excerpts+. Plus, if a post doesnt contain a Featured Image, the layout in that cell will adjust accordingly, keeping everything very neat. Key settings: Excerpts+ for Headway 3 - 39 Excerpts+ v2.0 User Guide
Images - Align excerpt with title when image in title: Enabled Images - Image Location: Title Images - Image Position: Left(right works too, but its not as obvious) Note: Dont overdo the image width, because if the image takes up too much width of the cell, the content will get all squished.
Show one excerpt then the remainder as a list of titles
This is a layout commonly used on magazine and news sites where they want to show an excerpt of the first story in a category, and then title links for for then next five or so. Key Settings: Layout - Number across: 1 Excerpts - Excerpt first then list: Enabled Note: This feature only works when Number across is set to one - otherwise it would all look too messy.
Three examples of using the Structure editor to get different layouts
In the above example, the image is display within the content/excerpt. Excerpts+ for Headway 3 - 40 Excerpts+ v2.0 User Guide
This example shows when the Image Location is set to Behind. The cells are aligned to the bottom of the image. Note how unused cells are ignored.
Thirdly, an example that shows the image location being set by the structure.
CSS Selectors
Okay, this chapter is for the design freaks who really want to get their hands dirty. Excerpts+ has many CSS classes you can use to uniquely style your or your clients site using Headways Live CSS Editor, or custom.css file.
Some useful Excerpts+ CSS classes

.excerpts-plus-excerpt .excerpts-plus-row ep-more-indicator (this is the ellipses) a.excerpt-more-link (this is the text) .excerpt-linkto .excerpt-title .entry-title a .excerpt-content .ep-show-border-content img .ep-show-border-title img .ep-show-border-none img (i.e. this is when the image is in the structure) .ep-cell .ep-cell-container .ep-cellcol1 (Contains image when title location, position left and title aligned).ep-cellcol2 (Contains the cell rows).ep-cellcol3 (Contains image when title location, position right and title aligned) .ep-cellrow1 ( and 2,3,4,5 These are the rows set in the Structure). excerpts-plus-excerpt-behind .slider.slider-slide .slider-bglight. slider-bgdark .slider-bullets .slider-numbers Also, each cell, at the ep-cell level, is assigned a unique call consisting of the cell number and the block ID in the form ep-cell-no-CC-block-id-LL where CC is the cells number, and LL is the id of the block. Heres a few examples: /* Colour excerpt titles red but only in sliders */ body.custom .slider .excerpt-title a { color: red; } /* Colour excerpt content navy and it's background grey, but only when content is displayed in cell row 3 */ body.custom .ep-cellrow3 .excerpt-content { color: navy; background:grey; } /* Change the background tint colour of the text area when using image behind.*/ body.custom div.excerpts-plus-excerpt-behind .ep-cell-container { background: rgba(96,127,192,0.7)!important; }

Excerptsplus For Headway3

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Excerptsplus For Headway3

Transféré par

Droits d'auteur :

Formats disponibles

Excerpts+ for Headway 3

Excerpts+ for Headway 3

Using Excerpts+ 3.1 Adding an Excerpts+ block 11

Tips and HowTos 6.1 6.2 Examples CSS Selectors 38 42

Excerpts+ for Headway 3 - 4

Excerpts+ v2.0 User Guide

What's New in Excerpts+ for Headway 3

Excerpts+ for Headway 3 - 5

Excerpts+ v2.0 User Guide

Excerpts+ for Headway 3 - 6

Excerpts+ v2.0 User Guide

Excerpts+ for Headway 3 - 7

Excerpts+ v2.0 User Guide

Installing Excerpts+ for the first time

The quick version

Excerpts+ for Headway 3 - 8

Excerpts+ v2.0 User Guide

Installing on a site with Excerpts+ already installed

Excerpts+ for Headway 3 - 9

Excerpts+ v2.0 User Guide

Excerpts+ for Headway 3 - 10

Excerpts+ v2.0 User Guide

Adding an Excerpts+ block

Excerpts+ for Headway 3 - 11

Excerpts+ v2.0 User Guide

Excerpts+ for Headway 3 - 12

Excerpts+ v2.0 User Guide

Excerpts+ for Headway 3 - 13

Excerpts+ v2.0 User Guide

Vertical alignment when image location is behind

Cells aligned with top of image

Excerpts+ for Headway 3 - 15

Excerpts+ v2.0 User Guide

Cells Vertical Gap

Number to show as full width content

Excerpts+ for Headway 3 - 17

Excerpts+ v2.0 User Guide

Must be in ALL included categories

Show Sticky posts first

Include sub-categories when E+ is displaying on a Category Archive page

Excerpts+ for Headway 3 - 18

Excerpts+ v2.0 User Guide

Block title URL

Post Title Bullet

Post title background tint % (when Image Behind is selected)

Post title background tint colour (when Image Behind is selected)

Don't link to post/page

Link "Go to" text

Excerpts+ for Headway 3 - 19

Excerpts+ v2.0 User Guide

Show full content or excerpt only

Specific IDs (optional)

Show children of specific IDs (Page types only)

Exclude Specific IDs

Excerpts+ for Headway 3 - 20

Excerpts+ v2.0 User Guide

Read More text

Excerpt first, then list

Excerpts+ for Headway 3 - 21

Excerpts+ v2.0 User Guide

Show author picture

Author picture width