I pull a post from a website then i display it on my website. I want when a user clicks on it i want her to be redirected to the source url but when i share it i want the url to have my url like www.mywebsite.com/post url. Am trying this code below
<div class="post-item mb-3 shadow-sm bg-white">
<div class="d-flex justify-content-between flex-wrap p-1">
<div class="post-feat-image pr-2 d-flex align-items-center"><a href="<?= e_attr(post_url($t['loop'])); ?>" class="post-img-link" <?= post_attrs($t['loop']); ?>>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQYV2N8+vTpfwYGBgZGGAMAUNMHXwvOkQUAAAAASUVORK5CYII=" data-src="<?= e_attr(feat_img_url($t['loop.post_featured_image'])); ?>" alt="<?= e_attr($t['loop.post_title']); ?>" class="post-feat-img img-zoom"></a>
</div>
<div class="post-info px-2 py-1"><a href="<?= e_attr(post_url($t['loop'])); ?>" <?= post_attrs($t['loop']); ?>>
<h3 class="post-title" title="<?= e_attr($t['loop.post_title']); ?>">
<?= e(limit_string($t['loop.post_title'], 70), false); ?>
</h3></a>
<div class="post-feed-logo mb-1">
<img src="<?= feed_logo_url($t['loop.feed_logo_url']); ?>" class="feed-logo-img">
</div>
<div class="post-time text-muted py-1">
<?= svg_icon('time', 'text-success'); ?>
<?= time_ago($t['loop.post_pubdate'], _T); ?>
<?= svg_icon('eye-outline', 'text-primary'); ?>
<?= localize_numbers($t['loop.post_hits'], _T); ?>
<a href="https://facebook.com/sharer/sharer.php?u=<?= e_attr(post_url($t['loop'])); ?>" class="btn btn-facebook rounded-0 btn-share" data-toggle="tooltip" title="<?= e_attr(__('Share on Facebook', _T)); ?>" target="_blank" rel="noopener">
<?= svg_icon('facebook'); ?>
</a>
<a href="http://twitter.com/share?text=<?= e_attr($t['post.post_title']); ?>&url=<?= e_attr(post_url($t['loop'])); ?>" class="btn btn-twitter rounded-0 btn-share" data-toggle="tooltip" title="<?= e_attr(__('Share on Twitter', _T)); ?>" target="_blank" rel="noopener">
<?= svg_icon('twitter'); ?>
</a>
</div>
</div>
</div>
</div>
just enclose the whole code in <a></a> tag and in CSS just remove all the text decoration.
Related
I would like some help In creating a loop for my WP template.
I have the same div block repeated a few times, the class numbers are different and that's about it.
based of the sample blocks bellow can someone give me a example of how i could wrap this in a loop and change the class numbers ?
code block
If you see bellow some of the class names just differ with the number
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_1') ?>"
alt="<?php the_field('section_3_image_1_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_1'); ?>"
title="<?php the_field('title_1'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_2') ?>"
alt="<?php the_field('section_3_image_2_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_two', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_2'); ?>"
title="<?php the_field('title_2'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_3') ?>"
alt="<?php the_field('section_3_image_3_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_3', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_3'); ?>"
title="<?php the_field('title_3'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<?pho $i=1; if( have_rows('parent_field') ):
while ( have_rows('parent_field') ) : the_row(); ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_' . $i) ?>"
alt="<?php echo get_field('section_3_image_' . $i . '_alt') ?>">
<h3 style="min-height: 150px"><?php echo get_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php echo get_field('link_' . $i); ?>"
title="<?php echo get_field('title_' . $i); ?>"
class="btn btn-lg btn-secondary">
<?php echo get_field('link_text'); ?>
</a>
</p>
</div>
<?php $i++; endwhile; endif; ?>
if you are working with while loop this will work fine.
This ACF field data and your while will work fine as this.
You can do with this code:
<?pho for($i = 0; $i < YOUR_MAX_VALUE; $i++): ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_' . ($i+1)) ?>"
alt="<?php the_field('section_3_image_' . ($i+1) . '_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_' . ($i+1)); ?>"
title="<?php the_field('title_' . ($i+1)); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<?php endfor; ?>
Remember to set YOUR_MAX_VALUE to the value you need.
if you are working with for loop this will work fine.
<?pho for($i = 0; $i < YOUR_VALUE.length; $i++): ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php
the_field('section_3_image_' . ($i+1)) ?>"
alt="<?php the_field('section_3_image_' . ($i+1) . '_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_' . ($i+1)); ?>"
title="<?php the_field('title_' . ($i+1)); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link'); ?>
</a>
</p>
</div>
I have Bootstrap modal tabs and it is works fine without data loop. I am trying to fill tabs using data from db(fetch), but it is not working when i am changing tabs, how can call my required tab data on press to my tab? I know that I have problem with looping or maybe "active"- class of tabs. Here is my code. What is wrong?
<div class="row">
<div class="col">
<div class="row">
<div class="col-sm-4">
<h4 class="mb-4">Ölkələr</h4>
</div>
</div>
<div class="row">
<?php
$conn = connect_to_bd();
mysqli_set_charset($conn,"utf8");
$selectolke = mysqli_query($conn, "Select t.ID as tid,t.text_az as textaz, c.textid as textid, c.olkeflag as olkeflag, c.id as cid, c.country_az as country_az from countries c, text t where t.id = c.textid");
while($selectolkerow = mysqli_fetch_array($selectolke))
{
$textid = $selectolkerow["textid"];
$country_az = $selectolkerow["country_az"];
$olkeflag = $selectolkerow["olkeflag"];
$olkeid = $selectolkerow["cid"];
?>
<div class="col-lg-4">
<div class="tabs tabs-vertical tabs-left tabs-navigation">
<ul class="nav nav-tabs col-sm-3">
<li class="nav-item active">
<a class="nav-link" href="#tabsNavigation<?php echo $textid; ?>" data-toggle="tab"><img src="lib/png/<?php echo $olkeflag; ?>.png"> <?php echo $country_az; ?></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="tab-pane tab-pane-navigation active" id="tabsNavigation<?php echo $textid; ?>">
<h4><?php echo header_subname_olke_select_az($olkeid); ?></h4>
<p class="notworkingcss" style="color: #fff;font-family:Verdana, sans-serifsans-serif;text-shadow: black 1px 1px 2px;font-size: 1.2em;">
<?php echo text_olke_select_az($textid, $olkeid); ?>
</p>
<div class="row portfolio-list lightbox m-0" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}">
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/1.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/1.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/2.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/2.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/3.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/3.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
As title implies this code shows all the questions that i add to the loop/accordion but no matter which one i click on it only opens and closes the first and i cant tell why.
<div class="container">
<div class="row">
<div id="accordion" role="tablist" aria-multiselectable="false" class="py-4">
<?php
$counter = 0;
$loop = get_field('questions');
foreach($loop as $row) : ?>
<div class="card card-no-border card-no-shadow">
<div class="card-header" role="tab" id="heading<?php echo $counter++ ?>">
<h5 class="mb-0">
<a class="body2 uppercase bold" data-toggle="collapse" data-parent="#accordion"
href="#collapse<?php the_ID(); ?>"
aria-expanded="<?php echo $first; ?>" aria-controls="collapse<?php the_ID(); ?>">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<span style='padding-right: 20px;'></span>
<?php echo $row['question_title']?>
</a>
</h5>
</div>
<div id="collapse<?php the_ID(); ?>" class="collapse<?php if ($first) {
echo "show";
} ?>" role="tabpanel"
aria-labelledby="heading<?php the_ID(); ?>">
<div class="card-block body2">
<?php echo $row['answer'] ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
I would say you need to look at your id's
href="#collapse<?php the_ID(); ?>"
id="collapse<?php the_ID(); ?>"
the_id function is outputting the current page id not the id of each loop/question
You could use your counter instead
id="collapse<?php echo $counter; ?>"
The query and the fetching are working properly, but it's too repetitive, I tried (applying some tutorials on for loops) but can't seem to figure out.
<div class="spctcls">
<div class="artc_cnt">
<a class="art_liga" href="efecto.php?libelula=noticias&artic=<?= $articulos[0]['id']; ?>&gen=<?= $articulos[0]['genero']; ?>&id=<?= $articulos[0]['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulos[0]['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulos[0]['id']; ?>&gen=<?= $articulos[0]['genero']; ?>&id=<?= $articulos[0]['id'] ?>">
<?= $articulos[0]['titulo']; ?>
</a>
</a>
</div>
</div>
<div class="spctcls">
<div class="artc_cnt">
<a href="efecto.php?libelula=noticias&artic=<?= $articulos[1]['id']; ?>&gen=<?= $articulos[1]['genero']; ?>&id=<?= $articulos[1]['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulos[1]['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulos[1]['id']; ?>&gen=<?= $articulos[1]['genero']; ?>&id=<?= $articulos[1]['id'] ?>">
<?= $articulos[1]['titulo']; ?>
</a>
</a>
</div>
</div>
<div class="spctcls">
<div class="artc_cnt">
<a href="efecto.php?libelula=noticias&artic=<?= $articulos[2]['id']; ?>&gen=<?= $articulos[2]['genero']; ?>&id=<?= $articulos[2]['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulos[2]['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulos[2]['id']; ?>&gen=<?= $articulos[2]['genero']; ?>&id=<?= $articulos[2]['id'] ?>">
<?= $articulos[2]['titulo']; ?>
</a>
</a>
</div>
</div>
<div class="spctcls">
<div class="artc_cnt">
<a href="efecto.php?libelula=noticias&artic=<?= $articulos[3]['id']; ?>&gen=<?= $articulos[3]['genero']; ?>&id=<?= $articulos[3]['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulos[3]['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulos[3]['id']; ?>&gen=<?= $articulos[3]['genero']; ?>&id=<?= $articulos[3]['id'] ?>">
<?= $articulos[3]['titulo']; ?>
</a>
</a>
</div>
</div>
It's working OK but I want to make it lightweight.
Thank You for any suggestions.
It's kind of easy really:
<?php foreach ($articulos as $articulo) { ?>
<div class="spctcls">
<div class="artc_cnt">
<a class="art_liga" href="efecto.php?libelula=noticias&artic=<?= $articulo['id']; ?>&gen=<?= $articulo['genero']; ?>&id=<?= $articulo['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulo['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulo['id']; ?>&gen=<?= $articulo['genero']; ?>&id=<?= $articulo['id'] ?>">
<?= $articulo['titulo']; ?>
</a>
</a>
</div>
</div>
<?php } ?>
Thanks to Farkie the rest was easy, To limit the amount of results this is how the whole thing ended up.
<?php
$i="1";
foreach ($articulos as $articulo) { ?>
<div class="spctcls">
<div class="artc_cnt">
<a class="art_liga" href="efecto.php?libelula=noticias&artic=<?= $articulo['id']; ?>&gen=<?= $articulo['genero']; ?>&id=<?= $articulo['id'] ?>">
<div class="artc_foto">
<img src="img/chica/<?= $articulo['foto']; ?>" alt="" />
</div>
<a class="art_titl" href="efecto.php?libelula=noticias&artic=<?= $articulo['id']; ?>&gen=<?= $articulo['genero']; ?>&id=<?= $articulo['id'] ?>">
<?= $articulo['titulo']; ?>
</a>
</a>
</div>
</div>
<?php
if ($i++ == 4) break;
} ?>
Thank You so much.
I trying to produce a dynamic carousel banner to update the image, headers, text, links & alts based on the content page being viewed.
The site is being coded in .php & using the bootstrap CSS framework. I've broken the site into three main parts... Header, "Content" and Footer.
I'm calling the function img-banner as part of the header.php but wish to use variables stored in the "content" pages which will determine the images etc being viewed.
Calling the function:
<div class="img-banner">
<?php include ("functions/img-banner.php"); ?>
<!-- closing img-banner -->
</div>
The function:
<?php
function img_banner()
{
?>
<div class="carousel-inner">
<div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head1;?></h1>
<p><?php echo $text1;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head2;?></h1>
<p><?php echo $text2;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head3;?></h1>
<p><?php echo $text3;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
</div>
<?php
}
?>
I'm a little stumped and have tried (obviously unsuccessfully lol) global and SESSION variables but cant get them to work correctly.
I'd appreciate confirmation on the best method to implement the above so I can read up and figure this out. My main goal is to have a cms style admin panel to update the images.
Thanks!
First of all, the function does not have access to the $img1-$img3 variables as you're not passing them to the function.
Secondly, you really do not require a function to do this simple task.
Last but not least, you are not even calling the function, only including it's file.
Here's how you should do this:
<div class="img-banner">
<?php include ("img-banner.php"); ?>
<!-- closing img-banner -->
</div>
And the img-banner.php:
<div class="carousel-inner">
<div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head1;?></h1>
<p><?php echo $text1;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head2;?></h1>
<p><?php echo $text2;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head3;?></h1>
<p><?php echo $text3;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
</div>