Como construir um site de fotos no Drupal, parte 3

Índice:

Anonim

Na parte final desta série, vamos guiá-lo pelos estágios finais de construção de um site de fotografia do zero usando o sistema de gerenciamento de conteúdo (CMS) Drupal.

Os sites criados com um CMS são mais sofisticados do que aqueles que consistem em páginas fixas ou "estáticas" de texto e são essenciais para a exibição de imagens.

Como um CMS de código aberto de propósito geral, o Drupal possui uma grande comunidade de desenvolvedores contribuintes e é popular entre governos, empresas sem fins lucrativos e instituições educacionais.

Construir um site no Drupal envolve mais do que fazê-lo em outros CMSs como o WordPress, por isso atrairá pessoas com conhecimento de informática que gostam da ideia de ir "por trás da cortina" de um site.

A recompensa será um site seguro e feito sob medida, construído em uma plataforma altamente personalizável, onde funcionalidades adicionais são concedidas por meio da instalação de módulos (recursos extras) e temas (que determinam a aparência).

Para chegar a este ponto, iniciamos a construção de nosso site em um ambiente local, usando o host local Acquia Dev Desktop.

Comece baixando o Acquia Dev Desktop e executando o instalador, a seguir inicie o software e selecione Start From Scratch.

Use o padrão sugerido para localizar os arquivos de base de código em seu sistema, insira o nome do seu site e aceite os prompts padrão para a versão do PHP e o nome do banco de dados. Escolha v8.9.1 em Instalar uma distribuição Drupal, insira todas as informações necessárias e o Drupal será instalado.

Em seguida, instale o módulo Media Gallery e o tema Showcase Lite. Em seguida, comece a criar suas galerias …

O que você precisa para construir um site de fotos no Drupal

  • Computador
  • Acesso à internet
  • Imagens prontas para upload
  • Aplicativo de desenvolvimento (estamos usando Acquia Dev Desktop)
  • Tempo: 1 semana (build)

Os três estágios de desenvolvimento de um site Drupal

1. Comece configurando seu nome de domínio

Ao contrário do wordpress.com, o Drupal não oferece uma opção de hospedagem, então você precisará fazer esses arranjos sozinho.

Antes de começar, você também precisará adquirir um nome de domínio para o seu site - visite Domain.com, Bluehost ou www.123-reg.co.uk, ou pesquise um fornecedor online.

Insira o nome do site desejado e você obterá uma lista de extensões disponíveis (.com, .co.uk, etc) e taxas de registro.

2. Desenvolva seu site Drupal em seu próprio computador

Você pode instalar o Drupal em um site de hospedagem na web e construí-lo lá, mas desenvolver seu site em um host local (seu próprio computador) torna as coisas muito mais fáceis. Você pode construir o site em seu próprio ritmo, corrigindo quaisquer empecilhos que surgirem e refinar a aparência à medida que avança.

3. Implante o site concluído em seu provedor de hospedagem

Quando o seu site estiver pronto, você pode implantá-lo no seu provedor de hospedagem. Transferir os arquivos para o site host e definir todas as configurações pode levar até um dia, mas seu site de fotos está pronto para sua grande revelação.

Crie um site de fotos do Drupal em 10 etapas

Usando o ambiente local Acquia Dev Desktop, continuamos desenvolvendo nosso
site antes do teste e posterior implantação em uma plataforma de hospedagem de site …

01 Criar links de menu para as galerias

Depois de criar algumas galerias, nós as vinculamos à navegação principal para que os visitantes do site possam navegar por elas facilmente. Na área Admin, clicamos em Estrutura, Navegação Principal e Menu Editar.

Inserimos um título para o link do menu e digitamos ‘/ media_gallery / 1’ no campo Link, repetindo essa etapa para as outras galerias, substituindo ‘/ 1’ por ‘/ 2’, ‘/ 3’ e assim por diante.

02 Melhorando a exibição de imagens

Nossas galerias se beneficiariam de uma ‘lightbox’ para exibir as fotos. Selecionar uma imagem abriria uma sobreposição pop-up, na qual podemos clicar para ver todas as imagens exibidas na galeria.

Colorbox é um plug-in lightbox popular que funcionou com várias versões do Drupal, por isso está bem estabelecido e é mantido ativamente.

Você pode encontrar sua página aqui - dê uma olhada na descrição do plug-in para ver o que ele pode fazer.

03 Baixe o módulo Colorbox

Você notará pela descrição que existem dois elementos distintos no Colorbox - um módulo e um plug-in - e o plug-in é um download separado.

Vamos começar com o módulo. Role até a parte inferior da página e localize a versão Drupal 8 (é a primeira das duas caixas verdes), passe o mouse sobre o link tar.gz, clique com o botão direito e selecione Copiar endereço do link.

De volta à área de administração do site, clique na guia Extend, clique em Install New Module, cole o URL e clique em Install.

04 Baixe o plug-in Colorbox

Retorne à página de download do Colorbox; imediatamente em Dependências, clique no link Colorbox Plugin 1.x. Isso salvará um arquivo compactado no local indicado em seu computador para download.

Agora você precisa criar um diretório em seu sistema para os arquivos de plug-in do Colorbox. De acordo com as instruções na página de download do Colorbox, crie um diretório de forma que o caminho para os arquivos se torne (nome do site) / libraries / colorbox / e, em seguida, descompacte o arquivo nesse local.

05 Coloque os arquivos de plug-in descompactados

Com o arquivo descompactado, você deve ser capaz de ver 14 arquivos no diretório, incluindo o importantíssimo arquivo jquery.colorbox-min.js JavaScript.

Se sua pasta exibir algo diferente, verifique se você está procurando no lugar certo - a pasta (nome do site) / modules / colorbox apresenta uma sintaxe muito semelhante. (Esta pasta deve conter 22 arquivos, incluindo oito subpastas - veja a inserção, acima.)

06 Habilite o módulo Colorbox

Já tendo instalado o módulo Colorbox, agora precisamos habilitá-lo. (Este processo não é automático.) Volte para a área de administração do seu site e clique na guia Estender.

Role para baixo dois terços da página; na seção Mídia, marque à esquerda do Colorbox. Bem na parte inferior da página, clique em Instalar.

Vá para Relatórios e execute um relatório de status: se o Colorbox não estiver listado em Erros encontrados, então está tudo bem.

07 Confira o efeito de nossa nova lightbox

Agora vamos ver a diferença que ter uma lightbox de imagem fez. Clique em Voltar ao site no canto superior esquerdo da tela e acesse uma das galerias que você adicionou à navegação principal.

Clique em uma imagem e ela será aberta em uma sobreposição pop-up. Um par de botões no canto inferior esquerdo permite que você navegue pelas imagens na galeria, enquanto um X no canto inferior direito fecha o pop-up - tudo está funcionando bem.

08 Revise as informações da legenda da imagem

Outro recurso do Colorbox é a capacidade de exibir uma legenda para as imagens, que aparece na parte inferior da imagem visualizada quando você passa o mouse sobre ela.

No momento, ele está usando o texto alternativo (uma breve descrição usada por leitores de tela ou quando uma imagem não carrega) que inserimos para cada foto durante o upload dos arquivos de imagem. Para alterar qualquer legenda, abra o arquivo de imagem no menu Conteúdo / Arquivos.

09 Adicione algumas outras páginas importantes ao site

Com a exibição de imagens parecendo melhor agora, podemos começar a construir o site e adicionar alguns outros elementos-chave. Primeiro, vamos criar uma página Sobre para descrever os serviços fotográficos que oferecemos.

Clique na guia Conteúdo, clique em Adicionar Conteúdo e selecione Página Básica. Insira o texto desejado mais uma imagem embutida cortada em um tamanho apropriado. (Usamos 200 x 200 pixels.) Outras páginas a serem construídas incluem a página de boas-vindas.

10 Avalie o progresso e adicione outros elementos

Portanto, agora temos um site de fotografia em pleno funcionamento, organizado em uma série de galerias que exibem as imagens em uma sobreposição pop-up com informações de legenda.

É um bom começo, mas é apenas o começo. Outros elementos do site que você pode pensar em adicionar incluem postagens de blog regulares, para abrir uma conversa com os visitantes do seu site - e esta é outra função que o Drupal suporta desde o início.

Etapas finais: implantar seu site local na rede

Então você concluiu sua construção e corrigiu algumas arestas testando-o totalmente - agora é hora de implantar seu site na Internet e revelá-lo para um público global. É assim que se faz …

1. Encontre um provedor de serviços de hospedagem

Depois que seu site estiver totalmente construído e testado e quaisquer bugs ou empecilhos forem eliminados, ele estará pronto para ser lançado para um público global.

O primeiro passo é encontrar um provedor de hospedagem. Certifique-se de que seu provedor de hospedagem oferece suporte a PHP e MySQL, ambos exigidos pelo Drupal.

2. Baixe um cliente FTP para o seu computador

O protocolo de transferência de arquivos (FTP) é o meio pelo qual você carrega os arquivos do seu site local para o seu provedor de hospedagem na web. Um dos clientes FTP mais populares é o FileZilla, que funciona tanto no Windows quanto no macOS. Você pode encontrar o FileZilla aqui.

3. Carregue os arquivos usando o Painel de Controle

Seu provedor lhe dará acesso a um painel de controle, para gerenciamento de site completo - cPanel é uma opção popular. Siga as instruções do seu provedor para implantação, mas esteja ciente de que a transferência de arquivos e a configuração das configurações podem levar até um dia inteiro.

é a revista de fotografia favorita do mundo. Cada edição é embalada com as últimas notícias, análises, tutoriais, conselhos de compra de especialistas, dicas e imagens inspiradoras. Além disso, cada edição vem com uma seleção de presentes bônus do interesse de fotógrafos de todas as habilidades. Ver oferta

Melhores sites de hospedagem de sites para fotógrafos: coloque seu portfólio online
Melhores opções de armazenamento em nuvem gratuito para fotógrafos: plataformas e aplicativos
Os melhores cursos de fotografia online - de guias para iniciantes a masterclasses
Melhores construtores de sites para fotógrafos
Melhores gerenciadores de senhas
Melhor laptop de estudante
Melhor software de edição de fotos