Creating Multi-Format Responsive Articles

Responsive Articles can be configured to suit multiple purposes - you can freely select and alternate any variation between 1 and 4 columns to achieve lots of different variation in display. You can use a single article as a Contacts Directory of sorts, Pricelist, Mini Media Library, Infographics etc. simply in how you specify and arrange your Steps / Content Blocks. Just remember that your 'Steps' are building blocks, and that each row is composed of however many blocks add up to 100%.

There are some technical aspects with Responsive - such as floated / superimposed elements, the order and frequency of such, and how they impact on some HTML formatting - like bullet points. For instance you cannot float a left-hand image over bullet-points, as the HTML margins overlap and the bullets will disappear from view. Here you either float the image right, or create two separate Steps of fixed percentage to overcome this limitations. In essence each content row of Steps / Blocks builds up to 100% on the width before flowing down onto subsequent rows - so very basic arithmetic is required when composing your objects. Affino has some very clever internal logic which then handles the arrangements down through the different breakpoints - where most rows end up as single columns at the lowest 320px breakpoint.

We advise you that by following the steps below you will be more efficient and expedient, although you can upload images / media in any order, it just makes more sense in most cases to upload your media in advance.

As explained in Procedure above, it is quicker and more efficient to upload your images and videos first, before you begin to enter your article text and Steps. Just go to Control > Media and upload the Media you need into the relevant Media Library (Section).

For certain Articles, you will only need the Main entry fields - these fill 100% of the allocated width, and as long as you need to more specific styling - i.e. just editorial content / text, you should be able to make do with just Main text entry fields, which are as follows (For Advance Responsive Article Presentation Style):

• Presentation Style - In our reference, we’re using ’Responsive Advanced Article’ as it gives us the most functionality
• Section [Select] - Select which Section this Article belongs to, will be automatically selected if Article created from App Bar
• Sort Order [Select] - This to be used after article has been entered for manual Sort Order, most articles tend to be Reverse Chronological though - so you can usually ignore this
• Multi Display [Select] - Choose additional Sections you wish to display this Article within
• Title - Enter Name of Article, this will automatically generate Screen Name, which you might want to differentiate
• Thumbnail - Select image to appear on listed views - i.e. Thumbnail + Title + Teaser
• Teaser - Introductory text which appears with Thumbnail and Title on Article Listings
• Call to Action - By default this is simply ’More’ but you can change the button text value to something more in context or more enticing to target audience for that particular article
• Keywords - Manually select Keywords and Topics for Site Search Indexing, Preferences, Navigation and Targeting purposes
• Page Title - You can change the Title description that appears in the browser tab, usually altered for promotional purposes
• Page Description - Additional SEO text to accompany Page Title
• Screen Name - The actual user-friendly URL that appears in the browser e.g. /channel/section/screen-name-title-etc
• Geo-blocking Type - Select to Target or Exclude specific Countries
• Countries [Select] - Choose which Countries are to be Targeted or Excluded
• Main Image - Choose the principal article image to display on Detail view - you can enter Alt text here also and choose image alignment
• Introduction - Sometimes known as the ’standfirst’ this is sometimes the same as the Teaser, or a separate text block introducion which comes in advance of the main article body copy
• Intro Image - Select Image to accompany Introduction text - Note that this image is often used for custom display purposes
• Image Top - Select Image for Introduction text to wrap around - note that this image is often re-used for custom display purposes
• Shareline 1-3: These are social sharing bylines which auto-populate the user’s Twitter entry etc. when sharing the Article to social media you can have up to 3 different options here
• Main Body - Often the only text entry field you need for your article - if it’s only composed of single Main Image and Text Paragraphs. Note hit the darker 4-way selector button above the text entry field to access full feature set of [Advanced Editor] - which pops up full screen window for detailed editing / formatting
• Image 1 & 2 - Select images to intersperse / come between Main Body and Text 2 - these images are often used for custom purposes too
• Text 2 - Additional Text Entry field if you need text interspersed / separated by images, often used for custom purposes
• Image 3 & 4 - Select images to intersperse / come between Text 2 and Text 3 - these images are often used for custom purposes too
• Text 3 - Additional Text Entry field if you need text interspersed / separated by images, often used for custom purposes
• Image 5 & 6 - Select images to intersperse / come between Text 3 and Text 4 - these images are often used for custom purposes too
• Text 4 - Additional Text Entry field if you need text interspersed / separated by images, often used for custom purposes
• Base Image - Select Image to appear at the base of the article

• Article Type - Advanced Search Filter, needs to be set up in advance - e.g. ’Blog’, ’Feature’, ’Guide’
• [_] Sponsored Article - Tick to indicate Sponsored Content
• Quote - Usually custom-coded - text field which appear on article insite "Quotation Marks"
• Step By Step Title - Only used for Classic Articles now, does NOT apply to Responsive
• Info Box Title - Usually used as custom field for Responsive
• Info Box Text - Usually used as custom field for Responsive
• [_] Info Box Auto Bullets - Automatically assigned bullets to new lines for Info Box Text
• Multimedia - Select Multimedia - usually video for Article, if no Main Image selected this appears at top of article, if Main Image in place, Multimedia appears at base of Article
• Credits - Usually used as custom field for Responsive - and / or to list contributor Credits
• Code - For custom applications only

• Security Clearance - Select Content Security Right to restrict viewing access to this Article, also very important for Metering
• Creator [Select] - Automatically filled field which can be then updated to select different Creator / Author
• Publish Start - Automatic field which records point of article entry, can be manually updated
• Publish End - Automatic field which adds 100 years to Publish Start time, can be manually updated
• [✓] Syndication - Pre-ticked so that when you enable RSS on Section, all the articles are primed for syndication / RSS / Atom Feeds
• [_] Live - You must tick this option for the Article to display live - i.e. be accessible
• [_] Private - Ideal for when you are working on an article and don’t want anyone to see it until you’ve completed it / reviewed it fully
• [_] Moderated - Additional setting which comes into place for Contributed Content and Workflows - in certain circumstances it can be manually assigned or withdrawn

Note - Remember to hit [✓Save] once you have completed your entries!

Once you have Saved your Main Entries, scroll down the page until you see bar with:

0 Article Steps [+Add]

Here you add your various component blocks or Steps - these are blocks of Title, Text and Media which can be specified and arranged in a variety of ways, as we will detail:

• Title - Enter Title for this Step Element / Block
• [✓] Show Title - Select to display Title
• Content Type: New drop-down field for custom applications
• Step Image - Select Main Step Image, if used in combination with Step Text field, and aligned left or right, it will take up 33% of the width, with the text taking up the remaining 66% - for other variations you can use these elements separately
• Presentation Image - NOT USED for Responsive
• Multimedia - Select Video / Media instead of Image - if selected with text and left or right aligned, will take up 33% of width as per Step Image
• Step Text - Enter Step Element Text!
• Link - Enter URL - e.g. www.affino.com/ to click through on Image
• Open Link Option - Select for Link to open in Current or New Tab
• *Background Color - As per above visual, you can select hex colour as background for Step element
• *Background Image - As an alternative to hex colour, you can select a scaling image for the the Step background
• *Background CSS - Enter custom styling CSS, e.g.: background-size: 100% auto; background-repeat: no-repeat; background-position: center center;
• Sort Order [Select] - You can manually arrange the order of your Step element / content block
• Step Width - Select % width of element - 100% | 75% | 67% | 50% | 33% | 25% - NOTE that each row adds up to 100% before it wraps into a new row below. Text is usually entered as 100% and then images are floated in from second element - with set % size
• Step Float - A great way to assign different images to responsive rows - you can float the over a 100% width text element - NOTE that first element cannot be Float, you always float second over first, this means you cannot have two floats in a row - e.g. a float left Image followed by a float right image - they would need to apply to separate anchor elements
• Image Align - Left | Right | Above - Left on same element means 33% to the left, right means 33% on the right, Above means Image ranges 100% width above text
• [_] Design Frame - You can select to apply Design Frame to element, although this has largely been superseded by 3 new Background elements detailed above
• [_] Top Divider - This is Table Border Colour from Design Style applied to Skin that this article appears on
• [_] Page Break - NOT USED for Responsive
• Publish Start - Automatic field which records entry time, can be manually overridden
• Publish End - Automatic field which adds 100 years to Publish Start, can be manually overridden
• *Security Clearance - COMING SOON to Steps - ability to use Content Security Rights to restrict viewing access to individual elements

*NOTE - Background Settings currently only apply to Article Feature Scroller Design Element, and are not rolled out for Article Types yet, Seurity Clearance on Steps has yet to be implemented

• You are most efficient entering text at 100% and then floating image or multimedia from a Second Step - this gives you better use of space and less empty / white space, i.e. better wrap-around
• There are instances when the above approach will not work - e.g. with left-hand bullets and left-hand floated image, in that case you need to set up separate elements side-by-side i.e. two step blocks at 50% | 50% etc
• If you have issues adjusting sort order it is usually because you are trying to arrange two floated elements together, this cannot be done - you have to have 100% element first before a floated one, followed by another 100% or similar anchor element. A floated element always needs an anchor - so it cannot be preceded by another floated element
• Occasionally the Sort Order fails to save, make sure you hit the [Done] button on the Sort Order pop-up before saving the Step, otherwise you may not have the Sort Order you desire - usually just editing, hitting [Done] and then [✓Save] solves the issue
• Occasionally there are wrapping issues at lower breakpoints - in which case you need to alert your Support Contact so that they can arrange for development to adjust the CSS as necessary