RocketTheme - TOPIC: dang!!...where was that guide now?? (11/12)

Welcome Guest! Login

0 items Join Now

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Re: 9-AMP Series - Block Content particle

Posted 8 years 10 months ago

This guide will help you to modify the Block Content particle to add a Link, Link Text and target destination choice field of "Self OR New Window" in the "Content Items" setup window.

We ALWAYS recommend to our members NEVER modify an ORIGINAL file!!!. So if you don't have this folder setup on your server than please duplicate it.
You need to have this folder [JOOMLA-ROOT]\templates\rt_templateName\custom\particles created.

This image is hidden for guests.
Please log in or register to see it.

From your [JOOMLA-ROOT]\templates\rt_templateName\particles copy blockcontent.yaml and blockcontent.html.twig to your newly created [JOOMLA-ROOT]\templates\rt_templateName\custom\particles folder.

In your [JOOMLA-ROOT]\templates\rt_templateName\custom\particles folder, using a text editor like Notepad++ , open blockcontent.yaml to edit.

Looking at the code of the original blockcontent.yaml file we're interested in this section:

      fields:
        .name:
          type: input.text
          label: Title

        .icon:
          type: input.icon
          label: Icon

This will be replaced with this code block:

      fields:
        .name:
          type: input.text
          label: Title

        .link:
          type: input.text
          label: Link
          description: Specify the link address.

        .linktext:
          type: input.text
          label: Link Text
          description: Customize the link text.

        .target:
          type: select.selectize
          label: Target
          description: Target browser window when item is clicked.
          placeholder: 'Select...'
          default: _blank
          options:
              _parent: Self
              _blank: New Window
      
        .icon:
          type: input.icon
          label: Icon

The next file is blockcontent.html.twig where you look for:

		<div class="g-grid">
			{% for subcontent in particle.subcontents %}
				<div class="g-block {{ subcontent.class }}">
					<div class="g-content">
						{% if subcontent.icon %}<i class="{{ subcontent.icon }} g-block-icons"></i>{% endif %}
						{% if subcontent.img %}<img src="{{ url(subcontent.img) }}" class="g-block-subcontent-img" alt="{{ subcontent.title|e }}" />{% endif %}
						{% if subcontent.subtitle %} <div class="g-subtitle">{{ subcontent.subtitle|raw }}</div> {% endif %}
						{% if subcontent.name %}<h4>{{ subcontent.name|raw }}</h4>{% endif %}
						{% if subcontent.description %}{{ subcontent.description|raw }}{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>

This will be replaced with this code block:

		<div class="g-grid">
			{% for subcontent in particle.subcontents %}
				<div class="g-block {{ subcontent.class }}">
        {% if subcontent.linktext %}<a href="{{ subcontent.link|e }}" target="{{ subcontent.target|default('_blank')|e }}">{% endif %}
					<div class="g-content">
						{% if subcontent.icon %}<i class="{{ subcontent.icon }} g-block-icons"></i>{% endif %}
						{% if subcontent.img %}<img src="{{ url(subcontent.img) }}" class="g-block-subcontent-img" alt="{{ subcontent.title|e }}" />{% endif %}
						{% if subcontent.name %}<h4>{{ subcontent.name|raw }}</h4>{% endif %}
						{% if subcontent.description %}{{ subcontent.description|raw }}{% endif %}
					</div>
        </a>
				</div>
			{% endfor %}
		</div>

To have the Content Block hyperlinked you have to enter ANY text into the Link-Text field. Enter the URL into the Link field and then select "Self OR New Window" to define the target destination of your link.

This image is hidden for guests.
Please log in or register to see it.

The following users have thanked you: Miguel Guzman

#1283888

- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Gantry 5 Offline page

Posted 8 years 9 months ago
- Our Gantry 5 Offline page is considered a "System Outline". System outlines are core outlines which are linked to specific page types, such as 404 or Offline. These outlines can be edited, but can not be created, renamed, or deleted, as they are core to Gantry. For more details see " System Outlines ".
  
  To enable and stylize our Gantry 5 Offline page you must first set your site to OFFLINE in the Joomla Global Configuration screen. With a properly setup Offline Outline you will see in your page output that the body ID now changes to "outline-_offline".
  
  Along with the Global Configuration setting you must have your Gantry 5 also properly setup. Go to Template Manager -> pick any template and click, e.g. Xenon-Default:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  Then in the Outline screen from the Outline Dropdown Selector select OFFLINE:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  Last click the LAYOUT tab and modify the Offline page as you wish:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  When modifying the Outline remember that for any Articles, or other Joomla component output like the Contact form, to appear you must have a Page Content Particle somewhere's in your OFFLINE layout.
- The following users have thanked you: Nixx, David Martinez
#1284625

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Re: Menuless articles and the Hidden Menu method in Gantry 5

Posted 8 years 9 months ago

Have you ever had this scenario? You write this great article and then create a link to it using a button or hyperlinked text, click it and then end up on a page without the modules that you wanted to appear with the article and without the styling you wanted for the page.

The reason this happens is that normally when you create a menu item that opens an article, Joomla uses that menu item to associate the component to be used (for articles it's com_content), the Category ID for the article, the type of view (Single Article) and the list of modules defined to open for that menu page.

When you have only a single article, with no menu item associated to it, as the target of some link you created, Joomla knows from the non-SEF URL of the link that you want to display a component com_content, an article, with a specific article ID such as ID=254.

With that information Joomla will go to the database and have enough data to display the article but it knows nothing else about the environment of the article. With only an article ID Joomla will search the database to see if the article is associated to an existing menu item and if it finds one then it will use that menu items setup to display the article.
However if no menu item is found then Joomla can only display the article and use the page styling associated with the Default template in which case your desired module set doesn't appear.

To get around this we create a "Hidden Menu" that will never appear on any page, as there is NO module position associated with it, but will contain a menu item that provides Joomla with the database information to display the article on a page with your chosen module setup and styling.

The first step is to create your article:

This image is hidden for guests.
Please log in or register to see it.

take note of the ID of the article and the article "alias". In this example it will be "18-hidden-menu-article".

Looking at the associated Category for the article:

This image is hidden for guests.
Please log in or register to see it.

take note of the ID of the Category and the Category "alias". In this example it will be "8-features".

Now we'll create the Hidden Menu:

This image is hidden for guests.
Please log in or register to see it.

making sure that NO module position is assigned to it.

Next is a menu item for our article:

This image is hidden for guests.
Please log in or register to see it.

take note of the ID of the menu item. In this example it will be "Itemid=254".

In the Joomla Module Manager screen you can now assign whatever modules you wish to appear on this menu page. We also want this article page to be styled differently from pages using the Default template styling:

This image is hidden for guests.
Please log in or register to see it.

In your Template Manager:
(1) select an Outline to use as the base for your article page
(2) click the DUPLICATE button
(3) rename your new Outline. Then setup its styling and layout to use the modules you created for this page in the Joomla Module Manager screen.

Joomla displays our article in its Main Body so we need to add a Page Content Particle to the layout for our Outline:

This image is hidden for guests.
Please log in or register to see it.

For more details on this, please see the guide
Adding Articles to Gantry 5 Templates and Adding Featured Articles to Gantry 5 Templates

Now we can associate our Outline with its intended menu item page:

This image is hidden for guests.
Please log in or register to see it.

With everything setup we can now create our hyperlink to get us to our article and its page:

This image is hidden for guests.
Please log in or register to see it.

To create the link we need these items of information:

Component Type	index.php/component/content/article/
Category ID	8-features/
Article ID	18-hidden-menu-article
Hidden Menu Item ID	?Itemid=254
Final URL	index.php/component/content/article/8-features/18-hidden-menu-article?Itemid=254

Last Edit: 8 years 9 months ago by DanG.

#1285828

- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
Re: AMP Series - Vertical Menu particle for Gantry 5 template

Posted 8 years 9 months ago
- Hi Dan,
  
  This is useful if you place the particle in the layout where you have the ability to add css ID and class to the particle styling.
  
  How can this be used with Gantry 5 Particle Module where you need the side menu only on certain pages and not everywhere, and you don't want to create multiple outlines for specific pages?
- Thank you.
  
  Ali Samii
#1287150
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: AMP Series - Vertical Menu particle for Gantry 5 template

Posted 8 years 9 months ago
- Ali Samii wrote:
  Hi Dan,
  
  This is useful if you place the particle in the layout where you have the ability to add css ID and class to the particle styling.
  
  How can this be used with Gantry 5 Particle Module where you need the side menu only on certain pages and not everywhere, and you don't want to create multiple outlines for specific pages?
  
  I would think this should work:
  
  1)Create a new Gantry 5 Particle -> Side Menu
  
  2) Modules Edit: Gantry 5 Particle -> Side Menu [Edit Particle] -> enter the "Block" settings needed from the Guide
  
  3) Modules Edit: Gantry 5 Particle -> Menu Assignment -> Only on the pages selected
  
  In your Outlines Layout Manager:
  
  4) Modules Edit: Gantry 5 Particle -> Side Menu [Edit BLOCK] -> enter the "Block" settings needed from the Guide
- Last Edit: 8 years 9 months ago by DanG. Reason: clarification
#1287388
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
Re: AMP Series - Vertical Menu particle for Gantry 5 template

Posted 8 years 9 months ago
- DanG wrote:
  2) Modules Edit: Gantry 5 Particle -> Side Menu [Edit Particle] -> enter the "Block" settings needed from the Guide
  
  Hi Dan,
  
  There is no "Block" settings tab in my particle.
  
  This image is hidden for guests.
  Please log in or register to see it.
- Thank you.
  
  Ali Samii
#1287714
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: AMP Series - Vertical Menu particle for Gantry 5 template

Posted 8 years 9 months ago
- Ali Samii wrote:
  DanG wrote:
  2) Modules Edit: Gantry 5 Particle -> Side Menu [Edit Particle] -> enter the "Block" settings needed from the Guide
  
  Hi Dan,
  
  There is no "Block" settings tab in my particle.
  
  I've improved my previous answer to be clearer.
#1288243
- Queenielass
- Sr. Rocketeer
- Posts: 149
- Thanks: 0
Re: 2-AMP Series - Info List particle

Posted 8 years 8 months ago
- Hi Dan
  I have followed your instructions scrupulously without success - my info list particle stubbornly refuses to show a Target field. Will this show in existing particles or just new instances? Any suggestions?
- I can see clearly now the brain has gone.....
#1293679
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: 2-AMP Series - Info List particle

Posted 8 years 8 months ago
- Queenielass wrote:
  Hi Dan
  I have followed your instructions scrupulously without success - my info list particle stubbornly refuses to show a Target field. Will this show in existing particles or just new instances? Any suggestions?
  
  Can you please post your [JOOMLA-ROOT]/templates/rt_templateName/custom/particles/infolist.yaml file please so I can take a look?
#1294364
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Menuless articles and the Hidden Menu method in Gantry 5 - Alternate Method

Posted 8 years 7 months ago
- Method 2
  
  As of Gantry 5.2.16 in the Menu Editor, it is now possible to disable individual menu items directly from the editor. This scenario would go like this, where you have a K2 item that a user can click in some content but you DON"T want item to be associated to, or visible in any menu. Also you want this lone K2 item to open using an Outline you've created specifically for K2 items.
  
  So the process:
  1) In this example we assign the Home menu item as a "G5 custom theme page"
  2) Create your K2 BLOG menu page and create an Outline for it. Then assign the page to this BLOG Outline
  3) Create your K2 content that you need linked with a menu item so it can pick up the BLOG Outline
  4) Create a new menu item for your K2 item and assign it to your parent BLOG menu page item
  This is the Home page layout:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  5) Click the link in your content to test it:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  The link works as we see our K2 item using the BLOG menu page which uses the BLOG Outline
  
  6) In the Outline edit screen go to the MENU screen and from the BLOG dropdown click the cog for the K2 menu item:
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  In the modal window turn this item to the Disabled View condition by sliding the Power button to OFF (Red). SAVE
  
  7) Go to the Home page and click the content link and you will see that the link still works but the display of the K2 menu item link has been disabled:
  
  This image is hidden for guests.
  Please log in or register to see it.
- Last Edit: 8 years 7 months ago by DanG.
#1297443