Crear un elemento css que incluya la imagen elegida, centrada y dentro de un div al 100% de anchura

[gbeltran]

Para crear un elemento CSS que incluya una imagen dentro de un `div` que ocupe el 100% del ancho y esté alineado al centro, sigue estos pasos:

1. HTML: Crea un `div` que contenga la imagen.
2. CSS: Establece estilos para que el `div` ocupe el 100% del ancho y centre la imagen.

Un ejemplo:

- HTML

Código: Seleccionar todo

<div class="image-container">
    <img src="ruta/a/tu-imagen.jpg" alt="Descripción de la imagen">
</div>

- CSS

Código: Seleccionar todo

.image-container {
    width: 100%; /* Ocupa el 100% del ancho */
    display: flex; /* Utiliza flexbox para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente (opcional) */
    height: 100vh; /* Altura del contenedor (opcional) */
}

.image-container img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

Explicación:
- El `div` con la clase `image-container` ocupa el 100% del ancho de su contenedor padre.
- Se utiliza `display: flex` para aplicar flexbox, lo que permite centrar la imagen tanto horizontal como verticalmente.
- La imagen se ajusta para que no exceda el ancho del contenedor, manteniendo su proporción original.

Asegúrate de reemplazar `"ruta/a/tu-imagen.jpg"` con la ruta real de la imagen que deseas mostrar.

[gbeltran]

NOTA: Por hacer, probar y revisar

Probar con un plugin para ClassicPress que automatice el proceso (en DEV Puntocomunica)

Paso 1: Crear la estructura del plugin

Crea una carpeta en el directorio de plugins de ClassicPress, por ejemplo, mi-plugin-imagen.
Dentro de esa carpeta, crea un archivo PHP, por ejemplo, mi-plugin-imagen.php.

Paso 2: Código del plugin

Un ejemplo de código que puedes usar en mi-plugin-imagen.php:

Código: Seleccionar todo

<?php
/*
Plugin Name: Mi Plugin de Imagen
Description: Un plugin para insertar una imagen centrada en un div.
Version: 1.0
Author: Tu Nombre
*/

function mpi_enqueue_scripts() {
    wp_enqueue_style('mpi-style', plugin_dir_url(__FILE__) . 'style.css');
}
add_action('wp_enqueue_scripts', 'mpi_enqueue_scripts');

function mpi_image_selector() {
    ?>
    <div class="mpi-image-selector">
        <h2>Selecciona una imagen</h2>
        <input type="text" id="mpi-image-url" placeholder="URL de la imagen">
        <button id="mpi-insert-image">Insertar Imagen</button>
    </div>
    <script>
        document.getElementById('mpi-insert-image').addEventListener('click', function() {
            var imageUrl = document.getElementById('mpi-image-url').value;
            if (imageUrl) {
                var html = '<div class="image-container"><img src="' + imageUrl + '" alt="Imagen seleccionada"></div>';
                window.send_to_editor(html);
            }
        });
    </script>
    <?php
}

function mpi_add_admin_menu() {
    add_menu_page('Mi Plugin de Imagen', 'Imagen', 'manage_options', 'mi-plugin-imagen', 'mpi_image_selector');
}
add_action('admin_menu', 'mpi_add_admin_menu');

function mpi_add_styles() {
    ?>
    <style>
        .image-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }
    </style>
    <?php
}
add_action('wp_head', 'mpi_add_styles');

Paso 3: Activar el plugin

- Ve al panel de administración de ClassicPress.
- Navega a "Plugins" y activa "Mi Plugin de Imagen".

Explicación del código:

- Enqueue Scripts: Se carga un estilo CSS para el plugin.
- Image Selector: Se crea un formulario simple en el panel de administración donde puedes ingresar la URL de la imagen.
- Insertar Imagen: Al hacer clic en el botón, se genera un div con la imagen centrada y se inserta en el editor de ClassicPress.
- Estilos: Se añaden estilos CSS para centrar la imagen.