Create 100% Joomla articles with simple forms and no HTML knowledge!

Form2Content Extension

Form2Content Anywhere Plugin

Article content Anywhere

Any Form2Content article data can be "shown" anywhere on your Joomla website using simple plugin syntax.

On this demo website we have created a database with holiday places. Each article consists of content that was submitted using a form with different types of fields. Using the plugin we can access the field data and display it anywhere in your Joomla website.

Simple example with basic HTML

Lets's say we want to show 5 article thumbnails from the user "Demo webmaster". That's me ;). Each thumbnail will link to the corresponding article. We can add the following HTML with plugin syntax in a module or Joomla article.

{F2cnywhere contenttypeid=1|authorid=308|limit=5}
<a href="/[:$JOOMLA_ARTICLE_LINK_SEF:]">
<img src="/images/stories/[:$IMAGE_THUMB_URL_RELATIVE:]" width="100" alt="[:$JOOMLA_TITLE:]" align="left" style="padding:5px 5px 0 0;">
</a>
{/F2cAnywhere}

Please note: F2canywhere is misspelled above so it doesn't activate.

The result, thumbs of the article images with links to the articles.

Extensive documentation

The possibilities of the Form2Content Anywhere plugin are endless. There is extensive documentation showing all the possibilities on filtering content and using inline or file templates to render the output.

The best thing. Your user can still manage the content

On this demo website you have experienced how easy it is to add images, documents and any other part of a Joomla article. What you as a developer decide to do with it afterwards doesn't make a difference for them. Your website user doesn't need to know any HTML but can change images in slideshows.

Advanced example

Advanced example: Below is an article image slidshow with a read more to the corresponding Joomla article. It has been made using UIkit framework syntax and the F2C Anywhere plugin. The plugin "collects" the article image and custom read more link.

The article HTML with plugin syntax: It's only advanced since we use a lot of fancy UIkit 3 code like parallax effect for the overlay. The F2C Anywhere code is still very simple.

<div class="uk-margin uk-slideshow" uk-slideshow="ratio: 4:3;minHeight: 300;maxHeight: 600;velocity: 0.5" data-id="page#17">
	<div class="uk-position-relative">
		<ul class="uk-slideshow-items" style="min-height: 300px; height: 600px;">
        	{F2cnywhere contenttypeid=1}
			<li class="" style="">
				<img src="/images/stories/[:$IMAGE_PATH_RELATIVE:]" class="uk-cover" alt="alt text" uk-cover="" style="height: 819px; width: 1200px;">        
				<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle uk-padding">
					<div class="el-overlay uk-overlay uk-overlay-default" uk-slideshow-parallax="x: -300,0,-300;scale: 0.3,1,0.3" style="transform: translate3d(-300px, 0px, 0px) scale(0.3);">
                        <h3 class="uk-margin uk-margin-remove-adjacent">[:$JOOMLA_TITLE:]</h3>
                        <p><a href="/[:$JOOMLA_ARTICLE_LINK_SEF:]" class="uk-button uk-button-default">Read more</a></p>
                    </div>
                </div>
            </li>
			{/F2cnywhere}
        </ul>
        <div class="uk-visible@s">
            <a class="uk-position-medium uk-slidenav-large uk-position-center-left uk-slidenav-previous uk-icon uk-slidenav" uk-slidenav-previous="" uk-slideshow-item="previous"></a>
            <a class="el-slidenav uk-position-medium uk-slidenav-large uk-position-center-right uk-slidenav-next uk-icon uk-slidenav" uk-slidenav-next="" uk-slideshow-item="next"></a>
        </div>                
    </div><!--uk-position-relative-->
</div><!--uk-slideshow-->

Please note: F2cnywhere is misspelled so it doesn't activate.

 

© Copyright Open Source Design
All rights reserved
By Open Source Design