Practical example: Creating a Slideshow component in Castorcito

Objective

Create a custom component called Slideshow that allows the end user to upload multiple images, each with its own title and description, and render them as a carousel on the frontend.

Implementation

For this example, two components will be created:

• slideshow: Main container component.
• slide_item: Reusable subcomponent that represents each slide in the carousel.

Create the slide_item component (Slide item)

This component will represent each slide in the carousel.

1. Access the Castorcito menu in the Drupal administration bar.

   

    

2. Click Components, then click the Add Component button.

   

    

   

    

3. Complete the fields for the new component:
   1. Label: Slide item
   2. System name: slide_item
   3. Category: Taylored
   4. Help text: Allows you to add an image with text to display in a carousel.
      1. Check “This component is only for use inside a container, hidden in Drupal field widget.”: Checked

      2. Click on the “Create new component” button.

         

          

4. After saving, you will access the component editing form, which is divided into three main sections:

   1. Component info: Shows the fields entered in the component creation step, except for the machine name, which can no longer be modified.

       

      

       

   2. Form settings: Displays options to improve the display of the content entry form.
      1. Enable editing of component name: Enables or disables the option for editors to modify the name of the component within the content form. This functionality only applies to content creation or editing forms, and allows you to customize the name of the section being edited (this name will not be displayed in the content display).

      2. Collapse component, set closed by default: Allows you to define whether the component will be collapsed by default.
         Note: This option only applies to fields with multiple values. In single-value fields, the component will always be displayed expanded.

          

         

          

   3. Display settings: Allows you to configure display options for the component. For example, in a slideshow component, you can define parameters such as transition speed, number of slides, and whether to show or hide navigation arrows.

       

      

       

   4. SDC: SIngle directory components allows to configure diferent providers for the presentation of the components, ID lets you choose the exact visual appereance of the component.

      Acccording to the Drupal documentation, SDC implements the single directory component approach. Everything you need for your component is in a single directory.

      This includes: my-component.twig, my-styles.css, my-behaviors.js, my-component.php, etc. If it affects how your component renders, it's in that directory

      This way your components are easier to find, don't have unaccounted code on some other place, and can be easily copy&pasted.

      You can find more information about SDC here 

       

      

       

       

   5. CFields: Cfields are fields specific to Castorcito that are used to build a component. There are different types of cfields, each with a particular functionality. In addition, each cfield has its own configuration options, which will be detailed later.