Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
GordoSatiro

Subir portada desde PC con theme Flatpost

Recommended Posts

Sería como subir un avatar o una foto desde tu PC, pero para los posts. Es un poco tedioso tener que buscar una imagen en google o tener que subir una foto a Imgur solo para copiar el link y ponerla en el campo de portada, lo mejor sería tener las dos opciones y que el usuario elija si subirla desde su PC o desde la URL.

Share this post


Link to post
Share on other sites

Se puede hacer de 2 maneras:

1 - Se puede subir desde la pc y la almacena en files/portadas, lo cual ocupará espacio en tu servidor y se generan 2 imagenes(240 x 180 || 90 x 70), pero se guardará en la base con una clave y se mostrará así port136952P240X180.jpg Se puede configurar, la clave se generá sola y se le asigna los 2 tamaños predeterminados.

 

2 - Se puede subir desde la pc y la almacena en imgur, solo llevará 2 archivos js(API y Configuración) y 1 tpl! O puedes intentarlo viendo en:

Stack Overflow (Subir imagen imgur)

GitHub (Imgur-upload)

 

Yo la lo habia hecho para un theme que nunca publique porque se me olvido terminarlo, lo tiene al crear post y subir una foto, pero se adapta

Edited by Miguel92

Share this post


Link to post
Share on other sites
hace 6 horas, Miguel92 dijo:

Se puede hacer de 2 maneras:

1 - Se puede subir desde la pc y la almacena en files/portadas, lo cual ocupará espacio en tu servidor y se generan 2 imagenes(240 x 180 || 90 x 70), pero se guardará en la base con una clave y se mostrará así port136952P240X180.jpg Se puede configurar, la clave se generá sola y se le asigna los 2 tamaños predeterminados.

 

2 - Se puede subir desde la pc y la almacena en imgur, solo llevará 2 archivos js(API y Configuración) y 1 tpl! O puedes intentarlo viendo en:

Stack Overflow (Subir imagen imgur)

GitHub (Imgur-upload)

 

Yo la lo habia hecho para un theme que nunca publique porque se me olvido terminarlo, lo tiene al crear post y subir una foto, pero se adapta

jaja osea lo creaste tu? ese es mi forma de hacerlo pero buen intento rufián, nunca he entendi por que se roban los creditos de otros jaja, el unico que lo pudo hacer fui yo y describiendole como funciona no le resuelves la duda, minimo explicale como robarse el modulo para adaptarlo a cualquier tema, y si fueras el verdadero crear de ese modulo sabrias que no existe limite alguno en los tamaños o resoluciones incluso se pueden optimizar las imagenes jaja pero le la volaste haciendote el que lo creo en un tema y que nunca publicaste jaja vaya rata que eres solo porque le quitaste la palabra toup por port ya dices que tu lo creaste incluso le das la misma ruta que yo cree jaja ni eso supiste cambiar para despitar jaja osea le describes mi ruta de almacenamiento y mi  formato de clave automatica para le nombre de la portada jaja pero bueno si es verdad que tu lo "creaste" anteriormente para tu mitico tema que no publicaste andale pasale el modulo por separado jaja ni eso debes  hacer.

 

/files/portadas/toup33862P240X180.jpg

 

 

 

@GordoSatiro la idea no es nueva y si no ves el modulo publicado a quie en el sitio es porque nadie lo sabe hacer aparte de mi, y hay de dos opciones lo puedes sacar de mi tema v5 publicado sin mi persmiso en este sitio o te lo pedo instalar en tu tema obviamente con un costo yo no lo hago gratis pero eso ya es aleccion tuyo, saludos.

 

 

Edited by Muerte
  • Downvote 1

Share this post


Link to post
Share on other sites

Nu

hace 2 horas, Muerte dijo:

jaja osea lo creaste tu? ese es mi forma de hacerlo pero buen intento rufián, nunca he entendi por que se roban los creditos de otros jaja, el unico que lo pudo hacer fui yo y describiendole como funciona no le resuelves la duda, minimo explicale como robarse el modulo para adaptarlo a cualquier tema, y si fueras el verdadero crear de ese modulo sabrias que no existe limite alguno en los tamaños o resoluciones incluso se pueden optimizar las imagenes jaja pero le la volaste haciendote el que lo creo en un tema y que nunca publicaste jaja vaya rata que eres solo porque le quitaste la palabra toup por port ya dices que tu lo creaste incluso le das la misma ruta que yo cree jaja ni eso supiste cambiar para despitar jaja osea le describes mi ruta de almacenamiento y mi  formato de clave automatica para le nombre de la portada jaja pero bueno si es verdad que tu lo "creaste" anteriormente para tu mitico tema que no publicaste andale pasale el modulo por separado jaja ni eso debes  hacer.

 

/files/portadas/toup33862P240X180.jpg

 

 

 

@GordoSatiro la idea no es nueva y si no ves el modulo publicado a quie en el sitio es porque nadie lo sabe hacer aparte de mi, y hay de dos opciones lo puedes sacar de mi tema v5 publicado sin mi persmiso en este sitio o te lo pedo instalar en tu tema obviamente con un costo yo no lo hago gratis pero eso ya es aleccion tuyo, saludos.

 

 

NUNCA DIJE QUE LO HICE/CREE YO MISMO, solo le explique que se puede modificar...y se lo puse exactamente como lo tiene la v5 de cual lo he usado anteriormente...


PD: Y siempre he mencionado a la mayoría que soy malisimo en programación, y digo ¿porque crear algo si este ya existe? Solo lo vuelvo a usar

Edited by Miguel92

Share this post


Link to post
Share on other sites

 

Al final lo hice con la librería Imgur haciendo que al subir una imagen lo único que haga es poner el value del input de Portada con el link.

 

Si alguien lo quiere:

 

(Poner en themes/tu-theme/js)

upload.js

var feedback = function(res) {
    if (res.success === true) {
        var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
		$('input[name=imagen]').val(get_link);
    }
};

new Imgur({
    clientid: 'client-id-de-imgur-buscar-en-google-XD',
    callback: feedback
});

imgur.js

/* Imgur Upload Script */
(function (root, factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        root.Imgur = factory();
    }
}(this, function () {
    "use strict";
    var Imgur = function (options) {
        if (!this || !(this instanceof Imgur)) {
            return new Imgur(options);
        }

        if (!options) {
            options = {};
        }

        if (!options.clientid) {
            throw 'Provide a valid Client Id here: https://api.imgur.com/';
        }

        this.clientid = options.clientid;
        this.endpoint = 'https://api.imgur.com/3/image';
        this.callback = options.callback || undefined;
        this.dropzone = document.querySelectorAll('.dropzone');
        this.info = document.querySelectorAll('.info');

        this.run();
    };

    Imgur.prototype = {
        createEls: function (name, props, text) {
            var el = document.createElement(name), p;
            for (p in props) {
                if (props.hasOwnProperty(p)) {
                    el[p] = props[p];
                }
            }
            if (text) {
                el.appendChild(document.createTextNode(text));
            }
            return el;
        },
        insertAfter: function (referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        },
        post: function (path, data, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.open('POST', path, true);
            xhttp.setRequestHeader('Authorization', 'Client-ID ' + this.clientid);
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        var response = '';
                        try {
                            response = JSON.parse(this.responseText);
                        } catch (err) {
                            response = this.responseText;
                        }
                        callback.call(window, response);
                    } else {
                        throw new Error(this.status + " - " + this.statusText);
                    }
                }
            };
            xhttp.send(data);
            xhttp = null;
        },
        createDragZone: function() {
            var p1, p2, input;

                p1 = this.createEls('p', {}, 'Arrastra tus imágenes aquí');
                p2 = this.createEls('p', {}, 'O clickea para seleccionar una');
            input = this.createEls('input', {type: 'file', className: 'input-portada', accept: 'image/*'});

            Array.prototype.forEach.call(this.info, function (zone) {
                zone.appendChild(p1);
                zone.appendChild(p2);
            }.bind(this));
            Array.prototype.forEach.call(this.dropzone, function (zone) {
                zone.appendChild(input);
                this.status(zone);
                this.upload(zone);
            }.bind(this));
        },
        loading: function () {
            var div, table, img;

            div = this.createEls('div', {className: 'loading-modal'});
            table = this.createEls('table', {className: 'loading-table'});
            img = this.createEls('img', {className: 'loading-image', src: 'https://tu-pagina.com/themes/tutheme/css/loading-spin.svg'});

            div.appendChild(table);
            table.appendChild(img);
            document.body.appendChild(div);
        },
        status: function (el) {
            var div = this.createEls('div', {className: 'status'});

            this.insertAfter(el, div);
        },
        matchFiles: function (file, zone) {
            var status = zone.nextSibling;

            if (file.type.match(/image/) && file.type !== 'image/svg+xml') {
                document.body.classList.add('loading');
                status.classList.remove('bg-success', 'bg-danger');
                status.innerHTML = '';

                var fd = new FormData();
                fd.append('image', file);

                this.post(this.endpoint, fd, function (data) {
                    document.body.classList.remove('loading');
                    typeof this.callback === 'function' && this.callback.call(this, data);
                }.bind(this));
            } else {
                status.classList.remove('bg-success');
                status.classList.add('bg-danger');
                status.innerHTML = 'Invalid archive';
            }
        },
        upload: function (zone) {
            var events = ['dragenter', 'dragleave', 'dragover', 'drop'],
                file, target, i, len;

            zone.addEventListener('change', function (e) {
                if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                    target = e.target.files;

                    for (i = 0, len = target.length; i < len; i += 1) {
                        file = target[i];
                        this.matchFiles(file, zone);
                    }
                }
            }.bind(this), false);

            events.map(function (event) {
                zone.addEventListener(event, function (e) {
                    if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                        if (event === 'dragleave' || event === 'drop') {
                            e.target.parentNode.classList.remove('dropzone-dragging');
                        } else {
                            e.target.parentNode.classList.add('dropzone-dragging');
                        }
                    }
                }, false);
            });
        },
        run: function () {
            var loadingModal = document.querySelector('.loading-modal');

            if (!loadingModal) {
                this.loading();
            }
            this.createDragZone();
        }
    };

    return Imgur;
}));

OJO: MODIFICAR REEMPLAZANDO "TU-PAGINA.COM/BLABABLA" CON UNA URL DEL ESTILO: "https://craper.es/themes/Flatpost/css/loading-spin.svg"

img = this.createEls('img', {className: 'loading-image', src: 'https://tu-pagina.com/themes/tutheme/css/loading-spin.svg'});

En templates/modules/m.agregar_form.tpl

Abajo de

{if $tsUser->is_admod || $tsUser->permisos.gopp}

Agregamos

<link href="{$tsConfig.css}/style.css" rel="stylesheet" type="text/css">
					<link href="{$tsConfig.css}/mobile-style.css" rel="stylesheet" type="text/css">

Luego en el mismo archivo, abajo de:

<input type="text" tabindex="2" name="imagen" maxlength="180" size="60" placeholder="Ingrese URL de la imagen como caratula para la home" class="input" value="{$tsDraft.b_portada}" /><hr />

Agregamos

<div class="dropzone">
									<div class="info"></div>
									</div>
									<script type="text/javascript" src="{$tsConfig.js}/imgur.js"></script>
					                <script type="text/javascript" src="{$tsConfig.js}/upload.js"></script>

Luego vamos a tutheme/css/ y agregamos los siguientes archivos

style.css

@charset "UTF-8";

body.loading .loading-modal {
    display: block
}

.title {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.dropzone {
    border: 4px dashed #ccc;
    height: 200px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    max-width: 50%;
}

.info {
    margin-top: 11%;
}

.dropzone p {
    /*height: 100%;*/
    /*line-height: 200px;*/
    margin: 0%;
    text-align: center;
    width: 100%
}

.input-portada {
    height: 100%;
    left: 0;
    outline: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.status {
    border-radius: 5px;
    text-align: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.image-url {
    width: 50%;
}

.dropzone.dropzone-dragging {
    border-color: #000
}

.loading-modal {
    background-color: rgba(255, 255, 255, .8);
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.loading-table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
    margin-bottom: 15%;
}

mobile-style.css

@charset "UTF-8";
/* Mobile view */
@media screen and (min-width: 300px) and (max-width: 700px) {

.dropzone {
    max-width: 80%;
}

.info {
    margin-top: 30%;
}

.status {
    width: 80%;
}

.image-url {
    width: 80%;
}

.loading-table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    margin-bottom: 50%;
}
}

Descargamos loading-spin.svg y lo metemos en tutheme/css/

loading-spin.svg

Edited by GordoSatiro

Share this post


Link to post
Share on other sites

También lo puedes usar así:

img = this.createEls('img', {className: 'loading-image', src: global_data.url + '/themes/tutheme/css/loading-spin.svg'});

O cambiando la ubicación del loading-spin.svg a images

img = this.createEls('img', {className: 'loading-image', src: global_data.img + '/loading-spin.svg'});

Ya que en el main_header.tpl existen algunas variables globales

var global_data={
// {/literal}
	user_key:'{$tsUser->uid}',
	postid:'{$tsPost.post_id}',
	fotoid:'{$tsFoto.foto_id}',
	img:'{$tsConfig.tema.t_url}/',
	url:'{$tsConfig.url}',
	domain:'{$tsConfig.domain}',
    s_title: '{$tsConfig.titulo}',
    s_slogan: '{$tsConfig.slogan}'
// {literal}
};

 

Share this post


Link to post
Share on other sites
hace 1 hora, Miguel92 dijo:

También lo puedes usar así:

img = this.createEls('img', {className: 'loading-image', src: global_data.url + '/themes/tutheme/css/loading-spin.svg'});

O cambiando la ubicación del loading-spin.svg a images

img = this.createEls('img', {className: 'loading-image', src: global_data.img + '/loading-spin.svg'});

Ya que en el main_header.tpl existen algunas variables globales

var global_data={
// {/literal}
	user_key:'{$tsUser->uid}',
	postid:'{$tsPost.post_id}',
	fotoid:'{$tsFoto.foto_id}',
	img:'{$tsConfig.tema.t_url}/',
	url:'{$tsConfig.url}',
	domain:'{$tsConfig.domain}',
    s_title: '{$tsConfig.titulo}',
    s_slogan: '{$tsConfig.slogan}'
// {literal}
};

 

Aún mejor así, muchas gracias!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×