Adding Joomla Content Images

We use the same CASH workflow described in Post #4 to add images to content in Joomla.

  1. Categorize
  2. Add
  3. Show

I’ll go to Content >> Media and create image folders for each of the course categories’ I created previously with the “Create New Folder” button.  The folder names must contain only alphanumeric characters and no spaces.  The new folders look like this:

gfdgfd

Images can be added using the upload button in the upper left-hand corner but it is easier to add them when writing the articles.  I’m going to add the Joomla icon to the platform article in the CMS category that looks like this:

joo

I open the article called Software under the CMS category and click the image button underneath content editor.  This opens a pop-up showing me all the image folders I just created.  I click on the CMS folder to add the image there and scroll down the “add files” button.  I find the image and click “start upload”.  The image now appears in the folder and I click on it to put its URL in the image URL box.  I have options as shown below to edit the description, caption, image float, image title and caption class.  The float options are left, center and right.  I choose center and a caption class of center.  My image edit screen now looks like this:

2

Now I click “insert” in the upper right hand corner and my image is uploaded to my article as shown below:

3

Once it’s in the article I can go back to the article manager and click the insert/edit image button on the content editor control panel and make changes.

Joomla Content Editing

These are the content editor formatting option buttons in each Joomla article page.  Since I have some sample articles already created when I created my local site I’ll edit those using these.dfgdFirst are the bold, italic, underline and strike-through.  Pretty self-explanatory.  Simply highlight the text you want edited and click the button.  See example below on public site:1

The next are the alignment buttons.  The first four paragraph’s show left, center, right and justify alignments:

2

The next drop down box lets your format paragraph’s, address and headings.  The next two buttons make an unordered list and an ordered list.  Simply click button and make the lists.  Those examples look like this:

3The next buttons are for indenting quotes from the left or right.  Undo and redo are after that.  The next buttons let you insert/edit links, remove links, insert/edit image and view source code.  I’ll add some images in the next post.

Joomla Content Organization

There are three steps to Joomla workflow and they are categorize (creates organization for articles), add (write the articles), and show (create menu links so that people can click through and see them).  The acronym used is CASH, categorize, add and show.  I’ll start by making list of articles I want to write for my site.  Since I’m taking classes in E-commerce Infrastructure, Content Management Systems (CMS), E-Portfolio, Mobile Device Programming, and Mobile Interface Design, I’ll start my categories list there.

Each of my categories can be can be sub-categorized into subjects like application/software used, programming language used and generated end products/learning goals. Each of the course categories could break down like this:

 

  E-Commerce CMS E-Portfolio Mobile Programming Mobile UI
Software/

Platform

Dreamweaver- Joomla

Drupal

WordPress

Dreamweaver-

Photoshop

HTML

CSS

 

HTML

CSS

Language PHP

MySQL

PHP

MySQL

N/A JavaScript  
Hardware     Digital Camera Phone/Tablet Phone/Tablet-
 Deliverables- App/Server Sel.

Secure Xactions

Credit Cards

Catalogs

PayPal Interface

User Accts

AdminMenu

RSS Feeds

Layout

Acct.Privileges-

Resume

References

Work Sample

Interview

Techniques

Business App

Social Media

Entertainment

Effective User

Interface Templates

Next I’ll go to category manager and add new categories for each subject.  My categories manager page will look like this:

fdgdgfdfd

Now I’m going to add three or four articles (software, language, hardware, and deliverables depending on the category) for each of the categories that I added.  My articles manager will look like this with the last four articles for Mobile User Interface at the top:

hjkh

I’ve now done the first two steps or workflow in Joomla, categorize and add.  Now I need to show my articles.  I do that by making menu links to the articles.  From the menus dropdown I click main menu and add a link for each of the course topics using the new button in the upper left corner.  I link each of the articles in the categories that match the menu link and when I click the link category I get all the articles in that category.  My front page now looks like this when I click the first E-Commerce link I made:

3

I can see all three articles I made for that category.  Now I’ll make a link for each of the course that link to each of the articles written in that category.  My front page now looks like this with the Mobile Interface link clicked:

4

That’s it for Joomla content organization.

 

 

 

 

Joomla Site Concepts

Every Joomla site has a public area for visitors and private area for administrators.  Everything visitors see can be accessed from the visitors area and it is accessed from the web address, localhost:82/joomla.  By typing /administrator after the web address, you can access the control panel and add content, create navigation or modify layout.  Across the top of the admin page are drop-down menus with key links to system (main configuration items), users (permissions, definitions), menus (navigation), content (text of articles), components (extras like social media, photo galleries, shopping carts, event calenders), extensions (module, plugin and template managers) and help.  A column of quick links on the left allow easy access to important features like content (add new article), structure (menus and modules), users, configuration (global and templates), extensions and maintenance.  There are five features consistent to many Joomla pages and they are: page title (where you are in the admin area), action buttons (to modify items), submenu (gives access to related parts), search, and items (similar to objects).  In the article manager page using the add article function you have these features: page title, action buttons, extra options, content editor and content options (or metadata).  The add article page looks like this:

admin

These five features are consistent through most pages.  By clicking the title link in the upper right hand corner you are taken to the visitor’s page.  Adding /administrator to the url for the visitor page takes you back to the administration page.

Joomla Database Creation and Installation

The next step is to create a database for use with Joomla in MySQL on my XAMPP stack on my laptop.  I fire up XAMPP with Apache and MySQL at localhost:82 and open phpMyAdmin.  I create a new database named joomla with a user of root and a host called localhost.  My user has all privileges and no password. Then I create a file in htdocs in xampp called joomla and copy all of the download files there.  I open the chrome browser and navigate it localhost:82/joomla where I get the installation screen.  Not going to show all the details here but I did take screenshots and copies of it in case I need the information later.  It tells me congratulations, Joomla is not installed and to remove the installation folder or I can proceed from this point.  But I copied and pasted the files to c:/xampp/htdocs/joomla so I don’t have an installation folder.  However I push the button to accomplish this and hit site where I come to a logon screen.  Then I login with my username and password and Im on the front-end and it looks like this:

joomla test site

Apparently this is localhost:82/joomla/index.php.  Yay.  Now I have to get to the dashboard!  I type in localhost:82/joomla/administrator/ and login again and Im at the control panel http://localhost:82/joomla/administrator/index.php which looks like this:

joomla admin

Fantastic, now I just need to figure out how to use it.  Stay tuned next week.

Joomla Basic Info

Ok, I’m taking WEB-225, Content Management Systems, and judging by the book required it looks like we’ll be learning about Joomla.  I went to jooml.org and found the first chapter of Joomla! 3 Explained (our text for the class) and started reading both.  The site said it will enable me to build web-sites and on-line applications.  The good news is its open-source (like WordPress), free, easy-to-use and extensible.  The definition given of CMS was software that keeps track of every piece of content on your web site.  Content can be simple text, photos, music, video, documents, or just about anything you can think of.  Examples of Joomla cover everything from corporate/publications to small business to ecommerce/online reservations to school and church/personal and family.  Joomla has thousands of free extension available to for extensibility (doing things that aren’t out of the box). Develops (like myself) love it because we can build inventory control systems, data reporting tools, application bridges, custom product  catalogs, integrated e-commerce systems, business directories, reservation systems and communication tools.  Joomla is based on PHP and MySQL, which I have some experience with from last semester, so open platform applications are designed and used.  Joomla has a hosted version at joomla.com and a self-hosted version at joomla.org.  My hosting service Bluehost has an auto-installer which will install if for me at my url, robbuildssites.com or I can download it and install it myself which I plan to do.  The download file for ver3.4.5 contained 24 files (17 directories and 6 files).  The download was as follows: /ver3.4.5

  1. Dir bin
  2. Dir cache
  3. Dir cli
  4. Dir components
  5. Dir images
  6. Dir includes
  7. Dir installation
  8. Dir language
  9. Dir layouts
  10. Dir libraries
  11. Dir log
  12. Dir media
  13. Dir modules
  14. Dir plugins
  15. Dir templates
  16. Dir tem
  17. File htaccess.txt
  18. File index.php
  19. File joomla.xml
  20. File License.txt
  21. File readme.txt
  22. File robots.txt.dist
  23. File web.cofig.txt

 

I then went to about-joomla/getting-started, then installing_Joomla in docs.joomla.org. Since Im installing it first on my laptop’s XAMPP stack (Windows, Apache, MySQL, PHP, Python) it tells me to create a MySQL database with PHPMYADMIN.  That’s it for this post.  #2 will start with creating a database for Joomla and installing it on my laptop.

Dreamweaver New Features in CC

Ive been using Dreamweaver since my first semester at Wake Tech and have been an Adobe Creative Cloud subscriber since then.   I learned at the end of my first year of student status with them that I could still qualify for that low rate by threatening to cancel.  Since I was still a full time student Adobe agreed (after a 30 minute chat stand-off) and I got to keep it for another year at student rates.  So now Im going back through the Adobe DW Classroom in a Book that we bought for WEB 140 and never really had to use and really trying to absorb all of Dreamweaver’s functions and features to make web design fun and easy.  So to start off I’d like to touch on some new features for CC that were released in 2015.

  1. CC Asset Libraries –  You c an add assets created in Illustrator, Photoshop, InDesign, Premiere Pro, After Effects, Dreamweaver, and Fuse CC. You can also add assets created in Adobe mobile apps or downloaded from Adobe Stock or Creative Cloud Market.  Since I just learned how to navigate Photoshop last semester, this should be helpful to learn.
  2. New Visual Aids with the latest Bootstrap Framework – New visual aids help you define breakpoints when making responsive designs for different screen dimensions and organize your code, all within Dreamweaver.
  3. Preview on any Device – Test and inspect websites on multiple devices simultaneously. Just type a short URL into your mobile device’s browser to preview your sites.  Also check out this pdf of DW keyboard shortcuts.  dreamweaver-keyboard-shortcuts

 

 

Real Estate Web Marketing

I took Howard Perry and Walston’s (http://hpwreschool.com/) 75 hour real estate brokers class over the semester break and found it to be very intense with some challenging law related concepts.  I passed the four-hour class-test and four-hour state-test a week later and earned my provisional broker’s license (inactive since I wont be with a firm).  After I graduate WTCC in May ’16 from the the Web Development program, I’ll take the 90 hours (3 thirty-hour classes) of post licensing classes and get upgraded to full broker’s status (non-provisional/active) and associate with a firm.  With these accolades I would like to get into real estate web development and marketing. I know there are many sites out there for real estate sales including http://carolinarealestatestudio.com, http://greenergrassrealestate.com, http://realtor.com, http://zillow.com, and http://trulia.com and http://movoto.com.  I have my own url, http:/robbuildssites.com where I have my portfolio posted and can use that in my real estate marketing/development plans.  I am still researching this niche opportunity and will be posting more along these lines as I learn more.

Check Out the New WordPress Desktop App for Windows

Ok, I just noticed that WordPress.com has changed since I blogged with them last semester (fall 2015).  The editor has changed and when you log in it looks much more like the reader then the dashboard.  In fact I couldn’t toggle back and forth from dashboard to live site and back.   I have to have two windows open and refresh the live site and I can only access the dashboard from the web.  You can get the desktop app at  https://desktop.wordpress.com/.   Once you download it, you get a WordPress app launcher in task bar and an icon on your desktop.   The app lets you preview your posts in your site’s template and will auto-save your work regularly. You can also manage your WordPress websites from the dashboard and read WordPress.com posts from the reader view. Moving from one tab to another is easy thanks to JavaScript.  It works with any blog hosted on WordPress.com and any WordPress sites with Jetpack plugin.  I have the same OS X app on my iPhone and it helps me keep up with all my WordPress sites, not just WordPress.com sites.  The original link to this article is  http://techcrunch.com/2015/12/10/automattic-releases-wordpress-app-for-windows-desktop/.

E-Portfolio Blog Introduction

Since I’ve grown to know and love WordPress.org, I also appreciate the simplicity of ease of setup for WordPress.com.  This is my final semester e-portfolio blog for Web Development at Wake Technical Community College in Raleigh, NC.  My other classes this semester are e-commerce and Joomla development which will added here by May.  Last semester’s class in WordPress development was enlightening and I did love that one.  I’ve helped a friend develop a WordPress site for his carpet cleaning small business, Steamgiant.  A link to it is included here….http://steamgiant.com.  Also, I created two  WordPress sites from scratch (WordPress.org) last semester in WEB 250.  They are http://wcet3.waketech.edu/rfstone/WEB250  & http://wcet3.waketech.edu/rfstone/wpEOS.  In Photoshop class, WEB111, I created a WordPress.com blog showcasing my projects for the semester shown here….. https://web111classsite.wordpress.com/.  I very much plan to become a WordPress developer and help as many people as can with my love of this platform.