I made a one pager Wordpress page. I am using custom fields to make my page editable. I've created a template.php where I've put all my index.php code in. Everything is working well and I've been able to add image - and text fields. But the latest text field I've been trying to add, is not showing up on my template page when I put it near the end of the page. If I put it in another section on my page it shows up fine, but for some reason it wont get the text string from the custom field when I put it where I want it (as in, the text field is there but there is no text in it).
Thanks in advance for the help!
<div class="section" id="section4">
<div class="col-12 col-md-12 col-lg-12">
<div class="container" id="container_message">
<div class="header">Send me a message!</div>
<div class="subheader">Lets stay in touch</div>
<div class="container" id="container_text">
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/H.png"/></div>
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/E.png"/></div>
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/j.png"/></div>
<div class="contact">
<h1><?php the_field('contact_text'); ?></h1>
</div>
</div>
<!--<button class="button">Send me a message</button>-->
</div>
</div>
</div>
Related
I am generating new cards with PHP code, but they do not listen to the grid of bootstrap 4.
Raw html code works fine and displays them like they should be.
<div class="container-fluid padding">
<div class="row padding">
<?php foreach ($contacts as $contact): ?>
<div class="col-sm-12 col-md-4">
<div class="card">
<?php echo '<img class="card-img-top" src="data:image/png;base64,'.base64_encode( $contact['horse_image'] ).'"/>'; ?>
<div class="card-body">
<h4 class="card-title"><?=$contact['horse_name']?></h4>
<p class="card-text"><?=$contact['short']?></p>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<hr class="my-4">
</div>
This is the code for generated cards from database, it works just fine but bootstrap is not applied on that so it looks very bad like that but it should be looking like that
Is there a way to apply bootstrap after the cards are generated?
Sorry, can't comment yet because of the reputation of 50 :D
In your foreach block is one closing div tag too much ;)
I am trying to display an image in a custom wordpress theme. In the theme folder I have an img folder with all the images. It does not show anything.
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php bloginfo('template_url');
?>/footer_logo.png"></div>
</div>
You can use get_template_directory_uri() function to get URL of your active theme.
Here is the updated code, by which you can print image from your theme directory:
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/[img folder name]/footer_logo.png"></div>
</div>
</footer>
Let us know if you need any further help in this.
Thanks!
You simply forgot to reference the image folder itself.
<img src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
I am creating a project on PHP. But I have a problem. I want to pass some values from a section to another section. For example: In first section I am showing all products, and second section I am showing product details. When I click a product on first section, products values should pass second section. I am sharing my codes. Thanks
First Section
<section class="section pb-60 sm-pt-90">
<!-- Portfolio Items -->
<div id="portfolio-gallery" class="portfolio-container isotope-container portfolio-gallery row animated mfp-gallery" data-animation="fadeInUp" data-animation-delay="1200">
<article class="portfolio-item isotope-item col-md-4 col-sm-6 tasarim">
<div class="project-container">
<a href="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" data-size="1080x1440" class="portfolio-gallery__img--main">
<img src="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" alt="" style="width:360px; height:256px;">
<div class="overlay">
<div class="overlay-wrapper">
<div class="overlay-inner background-dark-5 opacity-70"></div>
</div>
</div>
</a>
<div class="project-details">
<h4 class="project-title heading-uppercase">Yeni Proje Mesela</h4>
</div>
</div>
</article>
Second Section
<div id="detay" class="ed-slide">
<div class="slide-container">
<div class="slide-content">
<section class="section sm-pt-0">
<div class="container">
<h2 class="text-white text-center animated" data-animation="fadeInDown"><!-- Project Title --></h2>
<div class="divider divider-alt divider-center divider-light animated" data-animation="fadeInDown" data-animation-delay="300"><span></span></div>
<p class="lead text-white mb-50 text-center animated" data-animation="fadeInDown" data-animation-delay="600"><!-- Project Info --></p>
<!-- Project Images etc. -->
</div>
</section>
</div>
</div>
</div>
You can make that using 2 ways:
-First way: when clicking on a product, you reload the page, and you pass the id in the url, and you display the data in the other section.
-Second way(Best way): via jquery for example, when clicking on a product, you load the data for this product and you display it in the other section.
I solved my problem with jQuery. I am sharing jQuery codes.
$(".details").click(function(){
var proje_baslik = $("input[name=proje_baslik]").val();
var proje_aciklama = $("input[name=proje_aciklama]").val();
var proje_url = $("input[name=proje_url]").val();
var proje_fiyat = $("input[name=proje_fiyat]").val();
var proje_resim = $("input[name=proje_resim]").val();
$("#detay .proje_baslik").html(proje_baslik);
$("#detay .proje_aciklama").html(proje_aciklama);
window.location.href = "http://localhost:81/Projeler/kodaktuelOnePage/#detay";});
Thanks for all comments
I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">
i am new to wordress
i want to make image gallery from basic bootstrap template
i have this template for example:
<div class="row portfolio-images">
<div class="col-md-3">
<img src="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
</div>
i want to know how to create image database or gallery in wordpress in the panel
and get the images url in an array and do something like this:
<div class="row portfolio-images">
<?php
for(the array){ ?>
<div class="col-md-3">
<img src="<?php echo image url ?> ">
<a class="title" ><?php echo image title ?></a>
</div>
<?php }?>
</div>
because im lost right now and i need some guidence
There are various plugins that you can use to generate the gallery. If you need to generate one without plugin then you can define a custom post type and then add images post on the relevant post type, which then can be listed on the required page.
Usually I use ACF plugin to generate custom field and then list it on the page. You can check it more here: http://www.advancedcustomfields.com/resources/gallery/