interfaz https://drupaladicto.com/ es Layout Paragraphs | Módulo Drupal https://drupaladicto.com/curso/site-building/layout-paragraphs-modulo-drupal <span class="field field--name-title field--type-string field--label-hidden">Layout Paragraphs | Módulo Drupal</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-935 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-935 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-935 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-935"> <section id="video-only-935" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-656-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-656-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-656-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/49j55HDXCsI&amp;max_width=0&amp;max_height=0&amp;hash=_1bUXN5ZORgwtr32i6EmrcrWxT7iDrOhPOzQtw8BLog" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-656-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     En el curso <a href="/curso/landing-page-creacion-y-configuracion-con-drupal-9" rel="bookmark">Landing Page | Creación y configuración con Drupal 9</a>, aprendimos a configurar desde cero, un tipo de contenido, llamado Landing Page, cuya estructura principal estaba formada paragraphs, permitiendo así una mayor flexibilidad sobre el orden de todos sus componentes.</p> <p>     También pudimos comprobar, que es posible añadir más funcionalidades, que modifiquen específicamente a cada Paragraphs, como la de permitir configurar un color, gracias al módulo <a href="https://www.drupal.org/project/color_field">Color Field</a>; o incluir un formulario dentro de un paragraphs, gracias a los campos referenciados de Drupal.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/curso-landing.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     En el caso de nuestro ejemplo, resulta fácil la manipulación de los componentes Paragraphs, desde la interfaz del usuario, ya que no representan una gran cantidad; pero, ¿qué ocurre si en lugar de tener unos pocos Paragraphs, queremos ofrecer al usuario un mayor abanico de posiblidades?</p> <p>     Si exploramos el fomulario de creación de nuestra Landing Page, podremos comprobar a qué nos referimos; ya que la interfaz del usuario de Drupal, añade cada nuevo paragraphs justo debajo del anterior, y, a pesar de que podemos plegar u ocultar cada uno de los paragraphs, durante el proceso de edición, no contamos con una opción gráfica "Verdaderamente amigable", para usuarios con conocimientos básicos sobre edición de contenidos.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/editar.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h2 id="page-subtitle">   Layout Paragraphs</h2> <p>     Para facilitar el proceso de edición de contenidos, cuando tenemos un gran número de paragraphs, disponibles para el usuario editor, contamos con otro módulo llamado <a href="https://www.drupal.org/project/layout_paragraphs">Layout Paragraphs</a>, cuyo objetivo es, precisamente, permitirnos añadir, editar, arrastrar o eliminar los paragraphs dentro de nuestros contenidos.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/modulo-layout-paragraphs.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Para facilitar el proceso de edición de contenidos, cuando tenemos un gran número de paragraphs, disponibles para el usuario editor, contamos con otro módulo llamado <a href="https://www.drupal.org/project/layout_paragraphs">Layout Paragraphs</a>, cuyo objetivo es, precisamente, permitirnos añadir, editar, arrastrar o eliminar los paragraphs dentro de nuestros contenidos.</p> <h3>Descarga y Activación:</h3> <p>Para descargar y activar cualquier módulo de Drupal tienes varias opciones:</p> <p><strong>     Descarga:</strong><br /><br />           1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:</p> <pre> <code>composer require drupal/layout_paragraphs</code></pre> <p>          2.- Descargándolo manualmente el módulo desde la página oficial del <a href="https://www.drupal.org/project/layout_paragraphs">Layout Paragraphs</a> y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.</p> <p>     <strong>Activación:</strong></p> <p>          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente</p> <pre> <code>drush en layout_paragraphs -y</code></pre> <p>          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/layout-paragraphs-activado.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h3>   Configuración del módulo</h3> <p>     Una vez descargado y activado el módulo, el siguiente paso será configurar el campo o los campos, del tipo paragraphs, para que podamos ver el cambio que nos ofrece este módulo, a nivel de la interfaz de usuario, facilitando la manipulación de los paragrphs. </p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     En nuestro ejercicio con la Landing Page, creamos un campo tipo paragraphs, en el que añadimos cada uno de los Bloques o Paragraphs que deberían estar disponibles para que el usarios los añadiera, editara o modificara, según sus necesidades.</p> <p>     Por lo tanto, tendremos que acceder a las pestañas <strong>Administrar la visualización del formulario</strong> y luego en la de <strong>Gestionar Presentación</strong>, buscar el campo al que activaremos la funcionalidad del módulo Layout Paragrarphs y la seleccionaremos dentro de las opciones disponibles. Por último guardaremos los cambios y borraremos la cache de Drupal, para ver el resultado.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/presentacion-campo.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/campos.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/gestionar-formulario.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Una vez guardados los cambios en la configuración de los campos, si volvemos a editar nuestro contenido, podremos apreciar un cambio considerable en la forma de gestionar los paragraphs.</p> <ul></ul></div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/layout-edicion.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Entre los cambios están:</p> <ul><li>Posibilidad de previsualizar el contenido de los paragraphs, tal y como se muestran en el frontend.</li> <li>Capacidad para añadir nuevos paragraphs por medio de un buscador</li> <li>Capacidad de arrastrar y cambiar de posición todos los paragraphs entre sí.</li> <li>Capacidad para duplicar Paragraphs</li> </ul></div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/nuevas-fucionalidades.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h3>   Combinando Paragraphs con Layout Builder</h3> <p>     Uno de los objetivos principales de este módulo, es ofrecer la posibilidad de combinar el uso de Pagragraphs, con el Layout Builder integrado en Drupal, a partir de Drupal 8, con esta combinación, podremos preconfigurar secciones de una o varias columnas, para poder insertar en ellas, todos los paragraphs que necesitemos.</p> <h3>   Cómo crear una sección</h3> <p>     La sección, no es más que otro componente del tipo Paragraphs, que tendremos que añadir al listado principal, si queremos que funcione.</p> <p>     La particularidad de una SECCIÓN, es que tendremos que marcar la opción de <strong>Layout Paragraphs</strong>, en la parte inferior, para que pueda ser utilizada con ese fin.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/secciones2.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Al configurar este nuevo paragraphs, al que llamaremos SECTION, o como te apetezca, nos aparecerá dentro de las opciones disponibles, cuando presionamos el icono de suma (+), que aparecer en la parte superior e inferior de nuestra nueva interfaz de usuario, para la edición de los paragraphs.</p> </div> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-imagen paragraph--view-mode--default"> <div class="field field--name-field-imagen-contenido field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-full-width-column"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"> <img width="850" src="/sites/default/files/imagenes/secciones.svg" alt="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Paragraphs Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> </article> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mié, 26/04/2023 - 10:52</span> Wed, 26 Apr 2023 08:52:06 +0000 webmaster 431 at https://drupaladicto.com Gutenberg | Módulo Drupal https://drupaladicto.com/curso/site-building/gutenberg-modulo-drupal <span class="field field--name-title field--type-string field--label-hidden">Gutenberg | Módulo Drupal</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-925 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-925 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-925 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-925"> <section id="video-only-925" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-645-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-645-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-645-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/xrcMsplfVog&amp;max_width=0&amp;max_height=0&amp;hash=dnHOBkesGLiFGHR0AQ0oFHzAc6TySJ9Cr_MEevNweG8" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-645-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1164" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><p>      Aunque en mi opinión, una de las cosas que me enamoró de Drupal en cuanto lo conocí, es la posibilidad de manipular, personalizar y saber encontrar, prácticamente dónde y cuando ocurren la mayoría de sus funcionalidades, entiendo que el objetivo principal de cualquier herramienta de desarrollo, debería ser facilitarnos la vida, además de ofrecernos grandes posibilidades a nuestro alcance.</p> <p>     Como cada proyecto requiere de diferentes requisitos para llevarse a cabo, y por lo general, uno de los más importantes, es el tiempo que tendremos que invertir hasta su puesta en producción, muchos desarrolladores web prefieren apostar por otros CMS o construir desde cero proyectos enteros, para sentir que tienen mayor control sobre sus creaciones.</p> <p>     No obstante, creo que con un pequeño conocimiento sobre <strong><a href="https://www.drupaladicto.es/curso/instalacion-de-drupal-9-usando-composer">cómo instalar Drupal 9 usando Composer</a></strong> y un breve vistazo a <strong><a href="https://www.drupaladicto.es/actualidad/gestionar-usuarios-roles-y-permisos-en-drupal">cómo gestionar usuarios y permisos</a>,</strong> complementado con la ayuda del<strong> <a href="https://www.drupal.org/project/gutenberg">Módulo Gutenberg</a></strong>, conocido mayormente por usuarios de Wordpress, podrías llegar a tener lo que haz estado buscando hace tiempo, una plataforma simple de manipular, pero potente, con posibilidad de adaptación a la mayoría de webs sencillas.</p> <p>     Es por esta razón que a continuación, te voy a mostrar cómo puedes utilizar las opciones que integra este módulo a la interfaz de usuario, facilitándote de forma notable, la creación de nuevos contenidos en Drupal 9.</p> <h3>Descarga y Activación:</h3> <p>Para descargar y activar cualquier módulo de Drupal tienes varias opciones:</p> <p><strong>     Descarga:</strong><br /><br />           1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:</p> <pre> composer require drupal/gutenberg</pre> <p>          2.- Descargándolo manualmente el módulo desde la página oficial del <a href="https://www.drupal.org/project/gutenberg" target="_blank">Módulo Gutenberg</a> y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.<br />  </p> <p>     <strong>Activación:</strong></p> <p>          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente</p> <pre> drush en gutenberg -y</pre> <p>          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.</p> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 56.13%;" data-ratio="56.13" data-b-token="b-cbc2b3c85e3" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="4ab6ffd1-0738-4dfb-b61d-dc79541b1202" decoding="async" loading="lazy" typeof="foaf:Image" alt="gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/activar_gutenberg.png?itok=-kjwbUmt" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="449" /></div></div> <p> </p> <h2>Cómo utilizar Gutenberg</h2> <p>     Una vez activado el <a href="https://www.drupal.org/project/gutenberg" target="_blank">Módulo Gutenberg</a>, veremos que se ha añadido una nueva opción, en la parte inferior izquierda de todos los contenidos, llamada <strong>Gutenberg Experience</strong> y que al activarla podremos ver dos listados con todos los nuevos bloques, tanto del propio módulo como de el núcleo de Drupal, que podremos activar o no, para que estén disponibles como parte de las opciones del tipo de contenido en que se han activado, modificando inmediatamente la interfaz de creación de dicho contenido.</p> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 84.74%;" data-ratio="84.74" data-b-token="b-f277838c7ac" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="705c0cff-a5dd-4f30-a422-3cec26973dc8" alt="Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/gutenberg_experience_0.png?itok=FRkti4I1" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="662" height="561" typeof="foaf:Image" /></div></div> <p>     La idea principal de Gutenberg, es que convierte todos los elementos que podamos añadir, en bloques individuales, con sus propias opciones, disponibles en el momento en que seleccionamos dicho bloque o elemento, haciéndolo mucho más gráfico el método para añadir, modificar o reutilizar dicho elemento.</p> <p>     Para comenzar a añadir contenidos o "Bloques" en nuestro tipo de contenido, veremos un símbolo de más dentro de un círculo y al hacer clic sobre éste, se desplegarán las diferentes opciones disponibles para agregar y una vez seleccionado el elemento que deseamos añadir y se añade, inmediatamente cambiará el panel de la derecha de la pantalla, adaptándose a las opciones disponibles para él.</p> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 56.13%;" data-ratio="56.13" data-b-token="b-bce47a61fed" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="c587a992-32ad-4585-9448-66e48c135b8e" decoding="async" loading="lazy" typeof="foaf:Image" alt="gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/pantalla_inicial.jpg?itok=coMNn7Vp" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="449" /></div></div> <p>     De entre sus opciones más llamativas, está la posibilidad de arrastrar directamente los elementos hasta la posición deseada desde el escritorio de tu ordenador, la integración con módulos como Media o Imagen, insertar directamente elementos embebidos como vídeos, sonidos, etc, o la posibilidad de crear "Bloques" de contenido reutilizables en cualquier otro lugar de la web.</p> <p><em>     El objetivo de utilizar Gutenberg, es que todos tus tipos de contenido, sólo tengan el campo "Body" y dentro de este campo se podrán añadir, editar o eliminar el resto de elementos que se mostrará en tus páginas, incluyendo imágenes o incluso bloques del núcleo de Drupal.</em></p> <h2>Gutenberg Cloud</h2> <p>     Una de las opciones más novedosas de este módulo, es la posibilidad de añadir "bloques" de contenido, directamente desde su repositorio en la web <a href="https://gutenbergcloud.org/blocks">Gutenbergcloud.org</a>, mediante el sistema de CDN, por lo que dichos bloques, con características, estilos y funcionalidades prediseñados, no se guardan como el resto de contenidos en la base de datos de Drupal. Por el contrario, se añaden como etiquetas dentro del campo "BODY", que añade Drupal por defecto cada vez que creamos un nuevo tipo de contenido.</p> <p>     Para añadir esta funcionalidad, sólo habría que activarla como cualquier otro módulo y una vez hecho esto, se añadirá como una de las opciones disponibles para agregar en el listado de bloques cuando hagamos clic en el selector.</p> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 56.13%;" data-ratio="56.13" data-b-token="b-519c4944b53" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="d8d476a3-25c1-4594-910c-36aae38de216" decoding="async" loading="lazy" typeof="foaf:Image" alt="gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/cloud_gutenberg.jpg?itok=tG0epQYX" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="449" /></div></div> <p>     Por desgracia, esta funcionalidad no es compatible para todas las versiones de Drupal 9, por lo menos al momento de escribir este artículo. Pero sí podrás utilizarla en cualquier instalación de Drupal 8 o menor que la 9.1.</p> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 16.9%;" data-ratio="16.9" data-b-token="b-82293fbcfb9" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="5fcdd712-d8ea-4bc4-812c-00de9ed7eaf9" alt="Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/no_compatible_0.png?itok=ihf1zaoV" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1059" height="179" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mié, 19/04/2023 - 16:33</span> Wed, 19 Apr 2023 14:33:36 +0000 webmaster 430 at https://drupaladicto.com Asset Injector https://drupaladicto.com/curso/site-building/asset-injector <span class="field field--name-title field--type-string field--label-hidden">Asset Injector</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-861 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-861 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-861 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-861"> <section id="video-only-861" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-581-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-581-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-581-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/-YBYer_0DFU&amp;max_width=0&amp;max_height=0&amp;hash=TDSKcsIrk8wf8JdzUuk00fzJR9Zq0Jqrwdiaaqs1Zhw" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-581-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1163" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><p>         Este módulo te pemitirá añadir y editar CSS y/o Javascript, sin la necesidad de salir de la interfaz de usuario de administrador en Drupal. Además, podrás limitar las páginas en las que se ejecutan o aplican, solamente seleccionando el tipo de contenido en el selector dentro de la pantalla de configuración del módulo.</p> <h3> DESCARGA Y ACTIVACIÓN:</h3> <p>Para descargar y activar cualquier módulo de Drupal tienes varias opciones:</p> <p><strong>     Descarga:</strong></p> <p>          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:</p> <pre> composer require drupal/asset_injector</pre> <p>          2.- Descargándolo manualmente el módulo desde la página oficial del <a href="https://www.drupal.org/project/asset_injector">Módulo Asset Injector</a> y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.</p> <p>     <strong>Activación:</strong></p> <p>          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente</p> <pre> drush en asset_injector -y</pre> <p>          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 58%;" data-ratio="58" data-b-token="b-fbb946cf234" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="6e4b5ed9-48be-445a-844f-488f5fcbec86" loading="lazy" alt="Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/asset_injector.png?itok=5YvpX8sk" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="377" typeof="foaf:Image" /></div></div> <p> </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 109.24%;" data-ratio="109.24" data-b-token="b-3cddf10adce" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="9ee14d09-68c2-4a50-82c8-3904af66a200" loading="lazy" alt="Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/acceder_asset_injector.jpg?itok=ZXnXBzC5" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="595" height="650" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 58%;" data-ratio="58" data-b-token="b-fbb946cf234" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="fc45ad42-8bd6-4bce-8520-fefca1300000" loading="lazy" alt="Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/asset_injector.png?itok=5YvpX8sk" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="377" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 75.54%;" data-ratio="75.54" data-b-token="b-0fa796c9540" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="c633ae65-bde0-47fb-a99c-bb1a28910d6a" loading="lazy" alt="Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/asset_injector_dentro.png?itok=M1Fuyc8Y" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="491" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 57.23%;" data-ratio="57.23" data-b-token="b-e011d7395ee" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="537ec63e-25e8-42f1-b118-79e0e3c116c5" loading="lazy" alt="Asset Injector módule | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/efecto_asset_injector.png?itok=vMrDgo8_" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="650" height="372" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Dom, 16/04/2023 - 17:03</span> Sun, 16 Apr 2023 15:03:17 +0000 webmaster 426 at https://drupaladicto.com Menús | Creación, edición y manipulación en Drupal 8 y 9 https://drupaladicto.com/curso/site-building/menus-creacion-edicion-y-manipulacion-en-drupal-8-y-9 <span class="field field--name-title field--type-string field--label-hidden">Menús | Creación, edición y manipulación en Drupal 8 y 9</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-937 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-937 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-937 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-937"> <section id="video-only-937" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-658-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-658-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-658-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/DLnINO4i7r0&amp;max_width=0&amp;max_height=0&amp;hash=ai6ngh4WmJaWPhM_0TdpGdFFjkWfnOmdEV9ANXRGgR0" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-658-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1162" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/DLnINO4i7r0" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>     Al realizar cualquier instalación de Drupal, por defecto, una vez arrancado el sitio, podremos ver que se nos han activado algunos elementos y funcionalidades, que nos servirán de referencia para la posterior configuración y desarrollo de nuestra web.</p> <p>     Dentro de este grupo, encontraremos los Menús, parte fundamental de cualquier proyecto web, que facilita la navegación y accesos, tanto de los usuarios visitantes, como de los administradores del sitio.</p> <p>     En el caso de Drupal, veremos cinco tipos de Menús activados por defecto: el Menú Administrador, Menú principal, el Menú Usuario, el Menú herramientas y el Menú del Pie de página.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 51.47%;" data-ratio="51.47" data-b-token="b-f525a5a58ae" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a334260735.jpg?itok=6x0rBUxm" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="645" height="332" typeof="foaf:Image" /></div></div> <p>     Todos ellos, al igual que la mayoría de elementos disponibles, a partir de Drupal 8, estarán dentro de Bloques, que podremos mover, según nuestras necesidades, además de controlar quiénes podrán acceder a los mismos, a través de la configuración de permisos de los usuarios.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 66.16%;" data-ratio="66.16" data-b-token="b-a29c154b78d" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a33762bd65.jpg?itok=0Ok-Ve2F" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="458" height="303" typeof="foaf:Image" /></div></div> <p>     Para administrar los bloques, iremos a la página de administración de bloques ubicada en la url: "estructura/diseño de bloques". Si quieres aprender más sobre la manipulación de bloques, visita este enlace <a href="https://www.drupaladicto.com/actualidad/como-crear-un-bloque-programaticamente-en-drupal-9">Cómo crear un bloque programáticamente en Drupal 9</a>. Tan pronto como aprendas a manipular los bloques, te será más fácil administrar las posiciones donde se mostarán los diferentes Menús de tu proyecto.</p> <p>     Ahora que ya tienes claro, dónde y cómo manipular los Bloques, deberías dedicar un rato a repasar o conocer la manipulación de los permisos, para que puedas controlar los accesos, según tus necesidades, a los diferentes menús y sus respectivos enlaces, mediante la gestión de permisos y usuarios; por defecto, la instalacíon de Drupal te crea un usuario administrador, pero te recomendaría crear, tan pronto como puedas, un segundo usuario, al que le vayas dando permisos específicos y así poder comprobar, lo que puede ver o hasta dónde puede acceder; de esta manera, al entregar el proyecto o publicarlo, evitarás dar permisos innecesarios, y correr el riesgo de que te borren o cambien alguna configuración erróneamente.</p> <p>     Para conocer más sobre cómo crear usuarios y gestionar sus accesos y permisos, puedes visitar el siguiente enlace <a href="https://www.drupaladicto.com/actualidad/gestionar-usuarios-roles-y-permisos-en-drupal">Gestionar usuarios, roles y permisos en Drupal</a>.</p> <h2>     Menús activados por defecto al instalar Drupal</h2> <h3>        Menú Administrador</h3> <p>             Como su nombre lo indica, es el Menú que permite administrar todo el sitio. Para poder verlo necesitarás tener los permisos de administrador. Por esta razón es recomendable crear un segundo usuario, con los permisos limitados, para que no pueda destruir, alguna configuración, por error.</p> <p>             Este menú, aparece en la parte superior del sitio, justo debajo de la barra del navegador, por defecto ofrece una navegación limitada, por lo que se recomienda descargar y activar el módulo Admin Menu, para ofrecerte más opciones y facilidades cuando estés navegando por las diferentes secciones del sitio web. </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 73.08%;" data-ratio="73.08" data-b-token="b-82f2d436836" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a3398a5e3e.jpg?itok=uXFO-OXU" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="587" height="429" typeof="foaf:Image" /></div></div> <p>            Para descargar y conocer cómo utilizar el módulo visita este enlace: <a href="https://www.drupaladicto.com/curso/admin-toolbar" target="_blank">Admin Toolbar</a> </p> <h3>        Menú Principal</h3> <p>          Este es el menú creado por defecto, para que los usuarios puedan navegar a través de las diferentes secciones de tu web, podrás configurar tus tipos de contenido, para que se añadan a este menú automáticamente.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div data-b-token="b-b27934578b6" class="media media--blazy media--image media--ratio media--ratio--11 is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a33bd19855.jpg?itok=UaOpO09U" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="344" height="344" typeof="foaf:Image" /></div></div> <p>     También agregar elementos y contenidos, de forma manual desde la pantalla de administracion de los menús, ubicada en la url: "/admin/structure/menu"</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 68.12%;" data-ratio="68.12" data-b-token="b-2d364881c9d" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a33d992385.jpg?itok=f_7MlkaS" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="458" height="312" typeof="foaf:Image" /></div></div> <h3>        Mostrar elementos del Submenú</h3> <p>           Es muy importante saber, que por defecto, el menú principal viene configurado para mostrar sólo el primer nivel de sus elementos, por esta razón, si nuestro sitio tiene Submenús, que deberían desplegarse, tendremos que habilitar esta opción desde la administración de bloques, haciendo clic en el botón configurar y posteriormente, cambiando la opción a <strong>Ilimitado</strong>, en el apartado llamado <strong>Número de niveles a mostrar, de lo contrario, sólo se mostarán aquellos elementos que se encuentren en el primer nivel.</strong></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 53.73%;" data-ratio="53.73" data-b-token="b-667fdcfa2ec" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a33f896550.jpg?itok=HMW6KPT6" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="616" height="331" typeof="foaf:Image" /></div></div> <p>     Otra opción que deberemos activar, siempre que nuesto menú tenga (Submenús), es la llamada <strong>Mostrar expandido</strong>, que tambíen viene desactivada por defecto. Si no activamos esta opción, no podremos ver ningún Submenú, aunque hayamos realizado el paso anterior en la administración de Bloques.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 86.92%;" data-ratio="86.92" data-b-token="b-71e609d8fac" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a3412d97f6.jpg?itok=pzNms_xg" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="344" height="299" typeof="foaf:Image" /></div></div> <p>     La opción <strong>Mostrar expandido, deberá activarse en cualquier Menú que contenga Submenús. Puede que las configuraciones iniciales se borren cada vez que instalemos un nuevo Theme, por lo que te recomiendo dejar esta parte para cuando hayas decidido la plantilal o Theme que utilizarás en tu proyecto.</strong></p> <h3>        Menú Usuario</h3> <p>         Este menú, por defecto, ofrece las opciones de identificarse como usuario (Iniciar/Cerrar sesión) y acceder a los detalles relacionados con nuestra cuenta. Por defecto aparece en la parte superior derecha del sitio, en las versiones más actuales de Drupal, al igual que los demás Menús, podrás modificar su posición, limitar los accesos para que se pueda mostrar u ocultar, según tus necesidades, además de ampliar o quitar las opciones.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 56.97%;" data-ratio="56.97" data-b-token="b-488a3f506e2" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a344bb705c.png?itok=GqN1U3Pz" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="244" height="139" typeof="foaf:Image" /></div></div> <h3>     Menú Herramientas</h3> <p>        Por defecto se activa en la barra izquierda de nuestro proyecto, junto al buscador de Drupal. Su contenido irá creciendo en función de los permisos del usuario, facilitando el acceso a configuraciones u opciones específicas. Al igual que los anteriores, podrás cambiar su posición, opciones de mostar/ocultar, de acuerdo con las necesidades de tu proyecto y/o limitar su acceso, mediante la configuración de los permisos correspondientes.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 81.79%;" data-ratio="81.79" data-b-token="b-b18c6fb5aaf" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a347d65117.png?itok=NJTgr3uZ" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="313" height="256" typeof="foaf:Image" /></div></div> <h3>     Añadir enlaces manualmente</h3> <p>     Para añadir un nuevo enlace, dentro de cualquier menú, sólo tendrás que navegar a la pantalla de configuración de los menús, que mencionamos la prinicipio y, a continuación, una vez seleccionado el menú en el cual quieres añadir un nuevo enlace, presionar el botón añadir enlace y completar los campos.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 90.77%;" data-ratio="90.77" data-b-token="b-c125cc0f1ec" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a34a9d4a0d.jpg?itok=ltPlUeoE" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="444" height="403" typeof="foaf:Image" /></div></div> <p>     En el caso de que quieras agregar un contenido existente, bastará con que escribas una letra en el campo del enlace y Drupal te mostrará el listado de contenidos disponibles para que puedas seleccionarlo. Esta es la manera recomendada, ya que si copias la url de forma manual, podrías tener fallos en el caso de que actualizaras el contenido.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 68.12%;" data-ratio="68.12" data-b-token="b-84ac8c6cbb5" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a34cad1391.jpg?itok=i9GgvPsu" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="458" height="312" typeof="foaf:Image" /></div></div> <p>     Si lo que necesitas es añadir un enlace, como parte de un Submenú, podrás hacerlo de dos maneras distintas:</p> <p>        Opción 1 : seleccionar el elemento padre o Menú padre de tu enlace, en el momento que estés añadiendo el contenido.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 91.48%;" data-ratio="91.48" data-b-token="b-f7eacce0b3b" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a34ea98055.jpg?itok=NrvlhvqP" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="458" height="419" typeof="foaf:Image" /></div></div> <p>     Opción 2: Una vez creado tu enlace, arrastrarlo y colocarlo debajo del elemento o Menú padre.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 73.98%;" data-ratio="73.98" data-b-token="b-9fccdfa1ae3" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Menús Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630a351e33686.png?itok=vDJsOVxM" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="415" height="307" typeof="foaf:Image" /></div></div> <p>     <strong>RECUERDA GUARDAS LOS CAMBIOS ANTES DE DEJAR LA PÁGINA DE CONFIGURACIÓN.</strong></p> <h2>     Módulos complementarios para trabajar con Menús en Drupal 9</h2> <p>        Como siempre, Drupal ofrece un listado de módulos, destinados a ampliar o modificar las opciones por defecto de cada uno de sus componentes partes, a continuación te muestro algunos de estos módulos, que podrías necesitar en tu siguiente proyecto:       </p> <h3>Menu Link Attributes</h3> <p> Este módulo compatible con la versión 8/9, te permitirá añadir, entre otras opciones, clases o IDs a tus enlaces para que puedas manipularlos a través de CSS o Javascript, según las necesidades de tu proyecto. Puedes descargarlo desde su <a href="https://www.drupal.org/project/menu_link_attributes" target="_blank">Página Oficial de Drupal</a></p> <h3>Menu Admin per Menu</h3> <p> Este módulo compatible con la versión 8/9, te permitirá otorgar permisos de administrador a roles por menú sin darles permiso de administrador completo. Puedes descargarlo desde su <a href="https://www.drupal.org/project/menu_admin_per_menu" target="_blank">Página Oficial de Drupal</a></p> <h3>Menu Item Role Access</h3> <p> Este módulo agrega un campo de rol opcional a los elementos del menú que enumera todos los roles disponibles. Un usuario que tenga acceso para editar elementos del menú podrá seleccionar los roles que tienen acceso para ver este elemento del menú. Puedes descargarlo desde su <a href="https://www.drupal.org/project/menu_item_role_access" target="_blank">Página Oficial de Drupal</a>.       </p> <h3>Simple Menu Icons</h3> <p> Este módulo compatible con la versión 8/9, te permitirá añadir iconos en lugar de simples enlaces en tus menus de drupal, desde la misma interfaz de usuario. Puedes descargarlo desde su <a href="https://www.drupal.org/project/simple_menu_icons" target="_blank">Página Oficial de Drupal</a></p> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sáb, 15/04/2023 - 14:15</span> Sat, 15 Apr 2023 12:15:47 +0000 webmaster 423 at https://drupaladicto.com Gestionar plantillas con Layout Builder https://drupaladicto.com/curso/site-building/gestionar-plantillas-con-layout-builder <span class="field field--name-title field--type-string field--label-hidden">Gestionar plantillas con Layout Builder</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-920 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-920 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-920 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-920"> <section id="video-only-920" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-640-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-640-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-640-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/lPODMPFYgFc&amp;max_width=0&amp;max_height=0&amp;hash=ZBLPlhWzNzvVkJ2NZAxh9gm1_fKC8pSBUAiQgqdg9WE" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-640-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1161" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/lPODMPFYgFc" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>      Hoy en día, como profesionales dedicados al desarrollo de páginas web, uno de los mayores retos con los que deberemos enfrentarnos, en cada nuevo proyecto, es el asunto de nuestros puntos fuertes.</p> <p>     Esto significa, que para las empresas o clientes, en general, ya no nos vale el argumento de que "Soy solo programador" o "Yo solo sé maquetar"; y con esto no pretendo justificar en lo absoluto el famoso perfil "Full Stack", que se han sacado de la manga algunos, para pagar menos y exigir más a sus empleados, sino que, aunque seamos programadores o maquetadores, el conocimiento, al menos básico, de otras herramientas relacionadas, nos permitirán ahorrar tiempo y no depender tanto de otros perfiles, para implementar algunos cambios durante el proceso de desarrollo.</p> <p>     Una de las razones por las que tanto me gustó Drupal desde el principio, es su versatilidad, lo cual nos permite, sin importar nuestro perfil profesional, con algo de ayuda basada en documentación relacionada, crear proyectos web, tanto a nivel de backend como de frontend. </p> <p>     Por eso, en esta ocasión, hablaremos sobre la implementación del módulo "Layout Builder", integrado en Drupal a partir de la versión 8. Con este módulo podremos crear, personalizar o modificar plantillas, para la presentación de nuestros contenidos, utilizando sólo la interfaz de usuario, sin la necesidad de manipular o conocer a fondo el uso de las plantillas Twig.</p> <h2>Requisitos:</h2> <p>     - Tener una web Drupal en funcionamiento, con varios contenidos preferiblemente con taxonomías, imágenes y textos, para que puedas comprobar los cambios una vez implementados.</p> <p>     Si no tienes contenidos, o prefieres generar contenido de prueba, para realizar tus configuraciones, puedes utilizar el módulo <strong>Devel Generate</strong>, integrado en el módulo <strong><a href="https://www.drupal.org/project/devel" target="_blank">Devel</a></strong>, con el cual podrás generar todo el contenido que necesites basándote en los tipos de contenido que prefieras, haciendo únicamente un par de clics.</p> <p>     Aquí tienes la explicación de Cómo generar contenidos de prueba con el módulo Devel <a href="https://www.drupaladicto.es/curso/como-generar-contenidos-de-prueba-con-el-modulo-devel" target="_blank">Haz clic aquí</a></p> <p>     - Activar los módulos Media y Media Library, que también se incluyen el en núcleo de Drupal, a partir de la versión 8 y que nos permitirán trabajar con características adicionales relacionados con multimedia (imágenes, videos, audio).</p> <p>     - <a href="https://www.drupal.org/project/layout_builder_component_attributes">Layout Builder Component Attributes</a>: te permitirá añadir clases a tus secciones y bloques dentro de Layout Builder</p> <p>    - <a href="https://www.drupal.org/project/asset_injector" target="_blank">Asset Injector (Opcional)</a>: Te permitirá añadir CSS o JS directamente en base de datos a través de la interfaz. Es muy útil para realizar pruebas sobre aplicación de estilos, antes de añadirlos directamente en los archivos CSS o pasárselos al maquetador que se encargará de ejecutarlos.</p> <h2>Cómo gestionar plantillas con Layout Builder en Drupal 9</h2> <h3>     Paso 1 Activación de módulos Layout Builder, Media y Media Library:</h3> <p>          Con la activación y combinación de estos módulos, incluidos en el núcleo de Drupal, a partir de la versión 8, podremos comenzar a configurar nuestras plantillas, utilizando la interfaz de usuario, además de brindarnos la oportunidad de reutilizar imágenes subidas previamente o añadir otros elementos como videos o archivos de audio, gracias a la los módulos Media y Media Library.</p> <h3>     Paso 2 Descarga y activación de módulo Layout Builder Component Attributes:</h3> <p>          Debido a que el Layout Builder funciona íntegramente con la base de datos de Drupal, no contamos con la posibilidad de tener archivos físicos con los que trabajar, por esta razón, para añadir los estilos a nuestras plantillas y sus elementos relacionados, necesitaremos necesitaremos de éste, creado para ofrecer esta posibilidad. </p> <h3>    Paso 3 Activación del Layout Builder dentro de nuestros contenidos:</h3> <p>         Después de tener activados todos los módulos necesarios, relacionados con nuestras plantillas, es el momento de activarlo dentro de nuestro contenido, para comenzar a trabajar.</p> <p>          Para ello, tendremos que dirigirnos a la url "/admin/structure/types/manage/article/display", porque en nuestro ejemplo, hemos optado por utilizar los artículos que vienen por defecto, en cualquier instalación de Drupal.</p> <p></p> <p>      Después, podremos elegir cuál o cuáles de los Modos de Vista, relacionados con nuestro contenido serán los seleccionados para trabajar con esta opción. Es posible que, en algunos casos, con modificar el Modo Default, sea suficiente para lograr nuestros objetivos.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 85.13%;" data-ratio="85.13" data-b-token="b-21cb0729a35" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c69cd3f2fd.jpg?itok=NWdObaFb" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="538" height="458" typeof="foaf:Image" /></div></div> <p>     Tan pronto como hayamos activado el módulo para nuestro Modo de Vista, si volvemos a nuestro contenido, en el modo de vista afectado, podremos ver la pestaña "Diseño" o "Layout", que nos permitirá acceder a las opciones nuevas de edición.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 35.37%;" data-ratio="35.37" data-b-token="b-c1227b0ef9a" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c69ebb8cd0.jpg?itok=NcfS66pv" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="393" height="139" typeof="foaf:Image" /></div></div> <h3>     Paso 4 Comenzar con la edición de la plantilla:</h3> <p>          A partir de este momento, lo siguiente será añadir "Secciones",  haciendo clic sobre "Section", y se nos abrirá una ventana en la parte derecha de la pantalla, con las diferentes secciones o Columnas, donde podremos colocar nuestros elementos. </p> <p>         Estos elementos pueden ser Bloques, Vistas, Campos, etc.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 57.54%;" data-ratio="57.54" data-b-token="b-edd22199515" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c6c870e7ea.png?itok=x6TI0NNS" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="504" height="290" typeof="foaf:Image" /></div></div> <h3>     Paso 5 aplicar estilos temporales a la plantilla:</h3> <p>          Debido a que todos los cambios relacionados con el Layout Builder se guardan en base de datos y no en archivos físicos, si queremos añadir estilos css en nuestras plantillas, tendremos que descargar y activar el módulo Layout Builder Component Attributs <a href="https://www.drupal.org/project/layout_builder_component_attributes">Haz clic aquí</a> y una vez configurado para que nos muestre las opciones que deseamos, entonces, podremos ver una opción más disponible al hacer clic en editar la sección.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 93.31%;" data-ratio="93.31" data-b-token="b-599e65564d7" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c6ca7489e3.jpg?itok=DKEIX1ul" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="538" height="502" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 93.31%;" data-ratio="93.31" data-b-token="b-01524f7eea1" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c6cbf92313.jpg?itok=DTTLxI6i" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="538" height="502" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 39.6%;" data-ratio="39.6" data-b-token="b-801d6122cb8" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c6cd3613fe.jpg?itok=S7QYDnzW" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="553" height="219" typeof="foaf:Image" /></div></div> <p>          Aunque esta opción nos permite añadir estilos relacionados con nuestra base de datos, en realidad lo recomendable es que se utilicen como recurso temporal, ya que todos los estilos de cualquier proyecto web deberían guardarse directamente en el archivo css.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 93.31%;" data-ratio="93.31" data-b-token="b-0a1cc575cd6" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/file-630c6ceedc8c7.jpg?itok=D6Rz4IXz" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="538" height="502" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Dom, 19/03/2023 - 18:18</span> Sun, 19 Mar 2023 17:18:06 +0000 webmaster 412 at https://drupaladicto.com Básicos Sitebuider | Editor de contenidos o usuario por interfaz https://drupaladicto.com/curso/basicos-sitebuider-editor-de-contenidos-o-usuario-por-interfaz-resumen <span class="field field--name-title field--type-string field--label-hidden">Básicos Sitebuider | Editor de contenidos o usuario por interfaz</span> <div class="field field--name-field-portada-ce field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"><svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 650 650"> <rect y="0" width="650" height="650" style="fill:#054065; stroke:#1d1d1b; stroke-miterlimit:10;"></rect> <text transform="translate(183.61 309.27)" style="fill:#fff; font-family:Montserrat-Light, Montserrat; font-size:99.05px; font-weight:300;"> <tspan x="0" y="0" style="letter-spacing:-.02em;">C</tspan> <tspan x="69.04" y="0">u</tspan> <tspan x="135.3" y="0" style="letter-spacing:0em;">r</tspan> <tspan x="174.03" y="0">so</tspan> <tspan x="-58.14" y="90">G</tspan> <tspan x="18.42" y="90" style="letter-spacing:-.05em;">r</tspan> <tspan x="52.69" y="90">atui</tspan> <tspan x="241.97" y="90" style="letter-spacing:-.02em;">t</tspan> <tspan x="279.51" y="90">o</tspan> </text> </svg></div> </div> </article> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Dom, 19/03/2023 - 09:23</span> <div class="field field--name-field-tipo-ce field--type-list-string field--label-hidden field__item">Curso Gratuito</div> <div class="field field--name-field-suscribete-youtube field--type-link field--label-hidden field__item"><a href="https://www.youtube.com/drupaladicto">Suscríbete al canal</a></div> <div class="field field--name-field-categoria-ce field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/categoria/sitebuilder" hreflang="es">sitebuilder</a></div> <div class="field__item"><a href="/categoria/interfaz" hreflang="es">interfaz</a></div> <div class="field__item"><a href="/categoria/editor" hreflang="es">editor</a></div> <div class="field__item"><a href="/categoria/gestor-de-contenidos" hreflang="es">gestor de contenidos</a></div> <div class="field__item"><a href="/categoria/paragraphs" hreflang="es">paragraphs</a></div> </div> <div class="field field--name-field-comenzar-curso field--type-string field--label-hidden field__item">/basicos-usuario-editor</div> Sun, 19 Mar 2023 08:23:39 +0000 webmaster 410 at https://drupaladicto.com Drupal 10 | Presentación https://drupaladicto.com/curso/drupal-10/drupal-10-presentacion <span class="field field--name-title field--type-string field--label-hidden">Drupal 10 | Presentación</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><p>     Drupal 10 fue lanzado a finales de 2022, añadiendo varios módulos a su núcleo y actualizando otros, coincidiendo con la versión más reciente de Symfony, cuyo código forma la estructura central de Drupal desde la versión 8.</p> <p>     Como la nueva versión se parece bastante a sus predecesoras, en este curso sólo añadiremos las que sean consideradas como verdaderamente novedades, que no hayan estado presentes hasta ahora o cuya implementación, suponga un cambio o evolución, en alguno de los procesos y/o metodologías conocidos hasta ahora.</p> <p>     Por lo tanto, te recomiendo realizar los cursos Drupal 8 paso a paso y Drupal 9 paso a paso, donde conocerás la diferentes maneras de instalar un Drupal en tu entorno local, los principales módulos que deberías conocer, algunos comandos de Drush y de Composer, entre otros.</p> <p>     Una vez hayas realizado estos cursos anteriores, no tendrás demasiados inconvenientes, para desarrollar nuevos proyectos o actualizarlos, a la versión de Drupal 10.</p> <ul><li><a href="https://www.drupaladicto.com/drupal-8-paso-paso-en-espanol" target="_blank">Drupal 8 Paso a Paso en Español</a><br />  </li> <li><a href="https://www.drupaladicto.com/drupal-9-paso-paso-en-espanol" target="_blank">Drupal 9 Paso a Paso en español</a><br />  </li> <li><a href="https://www.drupaladicto.com/trabajo-con-vistas-en-drupal" target="_blank">Trabajando con Vistas en Drupal</a><br />  </li> <li><a href="https://www.drupaladicto.com/curso/programacion-basica-en-drupal" target="_blank">Programación Básica en Drupal</a><br />  </li> <li><a href="https://www.drupaladicto.com/curso/drupal-frontend-basicos" target="_blank">Drupal Frontend | Básicos</a><br />  </li> <li><a href="https://www.drupaladicto.com/curso/landing-page-creacion-y-configuracion-con-drupal-9" target="_blank">Landing Page | Creación y configuración con Drupal 9</a></li> </ul></div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sáb, 18/03/2023 - 13:42</span> Sat, 18 Mar 2023 12:42:03 +0000 webmaster 389 at https://drupaladicto.com Drupal 10 | Site Builder https://drupaladicto.com/curso/drupal-10-site-builder-resumen <span class="field field--name-title field--type-string field--label-hidden">Drupal 10 | Site Builder</span> <div class="field field--name-field-portada-ce field--type-entity-reference field--label-hidden field__item"><article class="media media--type-imagen media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Imagen</div> <div class="field__item"><svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 650 650"> <rect width="650" height="650" style="fill:#1d1d1b; stroke:#1d1d1b; stroke-miterlimit:10;"></rect> <text transform="translate(183.61 309.27)" style="fill:#fff; font-family:Montserrat-Light, Montserrat; font-size:99.05px; font-weight:300; stroke:#1d1d1b; stroke-miterlimit:10;"> <tspan x="0" y="0" style="letter-spacing:-.02em;">C</tspan> <tspan x="69.04" y="0">u</tspan> <tspan x="135.3" y="0" style="letter-spacing:0em;">r</tspan> <tspan x="174.03" y="0">so</tspan> <tspan x="-92.56" y="90" style="letter-spacing:-.03em;">P</tspan> <tspan x="-24.31" y="90" style="letter-spacing:-.01em;">r</tspan> <tspan x="13.32" y="90">emium</tspan> </text> </svg></div> </div> </article> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sáb, 18/03/2023 - 12:45</span> <div class="field field--name-field-tipo-ce field--type-list-string field--label-hidden field__item">Curso Premium</div> <div class="field field--name-field-suscribete-youtube field--type-link field--label-hidden field__item"><a href="https://www.youtube.com/drupaladicto">Suscríbete al canal</a></div> <div class="field field--name-field-categoria-ce field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/categoria/sitebuilder" hreflang="es">sitebuilder</a></div> <div class="field__item"><a href="/categoria/drupal-10" hreflang="es">drupal 10</a></div> <div class="field__item"><a href="/categoria/instalacion" hreflang="es">instalacion</a></div> <div class="field__item"><a href="/categoria/configuracion" hreflang="es">configuración</a></div> <div class="field__item"><a href="/categoria/usuarios" hreflang="es">usuarios</a></div> <div class="field__item"><a href="/categoria/interfaz" hreflang="es">interfaz</a></div> </div> Sat, 18 Mar 2023 11:45:19 +0000 webmaster 385 at https://drupaladicto.com Configuración de Multisite con Drupal 9 https://drupaladicto.com/actualidad/configuracion-de-multisite-con-drupal-9 <span class="field field--name-title field--type-string field--label-hidden">Configuración de Multisite con Drupal 9</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 07/03/2023 - 10:52</span> <div class="field field--name-field-contenidos-post field--type-entity-reference-revisions field--label-visually_hidden"> <div class="field__label visually-hidden">Contenidos</div> <div class="field__items"> <div class="field__item"> <style>#video-only-1023 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-1023 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-1023 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-1023"> <section id="video-only-1023" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-post.jpg?itok=kSR2Q5ei" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-728-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-728-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-728-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/Rc3AuO8-S3k&amp;max_width=0&amp;max_height=0&amp;hash=cQ1g6TVY11CSrt5ZM1JdaIX__om6FcT6q0mGQ6nxIzg" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-728-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1133" style="background-color: ;border: solid px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><h2>     Consideraciones antes de instalar un Multisite Drupal 9</h2> <p>          En algunos proyectos web, se hace necesario la implementación de un sistema ágil y rápido, para que se puedan realizar actualizaciones, nuevas implementaciones o mejoras en el código, invirtiendo en ello el menor tiempo posible y sin la necesidad de un gran número de personas para dichas tareas. Por ejemplo, para un grupo de empresas, o en el caso de tener varias webs con las mismas funcionalidades, pero destinadas a distintos públicos.</p> <p>        Una alternativa disponible en Drupal, es la posibilidad de usar la instalación Multisite, (Múltiples sitos compartiendo el mismo núcleo), esto signfica, que una vez realizadas las configuraciones principales, cada vez que se vaya a instalar un nuevo sito web, se requerirá de un mínimo de pasos, para obtener un resultado idéntico, o también disponer de una base de partida, para desarrollar nuevas funcionalidades específicas de ese sitio en concreto.</p> <h2>      Pros y Contras de una instalación Multisite Drupal 9</h2> <p>          Antes de optar por este tipo de instalación en un proyecto Drupal, es necesario que entiendas algunos puntos relacionados, en la mayoría de los casos, con las actualizaciones y nuevas implementaciones.</p> <h3>        <strong>Pros:</strong></h3> <p>           - La instalación principal será la que controle todo el resto de webs, esto significa que todos los módulos y/o themes, podrán estar disponibles y activarse o no, según las necesidades individuales de cada sitio.</p> <p>          - Algunas actualizaciones de módulos o themes, podrán realizarse con la ejecución de unos pocos comandos, para todos los sitios al mismo tiempo.</p> <p>          - Podrás utlizar base de datos o un perfil de instalación, que sirva de base automáticamente para los nuevos sitios.</p> <p>          - Ahorrarás espacio de disco, ya que todos los sitios comparten el mismo número de archivos del core de Drupal.</p> <p>        - Todos los sitios comparten un dominio principal, por lo que, durante el desarrollo se utilizan subdominios de este, ej.: sitio1.midominio.com, sitio2.midominio.com; facilitando la instalación y configuración durante el desarrollo, luego cada uno podrá tener su propio Dominio independiente.</p> <h3>       <strong>Contras:</strong></h3> <p>         - Al realizar actualizaciones del núcleo o de los módulos, deberás ejecutar comandos de borrado de Caché y Actualización para todos los sitios.</p> <p>        - Si se crea e instala un módulo personalizado con errores, podría afectar al resto de sitios.</p> <h1>     Pasos para realizar una instalación Multisite Drupal 9</h1> <h3>       Paso 1 - Descarga de los archivos de Drupal 9</h3> <p>           Antes de comenzar con el resto de configuraciones, lo primero que necesitarás hacer, al igual que con cualquier otra instalación de Drupal, será descargar los archivos correspodientes, utilizando el gestor de paquetes Composer. <a href="https://www.drupaladicto.com/curso/instalacion-de-drupal-9-usando-composer" target="_blank">Aprende como instalar Drupal usando composer aquí</a>.</p> <h3>       Paso 2 - Configuración de los dominios para cada sitio</h3> <p>          Para indicarle a Drupal, dónde deberá realizar la instalación de cada sitio, una vez descargados los archivos correspondientes, y configurado el servidor Apache, con cada uno de los dominios relacionados, <a href="/actualidad/como-instalar-un-certificado-ssl-y-activar-https-en-drupal-9" target="_blank">puedes aprender cómo configurar dominios en Apache aquí</a>, la única diferencia con relación a si realizáramos una instalación normal, en lugar de una multisite, es que en cada uno de los archivos de los dominios, el <strong>Document root deberá ser exactamente igual</strong>.</p> <pre>                 # Web root                 DocumentRoot /var/www/multisite/web</pre> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 43.54%;" data-ratio="43.54" data-b-token="b-f067d3b54d8" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="3459f324-a659-4ba6-878c-592f1eaf7b83" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/config_multisitio1.png?itok=4CeRlhM3" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="836" height="364" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 21.7%;" data-ratio="21.7" data-b-token="b-a6d00aa2b3f" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="54c2f17d-bbf1-4293-bf24-af4d72f197ae" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/dominios.png?itok=IWhaFeew" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="613" height="133" typeof="foaf:Image" /></div></div> <h3>        Paso 3 - Configuración del archivo sites.php de Drupal</h3> <p>           Tendremos que realizar algunos cambios dentro del Drupal; el primero de ellos será renombrar el archivo <strong>example.sites.php, ubicado dentro de la carpeta 'web/sites' y dejarlo como </strong>sites.php.</p> <p><strong><strong><strong><strong><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 64.1%;" data-ratio="64.1" data-b-token="b-a125a91c2f5" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="9a7681b5-ec88-42a8-80b6-d0f617f7d01f" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/example_sites.png?itok=BcmE5gXN" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="454" height="291" typeof="foaf:Image" /></div></div> </strong></strong></strong></strong></p> <p><strong><strong><strong><strong><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 71.76%;" data-ratio="71.76" data-b-token="b-47641f7f503" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="9dca3154-db95-4352-b7ae-c741cce262a3" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/sites_cambiado.png?itok=tnpKtJCK" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="262" height="188" typeof="foaf:Image" /></div></div> </strong></strong></strong></strong></p> <p><strong>        A continuación deberíamos copiar el modelo que nos trae este archivo, para indicar en cada uno  de los casos, el dominio correspondiente a cada una de las carpetas donde queremos realizar las instalaciones.</strong></p> <p><strong>        El resultado final será algo parecido a las líneas que aprecen bajo la siguiente imagen, por cada uno de los dominios y sitios que estemos instalando. La primera parte indica el nombre del dominio y la segunda, el nombre de la carpeta a la que apuntará dicho dominio, una vez ejecutemos el instalador de Drupal.</strong></p> <p><strong><strong><strong><strong><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 50.94%;" data-ratio="50.94" data-b-token="b-84d8b6ed149" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="5c1606b6-215d-4029-98e7-312e825b46ab" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/modelo_sitios.png?itok=GCOmnAKX" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="585" height="298" typeof="foaf:Image" /></div></div> </strong></strong></strong></strong></p> <pre> $sites['sitio1.midominio.com'] = 'sitio1'; $sites['sitio2.midominio.com'] = 'sitio2'; </pre> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 46.23%;" data-ratio="46.23" data-b-token="b-1def35934f4" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="0194717c-26eb-417d-b66c-6106a49f56dc" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/sites_final.png?itok=_JQVPk9j" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="597" height="276" typeof="foaf:Image" /></div></div> <h3><strong>     Paso 4 - Crear y configurar Bases de datos y usuarios para cada sitio</strong></h3> <p>        Como habrás imáginado, se recomienda que cada una de las instalaciones, deberá tener una base de datos individual, con su respectivo usuario administrador específico, para evitar fallos de todo tipo, que podrían repercutir en el resto de sitios, provocándonos grandes dolores de cabeza. Una vez crada la base de datos, podremos comenzar con la instalación de cualquiera de los sitios.<strong> <a href="https://www.drupaladicto.com/actualidad/como-instalar-lamp-usando-wsl2-en-windows-10-1era-parte" target="_blank">Puedes aprender a crear usuario y bases de datos aquí</a> </strong></p> <h3><strong>     Paso 5 - Copia y creación de Settings.php y Files</strong></h3> <p>        Existe un último paso antes de comenzar con nuestras instalaciones de Drupal Multisitio, para cada uno de ellos drupal necesitará encontrar el archivo "settings.php", donde guardará las configuraciones relacionadas con la conexión a la base de datos, archivos de configuración, temporales, privados, etc. y por otro lado la carpeta "files", donde guardará todos los archivos relacionados con imágens, css, javascript, entre otros.</p> <p>        Por esta razón, antes de ejecutar el instalador para el primero de nuestros dominios, copiaremos y renombraremos el archivo default.settings.php, dejándolo como settings.php dentro de cada una de las carpetas correspondientes a cada sitio que instalaremos y, a continuación, también en cada una de ellas, crearemos una carpeta files.</p> <p><strong><strong><strong><strong><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 82.68%;" data-ratio="82.68" data-b-token="b-d41ac4c69ce" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="50a84dac-31d3-4e5f-9b2a-46766a8cf68c" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/default_settings.png?itok=kghiyrnY" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="306" height="253" typeof="foaf:Image" /></div></div> </strong></strong></strong></strong></p> <p><strong><strong><strong><strong><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 99.4%;" data-ratio="99.4" data-b-token="b-c600d8f5538" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="f9e2a8b9-8a9c-4644-a196-13cbc1fbc816" data-responsive-image-style="" alt="multisite drupal - www.drupaladicto.org Formacion especializada en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/dos_sites.png?itok=44Btw5Q5" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="332" height="330" typeof="foaf:Image" /></div></div> </strong></strong></strong></strong></p> <h3><strong>        Paso 6 - Acceder al navegador y accionar el instalador</strong></h3> <p>          De aquí en adelante, no hay nada nuevo, por cada una de las webs que quieras instalar, escribirás en el navegador el dominio correspondiente y a continuación, una vez activado el instalador de Drupal, lo único que tendrás que hacer es clic en siguiente hasta finalizar el proceso y repetir los pasos por cada uno de tus sitios.</p> <p><strong><strong><strong><strong></strong></strong></strong></strong></p> <h2>     Comandos para realizar cambios en tu Multisite Drupal 9</h2> <p>             Como hemos utlizado Composer para descargar todos los archivos necesarios de nuestras instalaciones, además de contar con Drush, como parte de las herramientas que podremos emplear, significa que ambas opciones estarán disponibles para cada uno de nuestros sitios, sólo habrá que tener en cuenta unos pequeños cambios en su ejecución:</p> <p>            Para comprobar los módulos o el núcleo desactualizado</p> <pre> composer outdated drupal/*</pre> <p>          Para ejecutar la actualización de todos los módulos y el core</p> <pre> composer update drupal/*</pre> <p>          Para descargar módulos</p> <pre> composer require drupal/MIMODULO</pre> <p>          Para activarlo en un sitio específico</p> <pre> drush en drupal/MIMODULO --uri=sitio1.midominio.com</pre> <p>          Para borrar la caché de un sitio específico</p> <pre> drush cr --uri=sitio1.midominio.com</pre> <p>          Para actualizar la base de datos en un sitio específico</p> <pre> drush updb --uri=sitio1.midominio.com</pre> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-categoria-post field--type-entity-reference field--label-above"> <div class="field__label">Categoría</div> <div class="field__items"> <div class="field__item"><a href="/categoria/multisite" hreflang="es">multisite</a></div> <div class="field__item"><a href="/categoria/multisitio" hreflang="es">multisitio</a></div> <div class="field__item"><a href="/categoria/administracion" hreflang="es">administración</a></div> <div class="field__item"><a href="/categoria/usuarios" hreflang="es">usuarios</a></div> <div class="field__item"><a href="/categoria/interfaz" hreflang="es">interfaz</a></div> </div> </div> Tue, 07 Mar 2023 09:52:37 +0000 webmaster 236 at https://drupaladicto.com Field Group https://drupaladicto.com/curso/field-group <span class="field field--name-title field--type-string field--label-hidden">Field Group</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Lun, 06/03/2023 - 22:58</span> <div class="field field--name-field-contenidos-post field--type-entity-reference-revisions field--label-visually_hidden"> <div class="field__label visually-hidden">Contenidos</div> <div class="field__items"> <div class="field__item"> <style>#video-only-1068 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-1068 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-1068 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-1068"> <section id="video-only-1068" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/custom-module.jpg?itok=5PSIHo9t" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-752-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-752-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-752-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/TtyN0bFQqVQ&amp;max_width=0&amp;max_height=0&amp;hash=SZmXlikuXdH02sJBXkz3r1HKBtSdcRaoOuwzIpP_V4w" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-752-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--text-only paragraph--view-mode--default" id="txonly-1111" style="background-color: ;border: solid 2px;border-color: #096ba0;border-radius: 5px;padding: 10px;"> <div class="clearfix text-formatted field field--name-to-text field--type-text-long field--label-visually_hidden"> <div class="field__label visually-hidden">Texto</div> <div class="field__item"><p>      En varias ocasiones, nos encontraremos, con la necesidad de añadir un aspecto más funcional y amigable, para nuestros formularios y/o contenidos; si por ejemplo, nuestro formulario de creación, de un contenido específico, cuenta con un gran número de campos u opciones para su configuración, poder incluirlas dentro de pestañas, acordiones o tabs, suele aportar un cambio crucial, en la mayoría de los casos.</p> <p>     El módulo Fied Group, de Drupal, no permitirá realizar muy fácilmente, estos cambios, utilizando la interfaz de usuario, con un mínimo de esfuerzo para lograr el objetivo esperado.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 71.51%;" data-ratio="71.51" data-b-token="b-849b1207258" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="05e08067-631a-45cb-b1e8-228bcf90dbfe" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/fieldgroup_drupal.png?itok=Z3Mn_IZq" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1095" height="783" typeof="foaf:Image" /></div></div> <h3> Descarga y Activación:</h3> <p>Para descargar y activar cualquier módulo de Drupal tienes varias opciones:</p> <p><strong>     Descarga:</strong><br /><br />           1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:</p> <pre> composer require drupal/field_group</pre> <p>          2.- Descargándolo manualmente el módulo desde la página oficial del <a href="https://www.drupal.org/project/field_group">Módulo Field Group</a> y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.</p> <p>     <strong>Activación:</strong></p> <p>          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente</p> <pre> drush en field_group -y</pre> <p>          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 109.74%;" data-ratio="109.74" data-b-token="b-473235ed5d4" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="0ea30562-15ef-4b5f-b244-af74cc669328" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/fieldgroup_interfaz.png?itok=YJgJ1fId" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="462" height="507" typeof="foaf:Image" /></div></div> <h2>     Cómo agrupar elementos utilizando el módulo Field Group</h2> <p>          Es importante entender que este módulo, en realidad crea un "contenedor" o grupo, al que añade la etiqueta html correspondiente, por ejemplo Vertical Tabs o Pestañas verticales, y a continuación, si queremos dividir los elementos en varias pestañas, tendremos que añadir un segundo "contenedor", equivalente a la cantidad de pestañas que esperamos utilizar.</p> <p>          Para poder comenzar a definir nuestras estructuras de campos, con este módulo, una vez lo hayamos instalado, nos iremos al menú estructura/tipo de contenido y nos cololaremos en la pestaña del contenido que vamos a modificar. Por ejemplo, si lo que queremos añadir son pestañas dentro del formulario de creación de un contenido, entonces, nos colocaremos dentro de la pestaña que permite modificar el formulario.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 70.56%;" data-ratio="70.56" data-b-token="b-c2205facadb" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="636a7027-5c90-4d68-900f-af2c50cc83ca" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/fieldgroup_formulario.png?itok=w_EDnexW" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="445" height="314" typeof="foaf:Image" /></div></div> <p>      Por el contrario, si queremos que los cambios se apliquen, al visualizar nuestro tipo de contenido, tendremos que colocarnos en la pestaña que permite modificar su presentación.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 64.94%;" data-ratio="64.94" data-b-token="b-d14f14ee4d5" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="4711e041-23aa-4e1a-9d05-3ea144168db7" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/fielgroup_presentacion.png?itok=qiZzXzeQ" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="445" height="289" typeof="foaf:Image" /></div></div> <p>     Una vez tengamos claros los campos que esperamos agrupar, procedremos a elegir la opción que se adapte mejor a nuestras necesidades. En el siguiente ejercicio vamos a dividir en diferentes zonas el formulario de creación del tipo de contenido Artículo, que nos viene por defecto al instalar Drupal.</p> <ul><li><strong>Paso 1</strong> : Hacer clic en el botón Add Field Group, para que nos permita seleccionar la opción que vamos a utilizar en el Elemento Padre o Contenedor principal.<br />  </li> <li><strong>Paso 2</strong> : Selecionamos el tipo de grupo que vamos a utilizar.<br />  </li> <li><strong>Paso 3</strong> : Definimos el efecto de animación para cuando hagamos clic sobre el elemento, también podremos agregar un ID o clases para aplicar usando css.<br />  </li> <li><strong>Paso 4</strong> : Hacer clic en el botón Crear grupo. </li> </ul><p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 167.57%;" data-ratio="167.57" data-b-token="b-bc453aed0e0" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="11028703-0c5e-4d49-ae91-52fed06508e5" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/creacion_fielgroup_padre.png?itok=_Ci3fmTc" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="478" height="801" typeof="foaf:Image" /></div></div> <p>     Por defecto, una vez creado el elemento con Field Group, aparecerá en la parte inferior, con los desactivados, para que podamos pasar al siguiente elemento o activarlo cuando estemos preparados.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 53.21%;" data-ratio="53.21" data-b-token="b-7e0e88c40ce" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="db24f101-5f18-4e9e-89ae-de3a1b3b14c9" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/acordion_desactivado.png?itok=iis6Q__w" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="280" height="149" typeof="foaf:Image" /></div></div> <p>     En el caso de la creación de los elementos "Hijos" del contenedor principal, el proceso es casi el mismo, con la diferencia de que seleccionaremos otro tipo de grupo, que puede variar según la opción elegida para el elemento padre. Por ejemplo, si el "Padre" es del tipo<strong> Accordion</strong>, los "hijos" deberán ser del tipo <strong>Accordion item</strong></p> <p> </p> <ul><li><strong>Paso 1</strong> : Hacer clic en el botón Add Field Group, para que nos permita seleccionar la opción que vamos a utilizar en el Elemento Hijo o Contenedor secundario.<br />  </li> <li><strong>Paso 2</strong> : Selecionamos el tipo de grupo que vamos a utilizar, dependerá del elemento que se haya seleccionado como padre.<br />  </li> <li><strong>Paso 3</strong> : Definimos si el elemento aparecerá cerrado o abierto por defecto, también podremos agregar un ID o clases para aplicar usando css.<br />  </li> <li><strong>Paso 4</strong> : Hacer clic en el botón Crear grupo. </li> </ul><p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 167.57%;" data-ratio="167.57" data-b-token="b-dfe986777de" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="b14ff1ef-1391-48ef-8333-de6baf3e048a" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/fieldgroup_hijos.png?itok=jeMmhtlE" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="478" height="801" typeof="foaf:Image" /></div></div> <p>     Para finalizar, arrastraremos los elementos en la posición correspondiente, para que se muestre cada uno dentro del otro, si queremos varias pestañas dentro de un elemento padre, bastará con añadir tantos Items del tipo hijo, como pestañas necesarias.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 98.65%;" data-ratio="98.65" data-b-token="b-06cfdaab046" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="dd97aa99-1aef-4fa1-b3fb-01db51e0fde4" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/elementos_fieldgroup.png?itok=geWcS-38" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="297" height="293" typeof="foaf:Image" /></div></div> <p>     Si abrimos el formulario de creación del contenido, deberíamos ver algo parecido a la siguiente imagen.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 109.94%;" data-ratio="109.94" data-b-token="b-a2cdd4a7f6b" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="d1604329-e35e-4f49-85e7-c43ff33cd620" alt="Field Group Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/inline-images/desplegar_fieldgroup.png?itok=TkzoBLSu" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="473" height="520" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-categoria-top field--type-entity-reference field--label-above"> <div class="field__label">Categoria</div> <div class="field__items"> <div class="field__item"><a href="/categoria/campos" hreflang="es">campos</a></div> <div class="field__item"><a href="/categoria/campos-referenciados" hreflang="es">campos referenciados</a></div> <div class="field__item"><a href="/categoria/forms" hreflang="es">forms</a></div> <div class="field__item"><a href="/categoria/formularios" hreflang="es">formularios</a></div> <div class="field__item"><a href="/categoria/interfaz" hreflang="es">interfaz</a></div> <div class="field__item"><a href="/categoria/drupal-7" hreflang="es">drupal 7</a></div> <div class="field__item"><a href="/categoria/drupal-8" hreflang="es">drupal 8</a></div> <div class="field__item"><a href="/categoria/drupal-9" hreflang="es">drupal 9</a></div> <div class="field__item"><a href="/categoria/administracion" hreflang="es">administración</a></div> <div class="field__item"><a href="/categoria/configuraciones" hreflang="es">configuraciones</a></div> <div class="field__item"><a href="/categoria/fields" hreflang="es">fields</a></div> <div class="field__item"><a href="/categoria/sitebuilder" hreflang="es">sitebuilder</a></div> </div> </div> Mon, 06 Mar 2023 21:58:49 +0000 webmaster 207 at https://drupaladicto.com