Xon - SVG Template by Xon

Versiones XF2 compatibles: 2.2

Requisitos adicionales: PHP-7.0+

Xon - Standard Library

Una serie de utilidades de ayuda diseñadas para facilitar el desarrollo de complementos, no tiene ningún cambio directo para el usuario ni tampoco existen opciones para el mismo. ESTA NO ES UNA TRADUCCIÓN, YA QUE ESTE COMPLEMENTO NO TIENE...

ioforos.com

La traducción del complemento que permite almacenar imágenes de tipo SVG (Scalable Vector Graphics) como plantillas echo por Xon.

Generar Plantilla SVG
Dependiendo de la configuración, este complemento requiere soporte de reescritura de URL del servidor web. Esto crea un nuevo archivo svg.php en el directorio raíz de tu instalación de xenforo.

Para generar un enlace a una plantilla SVG (¡La plantilla debe tener .svg al final del nombre!)

PHP:

{{ getSvgUrl('tempate.svg') }}

En Información del tablero (opciones básicas), si se establece "Usar URL amigables completas" (useFriendlyUrls), la URL generada es:

PHP:

/data/svg/<style_id>/<langauge_id>/<style_last_modified>/<templateName.svg>

de lo contrario será:

PHP:

svg.php?svg=<templateName>&s=<style_id>&l=<langauge_id>&d=<style_last_modified>

Renderizar a PNG
La representación de SVG en PNG requiere soporte externo y, según el sistema operativo, esto puede dar lugar a limitaciones extrañas o una representación deficiente.

Compatibilidad con php-imagick
Si se puede evitar, no se recomienda usar Imagick
Nota; algunas distribuciones requieren que se instale libmagickcore-6.q16-3-extra para habilitar la compatibilidad con SVG. Las versiones anteriores de Imagick tienen poca compatibilidad con SVG, además de la mala reputación de seguridad de Imagick.

Soporte de CLI
Esta es una vía de escape genérica para conectar la conversión png arbitraria, usando proc_open en php.

Configurar Render usando la opción proc_open con:

PHP:

<CLI-binary> {destFile} {sourceFile}

{sourceFile} es el SVG de origen escrito como archivo temporal y {destFile} es el archivo PNG de destino como archivo temporal.

Representación condicional de SVG a PNG (para CSS/LESS)
Un ejemplo de CSS condicional para usar png sobre svg para clientes móviles

Less:

.mod_interrupt--svg.mod_interrupt
{
    &--stop
    {
        &:before
        {
          content: url({{ getSvgUrl('sv_bbcode_modinterrupt_stop.svg') }}) !important;
        }
        <xf:if is="$xf.svg.as.png">
        .is-tablet &:before,
        .is-mobile &:before
        {
          content: url({{ getSvgUrlAs('sv_bbcode_modinterrupt_stop.svg', 'png') }}) !important;
        }
        </xf:if>
    }
}

Uso explícito en plantillas;

XML:

<xf:if is="$xf.svg.enabled">
    <xf:if is="$xf.svg.as.png and $xf.mobileDetect and $xf.mobileDetect.isMobile()">
        <img src="{{ getSvgUrlAs('example.svg', 'png') }}"/>
    <xf:else />
        <img src="{{ getSvgUrlAs('example.svg', 'svg') }}"/>
    </xf:if>
<xf:else />
    <i class="fa fa-stop" />
</xf:if>

Integración de enrutamiento de XenForo 2
Si bien se recomiendan las reglas de reescritura del servidor web, este complemento admite la extensión del sistema de enrutamiento de XenForo para proporcionar soporte de configuración cero para plantillas SVG

Configuración de reescritura de URL de Apache (en el archivo .htaccess)
Agrega la regla antes del index.php final;

Código:

RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]

se verá algo así:

Código:

#    If you are having problems with the rewrite rules, remove the "#" from the
    #    line that begins "RewriteBase" below. You will also have to change the path
    #    of the rewrite to reflect the path to your XenForo installation.
    #RewriteBase /xenforo

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
    RewriteRule ^data/svg/([^/]+)/([^/]+)/([^/]+)/([^\.]+\..*)$ svg.php?svg=$4&s=$1&l=$2&d=$3 [B,NC,L,QSA]
    RewriteRule ^.*$ index.php [NC,L]

Xon SVG Template by Xon 2.4.6

Xon - Standard Library

Más recursos de GeorgioGalben

Comparte este recurso