• Introduction
• Ready to cook?
• About this book
• Who we are
• Planning your publication
• Turning your idea into a publication
• Planning your workflow
• Structuring your content
• From design to templates
• $gimme all your lovin'
• Best practices in designing your content
• Preparing designs for templates
• Organising template files
• Your first Newscoop theme
• Troubleshooting templates
• Making your templates
• Tips and tricks to save you time
• Publication
• Issues
• Sections
• Articles
• Breaking up long articles with subheaders and pagination
• Working with featured article lists (aka Playlists)
• Article comments
• Making a 404 page template
• Creating a Newscoop theme
• Search: basic and advanced
• Search templates
• Configuring SOLR for sysadmins
• Templates to Search with SOLR
• Search engine optimisation (SEO)
• Working with images and other media
• Images: how, which and why
• Displaying and listing images (articles, authors, attached)
• Image renditions as set by the theme
• Scaling images inside the template
• Expanding Article Images
• Slideshows
• Playing Audio and Video files
• Multilingual publications and templates
• Content in multiple languages
• Multilingual strings inside templates
• Different templates for different languages
• Text direction
• Special Newscoop features
• Topics, switches, keywords to structure content
• Dynamic page layouts with switches
• Using maps
• Managing multiple authors and articles
• Browser detection and robots (search engines)
• Mobile device detection and templates
• Creating Debate functionality
• Article rating by readers
• Using Javascript and PHP in templates
• Users, Authors and Community Features
• Content access, Authorization & password retrieval
• Users, Authors, Staff
• Listing Users and User activities
• Creating Author profile page
• Advanced templating
• Managing static pages
• List of popular articles (most read)
• List of latest comments
• Tag clouds using topics
• Pagination of article lists
• RSS, sitemap, KML and XML
• Using polls with AJAX
• Direct frontend link to article editing in the backend
• Subsections
• Ways to create archives
• Working with third party tools
• Embedding YouTube, Vimeo, etc.
• Disqus and Facebook comment systems
• Profile pictures: Gravatar, Facebook, Twitter
• Looking good for and with Facebook
• Combining Newscoop and SoundCloud
• Working with advertising
• Template reference
• Language elements and conventions
• Basic syntax
• Template reference - Objects
• Introduction to Newscoop objects
• Article object and attachment, comment, location
• Author and author biography
• Browser
• Image
• Issue
• Language
• Publication
• Section
• Subscription
• Subtitle (subheads in long articles)
• Template
• Topic
• URL
• User
• Default objects (list of all available objects)
• Template reference - Controlling objects
• Set objects
• Unset objects
• Local - temporary variable environment
• Template reference - Lists
• List articles and article related content
• List article topics and subtopics
• List issues and sections
• List subtitles (pagination of long articles)
• List images
• List languages
• List search results
• Template reference - Forms
• Search form
• Login and registration form
• Subscription form
• Comment form
• Action check on form submission
• General form elements and functions
• Template reference - Maps and geolocation
• Map
• Displaying a map
• Location multimedia
• Geolocation search
• Template reference - Modifiers
• Date and e-mail formatting
• File size formatting
• Truncating UTF8 strings
• URL display and modifying
• Appendix
• Credits and license
• Newscoop Plugins
• Example plugin
• Newscoop API
• Introduction to Newscoop API
• Newscoop API SDK's

Expanding Article Images

Go to Configure -> System Preferences in the admin interface menu, look for the "Zoom enabled for images in article content?" setting and mark Yes. 

If disabled, article images will still be displayed but they won't be clickable to zoom.

When enabled output generated by Newscoop for images inserted in article body will look like this:

<div class="cs_img">

    <p>

       <a href="<url_to_original_size_image>" class="photoViewer" title="">

           <img src="<url_to_image_resized_by_editor>" border="0">

       </a>

    </p>

</div>

As You see there is resized image that links to original size image. Now all we need to do is to use some javascript overlay/modal window to show it nicely to readers.