Gerando certificados personalizados para os selos

Gerando certificados personalizados para os selos

A criação de modelo de certificado de selos para impressão passa pela criação de um plugin que implemente o template do certificado, além da habilitação do plugin base da funcionalidade.

Plugin SealModel

O primeiro passo para criar o certificado é habilitar o plugin SealModelTab, que implementa um aba na configuração dos selos para que o administrador escolha um modelo de selo a ser utilizado para impressão dos certificados. Adicione a linha à chave plugins do seu arquivo de configuração:

    'plugins' => [
        . 
        . 
        . 
        'SealModelTab' => ['namespace' => 'SealModelTab' ],
    ]

Este plugin também disponibiliza uma classe abstrata chamada SealModelTab\SealModelTemplatePlugin para implementação de modelos de certificados.

Implementando plugin do certificado

Para implementar o certificado, crie um plugin chamado MeuCertificado que extende a classe SealModelTab\SealModelTemplatePlugin e implementa o método getModelData:

// arquivo MeuCertificado/Plugin.php
<?php
namespace MeuCertificado;

class Plugin extends \SealModelTab\SealModelTemplatePlugin
{
    function __construct($config = []) {
      $config += [
         'logo-site' => 'img/marca-da-org.png'
      ];

      parent::__construct($config);
   }

    function getModelData(){
        return [
            'label'=> 'Meu modelo de certificado',
            'name' => 'MeuCertificado',
            'css' => 'meu-certificado--styles.css',
            'background' => 'meu-certificado--bg.jpg',
            'preview' => 'meu-certificado--preview.png'
        ];
    }
}

o template html do certificado deve estar no arquivo printsealrelation.php na pasta do plugin:

// arquivo MeuCertificado/printsealrelation.php
<?php
$plugin = $app->plugins['MeuCertificado'];
?>
<div id="certificate--meu-certificado">
    <img class="cert-background" src="<?php $view->asset('img/meu-certificado--bg.jpg') ?>"/>
    <p class="certificate-content"><?php echo nl2br($msg) ?></p>
    <div class="footer">
        <div class="entity-url">
            <a href="<?= $relation->owner->singleUrl; ?>" title="<?= $relation->owner->name ?>">
                <?= $relation->owner->singleUrl; ?>
            </a>
        </div>
        <div class="footer-signatures">
            <div class="certificate-seal-owner">
                <p><?php echo $relation->seal->owner->name; ?><br>
                <?php echo $relation->seal->owner->shortDescription; ?></p>
            </div>
            <?php if ($avatar = $relation->seal->avatar): ?>
                <div class="footer-img certificate-seal-avatar">
                    <img src="<?php echo $avatar->url; ?>"
                        alt="<?php echo $relation->seal->name ?>">
                </div>
            <?php endif; ?>
            <div class="footer-img certificate-logo-site">
                <!-- essa imagem pode variar de acordo com o tema, por isso opção na config -->
                <img src="<?php $view->asset($plugin->config['logo-site'], true, true) ?>">
            </div>
        </div>
    </div>
</div>

crie os seguintes arquivos para completar o template do certificado:

  • assets/img/meu-certificado--bg.jpg

  • assets/img/meu-certificado--preview.png

  • assets/css/meu-certificado--styles.css

#certificate--meu-certificado {
    width: 1250px;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
    margin: auto;
}
#certificate--meu-certificado img.cert-background {
    position: absolute;
    z-index: -1;
    width: 1250px;
}
#certificate--meu-certificado p.certificate-content {
    margin: 220px 212px 0 90px;
    font-size: 22px;
    line-height: 2.2rem;
    text-align: justify;
    height: 505px;
}
#certificate--meu-certificado p.certificate-content span.entity-name {
    font-size: 22px;
    font-style: italic;
}
#certificate--meu-certificado .footer {
    width: 100%;
}
#certificate--meu-certificado .footer .entity-url {
    margin-left: 160px;
    margin-top: 95px;
    width: 240px;
    font-size: 13px;
    overflow: visible;
}
#certificate--meu-certificado .footer .footer-signatures {
    width: 730px;
    text-align: center;
    float: right;
    position: absolute;
    margin-top: -20px;
}
#certificate--meu-certificado .footer .footer-signatures div {
    display: inline;
}
#certificate--meu-certificado .footer .footer-signatures div.certificate-seal-owner p {
    margin-bottom: 0px;
    height: 50px;
}
#certificate--meu-certificado .footer div {
    position: relative;
    vertical-align: bottom;
    display: inline-block;
}
#certificate--meu-certificado .footer div.footer-img {
    margin: 0 7px;
}
#certificate--meu-certificado .footer div.footer-img > img {
    height: 82px;
}

com o código do modelo pronto, habilite o plugin:

        'plugins' => [
        . 
        . 
        . 
        'SealModelTab' => ['namespace' => 'SealModelTab' ],
        'MeuCertificado' => [
            'namespace' => 'MeuCertificado',
            'config' => [
                'logo-site' => 'img/logo-secult.png'
            ]
        ],
    ]

Criando um selo

Para testar o certificado criado, deve-se criar um selo preenchendo todos os campos obrigatórios e escolhendo o modelo criado na aba Modelos, lembrando que somente administradores podem criar selos.

Last updated