In wordpress i developed one theme heaving one portfolio section i applied lazy load.
i am facing problem with images not shown in proper manner(proper size).
enter image description here
<div class="col-lg-4 col-md-6 portfolio-item <?php echo strtolower($tax); ?>">
<div class="portfolio-wrap">
<img src="<?php the_field('image_loader', 'option'); ?>" data-echo="<?php echo $url; ?>" class="img-fluid " alt="">
<div class="portfolio-info">
<h4><?php the_title();?></h4>
<div>
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</div>
</div>
</div>
</div>
js file name echo.min.js
https://drive.google.com/drive/folders/1DHLLdv3CTEmukndqy8f-EUln6uYddcYy
reference youtube
https://www.youtube.com/watch?v=wUz6KYREkWM&t=654s
Related
Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?
The goal is to add a class to some of the div's depending on the ID of the post being even or odd.
<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>
Looking forward to your suggestions.
FYI: the project is a WordPress template.
I am trying to display something like a thumbnail for my post. Is there any wordpress function that can do that? I read about wordpress featured images but I dont see the option to set one on the wordpress admin page.
I also tried using the_post_thumbnail() but it didnt work.
this is what my div looks like at the moment:
<div class="card" style="width: 22rem;">
<img src="<?php the_post_thumbnail(); ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
Just use:
<?php the_post_thumbnail(); ?>
Like below codes:
<div class="card" style="width: 22rem;">
<?php the_post_thumbnail('post-thumbnail', ['class' => 'card-img-top']);?>
<div class="card-body">
<h5 class="card-title"><?php the_title(); ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
When you use the_post_thumbnail() dont use extra img tag!
the_post_thumbnail(); directly output the image.So please don't use echo
the_post_thumbnail( $size, $attr );
the_post_thumbnail( 'thumbnail' );
<div class="card" style="width: 22rem;">
<?php the_post_thumbnail('thumbnail'); ?>
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
I also found another way to do it while using the img tag
<img class="card-img-top" src="<?php the_post_thumbnail_url() ?>" alt="Card image cap">
<html>
<div class="product-tile ">
<div class="product-image">
<img src="1.jpg">
<img src="2.jpg">
</div>
<div class="brand">
<a href="example1.html" class="brand-link">
Example1
</a>
</div>
<div class="product-name">
Craquelé-Effect Leather Square-Toe Mules
</div>
</div>
<div class="product-tile ">
<div class="product-image">
<img src="11.jpg">
<img src="12.jpg">
</div>
<div class="brand">
<a href="example2.html" class="brand-link">
Example2
</a>
</div>
<div class="product-name">
Craquelé-Effect
</div>
</div>
</html>
My content is like this in HTML and want to copy it on my website.
My code is like how to get the title, images, brand and there price. I've used file_get_html in it but I'm getting issue in fetching the datalike brand and price.
require('simple_html_dom.php');
$html = file_get_html('new_arrival.html');
//$product = [];
foreach ($html->find('div.wrap-desc') as $pro) {
$proDetails = $pro->find('div.brand');
}
If you are using jQuery you can get the contents of a DOM element using .html():
$('html').html()
Alternatively in vanillaJS:
let x = document.getElementByTagName('html')
console.log(x.innerHTML)
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
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/
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>