Jump to content

Fazer modificações num modelo Bootstrap


jcvilanova

Postagens Recomendadas

Pessoal, peguei como exemplo o código de um modelo bootstrap do tipo bolg e não estou conseguindo inserir minhas imagens no modelo, gostaria de saber como inserir. O código que peguei na página oficial do bootstrap é: 

<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
      <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
    </div>
  </div>

  <div class="row mb-2">
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">World</strong>
          <h3 class="mb-0">Featured post</h3>
          <div class="mb-1 text-muted">Nov 12</div>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="stretched-link">Continue reading</a>
        </div>
        <div class="col-auto d-none d-lg-block">
          <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-success">Design</strong>
          <h3 class="mb-0">Post title</h3>
          <div class="mb-1 text-muted">Nov 11</div>
          <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="stretched-link">Continue reading</a>
        </div>
        <div class="col-auto d-none d-lg-block">
          <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

        </div>
      </div>
    </div>
  </div>

Eu gostaria de colocar imagens referentes a cada categoria de post que criei, mas quando tento não fica legal. 

 

Gostaria que a imagem tomasse todo esse espaço em cinza em cada uma das divs. Como faço isso ?

Link to comment
Compartilhe em outros sites

Olá @jcvilanova, eu testei o seguinte:

<div class="col-auto d-none d-lg-block">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShUHmXGs_QS7cxErfyKqp_rqaGyrC5tQGWgQ&usqp=CAU"
                class="bd-placeholder-img"
                width="200"
                height="250"
              />
              <!--
              <svg
                class="bd-placeholder-img"
                width="200"
                height="250"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMidYMid slice"
                focusable="false"
                role="img"
                aria-label="Placeholder: Thumbnail"
              >
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#55595c" />
                <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
							</svg>
						-->
            </div>

Peguei uma imagem qualquer na internet, simples e inseri uma tag img com as mesmas width, height e class do objeto svg . Comente ( exclua) o trecho que comentei.  Fiz apenas esse teste e resolveu.  Espero que ajude.  

 

 

  • Curtir 1
Link to comment
Compartilhe em outros sites

49 minutos atrás, AUREO SOUTO disse:

Olá @jcvilanova, eu testei o seguinte:

<div class="col-auto d-none d-lg-block">
              <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShUHmXGs_QS7cxErfyKqp_rqaGyrC5tQGWgQ&usqp=CAU"
                class="bd-placeholder-img"
                width="200"
                height="250"
              />
              <!--
              <svg
                class="bd-placeholder-img"
                width="200"
                height="250"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMidYMid slice"
                focusable="false"
                role="img"
                aria-label="Placeholder: Thumbnail"
              >
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#55595c" />
                <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
							</svg>
						-->
            </div>

Peguei uma imagem qualquer na internet, simples e inseri uma tag img com as mesmas width, height e class do objeto svg . Comente ( exclua) o trecho que comentei.  Fiz apenas esse teste e resolveu.  Espero que ajude.  

 

 

 

Editado por jcvilanova
ERREI
Link to comment
Compartilhe em outros sites

Amigo, fiz exatamente como voce fez e numa parte até que deu certo, porem no outro bloco a imagem nao ficou como eu gostaria. 

o original do Bootstrap é esse da primeira imagem, já o que fiz a modificação ficou como está nessa segunda imagem,  veja que toda a parte do texto fica fora da imagem e não sobreposto a imagem. Outra coisa, a imagem nao ocupou toda a area da Div. Entao o que eu gostaria, que a imagem tomasse toda a div e que os textos ficassem por sobre a imagem. Alguem pode me ajudar com isso ?

Esse é o código do Bootstrap: 

<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
      <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
    </div>
  </div>

Eu apenas inseri ai a tag contendo a imagem. veja, 

<img class="card-img" src="assets/imagens/artigo/'imagem>" width="0" height="250">

, mas infelizmente nao ficou como eu queria

 

obs: quanto a dica que voce me deu, ficou perfeito, veja na terceira imagem. 

 

Title of longer.PNG

Title longer 2.PNG

thumbnail.PNG

Link to comment
Compartilhe em outros sites

As imagens dos artigos estão no caminho celke\assets\imagens\artigo, por isso coloquei: 

 <div class="p-4 text-black" style="background-image: src='assets/imagens/artigo/artigo.jpg''">,  e mesmo colocando a imagem que voce usou da internet nada apareceu. Não entendi 

Link to comment
Compartilhe em outros sites

o que ta me impressionando é que colei o código que voce postou e escolhi otras imagens de internet e mesmo assim imagem nenhuma é carregada, veja 

<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/003.webp');">
      
                <div class="col-md-6 px-0">
                  <h1 class="display-4 font-italic">
                    Title of a longer featured blog post
                  </h1>
                  <p class="lead my-3">
                    Multiple lines of text that form the lede, informing new readers
                    quickly and efficiently about what’s most interesting in this post’s
                    contents.
                  </p>
                  <p class="lead mb-0">
                    <a href="#" class="text-white font-weight-bold"
                      >Continue reading...</a
                    >
                  </p>
                </div>
        </div>

olha só a que fiz anteriormente e logo em seguida a que contem o código que voce mostrou

 

 

aaaaaaaaa.PNG

Link to comment
Compartilhe em outros sites

@jcvilanova percebi que erro na sintaxe pois src faz parte da tag img do HTML, enquanto o que tem dentro de style são propriedades de CSS (estilo da página).

seu texto a partir do atributo style :

style="background-image: src='assets/imagens/artigo/artigo.jpg''"       

o correto (entenda, como eu uso) :

style="background-image: url('./assets/banner.jpeg');" 

 

Link to comment
Compartilhe em outros sites

Amigo, surgiu uma outra dúvida aqui. Veja bem, meu projeto esta estruturado com as pastas site, adm, controllers, models, views e assets. Essa ultima eu coloquei a pasta imagem. Ocorre que peguei um exemplo de blog na net e comecei a estruturar algo pareceido. Neste exemplo tem a tabela de artigos, entre outros, e nela o campo imagem_artigo. Pois bem, o cara criou dentro da pasta imagens uma subpasta artigo e nela outras pastas numeradas de 1 a 6, e dentro de cada uma delas ele colocou uma imagem jpg, ocorre que é a mesma imagem, artigo.jpg. Olhei no banco de dados e todos os artigos tem a mesma imagem artigo.jpg. Como quero que minha view home mostre os artigos por categoria, preciso que cada uma delas tenha sua propria imagem e não que todas tenham uma só, como está no projeto do cara. Daí eu fiz o teste, peguei um determinado registro e salvei nele outra imagem e coloquei na pasta assest\imagem\artigo\3, só que ao abrir a home do projeto vi que a imagem nao estava carregando. Mudei a imagem para todas as outras pastas numeradas e mesmo assim a imagem nao é carregada. Dái eu posso dizer que nao entendi essa lógica dele, já que para mim nao faz sentido que seja apenas a mesma imagem para todos os posts, concorda ? 

Estou querendo ajuda para resolver esse problema. 

 

obs: estruturei o código com html e php para pegar os dados de cada artigo conforme seu código e categoria. Está tudo funcinando direitinho, exceto essa coisa da imagem que não entendi ainda o que ele fez e nem sem resolver. 

 

Voce acha que pode me ajudar ?

Link to comment
Compartilhe em outros sites

@jcvilanova fica complicado acompanhar assim. Não sei se poderia, na intenção de ajudar, mande-me por e-mail o projeto compactado, pra que eu possa ajudar.    akamus.souto@gmail.com.

Bem provável que esteja alterando a imagem conforme o ID do artigo. Assim não tem problema terem o mesmo nome, mas caminhos diferentes.

Vamos supor que a imagem seja assim:

<img src = "./assets/imagens/artigo/<?= $id ?>/artigo.jpg" />  

 

neste caso, recebendo dinamicamente via PHP o id do artigo, armazenado na tabela de dados,  que corresponde exatamente ao número que é o nome da pasta onde está a imagem artigo.jpg.

 

 

Link to comment
Compartilhe em outros sites

Se voce puder, quero que me explique porque as imagens tem que ficar em diretorios diferentes, e como o sistema está fazendo a busca e diferenciando já que todas tem o mesmo nome. Ficou confuso para mim.

Enviei para o teu emai. meu email é masters.jc@hotmail.com

 

Link to comment
Compartilhe em outros sites

as imagens não tem que ficar obrigatoriamente em diretórios diferentes. Foi decidido para ser estruturado dessa forma. Acredito que seja exatamente pra facilitar buscar a imagem através do ID do artigo para assim formar o caminho da imagem.

Por exemplo:

  • O artigo chamado foi o artigo 2 ( ID 2 na armazenado no tabela).
  • Normalmente faz-se o controle através de rotas como  www.site.com.br/artigos/2 
  • Esse numero 2 no final da link é recebido pelo sistema como o número do artigo .
  • O sistema recebe o ID, e passa para a view (HTML) , onde completará o caminho da imagem, neste caso ficará  <img src = "./assets/imagens/artigo/2/artigo.jpg" /> 

 

Link to comment
Compartilhe em outros sites

Preciso te dizer uma coisa, o projeto original tem a pagina Home como exemplo, eu criei a pagina newsletters para poder fazer meus testes com um pouco mais de funcionalidades. Originalmente a Model onde estão os métodos de busca é a StsArtHome, mas lá so havia dois métodos que listavam os artigos plo código. Dái, como eu quero ter algo mais diversificado, onde terei artigos de esportes, politica, saude etc, eu coloquei na tabela artigos o campo STS_CATS_ARTIGO, para relacionar os artigos com a tabela categorias. Entao, criei varios metodos para buscar os artigos conforme a categoria. Mas...ao invés de testar na pagina Home do projeto, que é a original eu estou testando na Newsletters. 

Link to comment
Compartilhe em outros sites

---- Esse numero 2 no final da link é recebido pelo sistema como o número do artigo .

O sistema recebe o ID, e passa para a view (HTML) , onde completará o caminho da imagem, neste caso ficará  <img src = "./assets/imagens/artigo/2/artigo.jpg" /> ---

 

em relação a isso, o artigo que estou buscando tem ID de categoria 12, enocultura, mas o ID do artigo é 3. Estou um pouco confuso. Entendi em partes o que disse. Não seria mais facil eu colocar todas as imagens em uma só pasta ? E quando eu tiver 500 artigos ? Terei que ter 500 pastas ? isso que nao to entendendo

de uma olhadinha no BD e voce verá

Link to comment
Compartilhe em outros sites

36 minutos atrás, jcvilanova disse:

Se voce puder, quero que me explique porque as imagens tem que ficar em diretorios diferentes, e como o sistema está fazendo a busca e diferenciando já que todas tem o mesmo nome. Ficou confuso para mim.

Enviei para o teu emai. meu email é masters.jc@hotmail.com

 

Não chegou.

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
  • Quem está online   0 Membros, 0 Anônimos, 4 Visitantes (Ver lista completa)

    • There are no registered users currently online


×
×
  • Create New...