Giter VIP home page Giter VIP logo

olivares_blog_articles_layout's Introduction

olivares-blog-articles_layout

Gantry 5.3.2+ Particle to show articles inside joomla categories implementing a Blog entries list (small image on the left and intro text on the right, usind a card style). It works with Joomla 4.x or higher (joomla 3.5+ compatiblle). This particle uses UIkit 3.x and FontAwesome 5.x

Developer info ๐Ÿฅท

Hi my name is Jose Luis Olivares. If you appreciate my effort, please endorse my Development skills on Linkedin (https://www.linkedin.com/in/jolivaress/) or making a voluntary donation through Paypal https://paypal.me/joolivares

You can see an example implemented in this website I made (https://iconnsv.com) or down below checking some screenshots

Installation on Joomla 3.x / 4.x:

1-Copy the olivares_blog_article_layout.html.twig and blog-main-olivares.yaml files to root/templates/TEMPLATE_DIR/custom/particles (if the particles folder does not exist, you have to create it manually)

2-Copy the _olivares_blog_article_layout.scss file to root/templates/TEMPLATE_DIR/custom/scss (if the scss folder does not exists, you will need to create it manually)

3- Add the following code in your custom.scss file.

@import "dependencies";
@import "olivares_blog_article_layout"; /* Olivares Blog Card Particle */

If the custom.scss file does not exists, you will need to create it manually. Also, make sure your custom.scss file has the @import "dependencies"; code at the very top.

4- Add olivaresGetUrlParam.php as a Gantry dependency injection (check Gantry docs https://docs.gantry.org/gantry5/advanced/php-functions)

Some Screenshots

Particle on Gantry 5.3.2+

gantry5-particle

General Configuration

presentation-mode

Setting categories where articles should be taken from

card-mode

Real example

nocard-mode

olivares_blog_articles_layout's People

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

bsakhanov

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.