How i can integrate php with css?

Topic: How i can integrate php with css?

VenusSModzHD free asked 7 years ago

Im triying to make a wordpress template and i choose this style for my post but i dont now how to include the post thumbnail in this card type?

<div class="card card-image" style="background-image: url("<?php the_post_thumbnail( 'full', array( 'class'=> 'img-fluid z-depth-2')); ?>"); ">

<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3 class="card-title pt-2"><strong>This is card title</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
Odit sed qui, dolorum!.</p>
<a class="btn btn-pink"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>

</div>

Add comment

Witold Tkaczyk free answered 7 years ago

0 0 Best answer

Hi,

There are two solutions:

1. you can use <code><span class="pln">$post_thumbnail_url</span><span class="pun">;</span></code>:
<pre> $post_thumbnail_id = get_post_thumbnail_id();
 $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );?>
 
 <div class=”card card-image img-fluid z-depth-2” style=”background-image: url(“<?php echo $post_thumbnail_url ?>”); “>
</pre>
2. create your own post image size:
<pre><code class="php plain">add_image_size( </code><code class="php string">'custom-size'</code><code class="php plain">, 220, 180 );</code></pre>
<pre><?php the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’)); ?></pre>
That should solve your problem.

FYI

<code>the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’))</code> returns already constructed <code><src></code> object.
So if you <code>var_dump(the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’)))</code>, it shall return you this:
<code><img src="..." class="alignleft wp-post-image" ...></code>

Please insert min. 20 characters.

Hi, There are two solutions: 1. you can use $post_thumbnail_url;:

 $post_thumbnail_id = get_post_thumbnail_id();
 $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );?>
 
 <div class=”card card-image img-fluid z-depth-2” style=”background-image: url(“<?php echo $post_thumbnail_url ?>”); “>

2. create your own post image size:

add_image_size( 'custom-size', 220, 180 );

<?php the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’)); ?>

That should solve your problem. FYI the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’)) returns already constructed <src> object. So if you var_dump(the_post_thumbnail( ‘full’, array( ‘class’=> ‘img-fluid z-depth-2’))), it shall return you this: <img src="..." class="alignleft wp-post-image" ...>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: Other
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

VenusSModzHD

10Support score
6Questions 2Answers 0Snippets