Fazer modificações num modelo Bootstrap

[jcvilanova]

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 ?

[AUREO SOUTO]

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.  

 

 

[jcvilanova]

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 Abril 20, 2022 por jcvilanova
ERREI

[jcvilanova]

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. 

 

[AUREO SOUTO]

@jcvilanova fiz dessa forma, inserindo atributo style da div :

<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');" >

 ficando assim:

 

 fonte : site.   

Se quiser ver o exemplo todo que fiz aqui

[jcvilanova]

Show de bola. Obrigado 

[jcvilanova]

Não sei o que está acontecendo mas no meu projeto a imagem nao esta aparecendo

[jcvilanova]

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 

[jcvilanova]

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

 

 

[jcvilanova]

Veja que a de baixo, embora contenha o mesmo código que voce postou parece nao encontrar a imagem no endereço especificado, daí, para testar, comecei a pegar outras imagens na internet mas nenhuma delas foi carregada

[AUREO SOUTO]

@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');" 

 

[jcvilanova]

Agora deu certo. Obrigado irmão

[jcvilanova]

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 ?

[AUREO SOUTO]

@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.

 

 

[jcvilanova]

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

 

[AUREO SOUTO]

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" /> 

 

[jcvilanova]

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. 

[jcvilanova]

---- 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á

[AUREO SOUTO]

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.

[jcvilanova]

dá uma outra olhada. acabei de confirmar aqui

[AUREO SOUTO]

29 minutos atrás, jcvilanova disse:

dá uma outra olhada. acabei de confirmar aqui

Não chegou.

[jcvilanova]

por algum motivo teu provedor rejeitou o email, mas acabei de reenviar

[jcvilanova]

Rejeitou novamente. estranho 

[jcvilanova]

Cara, estou tentando enviar pelo gmail e tambem nao está indo, o gmail bloqueia quando tento anexar

[jcvilanova]

enviei pelo google drive, veja se chegou por favor