The essential news about content management systems and mobile technology.
Powered by Joocial, XT Search for Algolia, and SlimApps.

As a developer, once in a while I get requests to integrate content plugins inside modules that display articles.

By using a plugin, we expect to render video players, galleries or snippets inside the article, however the module may not include the necessary code to accomplish this action.

In this tutorial you will learn how to support content plugins inside modules.

 

The scenario

Let’s say I have a module that display the introduction text of a few articles. Inside every item I typed a shortcode that should be converted into an image, unfortunately the plugin can't reach my module.

My frontend only expose the shortcode.

7

Create the template override

Let's solve the problem with template overrides.

Even you can edit directly the code from the module in modules/mod_yourmodule/tmpl/default.php (it can be another filename.php) however it’s highly recommended to create a template override to have the next customization by separate.

In your backend, go to Extensions > Templates > Templates (on the left side) > Your template details and files

1

  • Create overrides tab
  • Look for the module in question and click on it

2

This action will generate a file (or a set of files) in templates/your-template/html/mod_yourmodule/

Edit the template override

  • Go to Editor tab
  • Navigate through html > com_yourmodule > default.php or something.php

3

Look for the line of code that print the introtext (introduction text). The syntax would depends on how the module is coded.

Don't expect your code to be exactly the same from my example.

In my case is:

echo $article->introtext;

4

Replace that line with:

echo JHTML::_('content.prepare', $article->introtext);

5

In the previous lines $article->introtext contains the article’s introduction.

Note: if your module print the full article, the code would work too.

Test the end result

Refresh your public site to see how the plugin convert the shortcodes into cute images.

6

 

Read more

After a few months of being quiet, I'm back to bring new posts. This time I will share a short tutorial to help you to add cache support for custom modules.

Cache reduces server load and is a good practice, specially for sites that have a huge amount of visits. In Joomla you can add this feature into your custom module with a few lines of code.

Edit the XML file

Edit mod_yourmodule.xml with your favorite code editor. This file is located inside your module’s folder: modules/mod_yourmodule/

Look for the "cache" setting. If that code doesn’t exist, it means your module still doesn't support cache.

Add the code below inside the advanced fielset:

<field
      name="cache"
      type="list"
      default="1"
      label="COM_MODULES_FIELD_CACHING_LABEL"
      description="COM_MODULES_FIELD_CACHING_DESC">
      <option
             value="1">JGLOBAL_USE_GLOBAL</option>
      <option
             value="0">COM_MODULES_FIELD_VALUE_NOCACHING</option>
</field>

4

If the advanced fieldset doesn’t exist, add it as parent of the new field tag. The end result would look like:

<fieldset name="advanced">
    <field
        name="cache"
                type="list"
                default="1"
                label="COM_MODULES_FIELD_CACHING_LABEL"
                description="COM_MODULES_FIELD_CACHING_DESC">
                <option
                       value="1">JGLOBAL_USE_GLOBAL</option>
                <option
                       value="0">COM_MODULES_FIELD_VALUE_NOCACHING</option>
        </field>
</fieldset>

Test the cache param

Go to Extensions > Modules > Edit your module

In advanced tab, look for the Caching param and set "use global". Enable the module at least in one menu item.

3

Save when you're done.

Go to System > Global configuration > System > Cache, choose ON (conservative or progressive)

1

Visit one of the pages that render the module in frontend to double check your module is being displayed in fact.

As last step, go to your administrator area: System > Clear cache. Look for your module name to confirm the new param is working.

2

Author

Valentín García

Read more

If you really like a website, I almost bet you the reason is because you enjoy the experience. Besides if it's useful, much better!

That being said, can you mention your favorite sites and why?

If you are not sure what I’m talking about, I’ll give you a few examples so you can apply a similar pattern in your own projects.

 

Facebook

If you like this experience, probably is due their exclusive currency: likes.

People measure digital success based on the number of “thumbs up” they get.

That’s not all, notifications and shares compliment the exciting side for this social network.


Twitter

Are you enthusiastic about getting more and more followers?

People compete to reach the highest number of users by typing 140 chars. This push creativity on every tweet so readers can enjoy and decide who deserves a favorite, retweet or unfollow.

Very similar to Facebook but simpler.


News and viral sites

Reading news can be amusing, useful or funny. Lately, both type of sites often publish the same contents to increase traffic.

The shocking and amazing stories are especially attractive even if are useless; the human being seems interested in bizarre, fun and useful information; although there is no guarantee it can be practical.

The leisure pieces draw smiles. Don't judge me if I'm a fan of 9GAG too :D


Support forums

Getting answers to our questions is satisfactory, even better if is helpful to solve a problem with our site.

Forums are synonyms of help. When the traffic is good you could get free assistance in the same day.


Conclusion

While planning a new website, look for solutions.

  • What do your potential customers need
  • What make them smile
  • What make them succeed
The key for a success site is to make your users happy. It’s about generate emotions, positive emotions :)

 

Author

Valentín García

Read more

Responsive design arrived time ago, web designers consider it a basic requirement for any site. However many projects still are made for big screens only.

If you have a website in that last category even if is not Joomla, this tutorial will provide you a general approach about what's needed.

Before to start. If your site is build with just tables, forget about trying this tutorial. You have bigger problems. Remove tables and use divs at least, then come back here :)

 

Everything is about CSS

First, you need to know about CSS. For my example we have this website:

joomla responsive design

The green area represent the main container (inside we have the menu, text, images, video embeds, etcetera). This block uses the id selector #mycontainer and has a width of 960px.

#mycontainer {   
    width: 960px;
}

Now, that's the size by visiting the page from any device such as desktop computer, tablet and mobile.

We need to make it smaller to addapt to the smaller screens.

 

CSS Media queries for responsive design

Responsive design is possible thanks to this CSS feature. Media queries allow us to modify the width values based on the screensize.

For screens with maximum 480 pixel-width, we can make the container width smaller with the following code:

@media (max-width: 480px) {
    #mycontainer {   
           width: 400px;
    }
}

The above snippet set a width of 400px to #mycontainer when the user's device is an smartphone.

Note: be aware there are many screen widths for smartphones. Some smaller than others, plus the orientation: portrait or landscape.

 

Play with the width values

Repeat the previous process for all the screensizes you want to support by defining a max-width value in every media query from higher to lower.

@media (max-width: 768px) {
    // your CSS properties goes here
}

@media (max-width: 600px) {
    // your CSS properties goes here
}

@media (max-width: 480px) {
    // your CSS properties goes here
}

In short words, the width value loaded last has higher priority.

 

Test the end result

For every new update test the result to confirm is working as you expected. You can simply resize the browser to see the responsive in action or use a free tool like Responsinator to emulate popular device's sizes at once.

 

Conclusion

Testing is highly important, even if the test show a positive result don't forget to try in real devices to double check the responsive support is accurated.

 

Author

Valentín García

Read more

The JED Team held a summit over the Joomla and Beyond 2015 conference. Here's a summary of what happened...

A few members of the JED Team met up May 27/28 and June 1/2. During our four days we were able to process all of the pending extension submissions, all of the tickets that were open at the time and update some of the knowledgebase documentation.

We were fortunate to have the lead developer of the new JED extension on hand to fix a few of the more important bugs. I'm pleased to say that pending the outcome of one final issue we'll be signing off our agreement with Fabrik and will begin to open up access to the JED code to allow community contributions. We will make a more detailed announcement when we have a system in place to facilitate it.

During the JAB event we held a "Make It Happen" session to seek some feedback in the areas of Search and UI. Thanks to all that participated. Here are some of the notes from that session:

 

Search

  • Top search/recommended phrase
  • User picks first items in results
  • Reviews: average number of reviews
  • Test cases
  • User case: when opening a listing it is successful user found what they are looking for
  • What phrases has what bounce rate
  • Match pseudo names to same category, take consideration of different spellings
  • Indicate to select tags for listing
  • Custom tags?
  • Advanced search option to make less intimidating
  • Search all terms or...
  • Add potluck results / Feeling Lucky
  • Implement Google Analytic event tracking and AB split testing to evaluate potential design changes
  • Decided that a successful outcome from a search was clicking on an extension and an even more successful one would be then clicking on one of the extension's own links (be that download, documentation, support etc)
  • Discussed logging search queries to provide more information about how users search the directory (am I right in thinking that GA is doing that for us?)
  • It was suggested we could shown links to corresponding categories to search terms for pseudonyms and keywords.
  • To encourage the use of tags we could add a notice on extension save asking them to provide one.
  • Discuss if extensions developers can add their own tags.
  • Look at simplifying the front end search by hiding the extra drop-down options.
  • Add information about the full text search options (e.g. + before a word to make it required)
  • Contact Google to see if we can get a free Google Search Appliance Box https://www.google.com/work/search/

 

UI

  • Have to select to view reviews
  • Displays all by default (bug?)
  • Put count on end
  • Add a spoiler for filter
  • Ability to enable/disable filters option for user profile or via cookie
  • Remove top grey arrow background if no modules inserted in this location (e.g. when there is no search box)
  • Set a cookie to store user's preferences for Show/Hide Filters and Layout (Listing vs Grid)

 

 Thanks to the JED Team members for taking time out of their busy schedules to work on the JED!

Author

Matthew Baylor

Read more