In Wordpress, I try to set the background of a div dynamically by using the post-thumbnail url in a style parameter. I put the style-parameter in a variable, named style.
If I echo $style directly, it outputs:
style="background: url("http://localhost/test/wp-content/uploads/2012/11/potloden_120px.png") cover no-repeat;"
But if I echo $style in the div, like so:
<div class="column" <?php echo $style; ?>>
I get the following output:
<div class="column" style="background: url(" http:="" localhost="" test="" wp-content="" uploads="" 2012="" 11="" potloden_120px.png")="" cover="" no-repeat;"="">
Does anyone now what causes this? How should I adept my syntax for this to work?
I have checked, Please put below code in to your wordPress template and check it.
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" class"your-class" style="background-image: url('<?php echo $thumb['0'];?>')">
<p>text demo</p>
</div>
Change this in your code
<div class="column" style="background: url('<?php echo $image; ?>') cover no-repeat;">
Add URL inside single quote.This will evaluate variable in proper format.
url('<?php echo $image; ?>')
output will be
<div class="column" style="background: url('http://localhost/test/wp-content/uploads/2016/11/potloden_120px.png') cover no-repeat;">
Tips Use single quotes so that you don't have to escape the double quotes (when using echo),
Related
I am a fresher in wordpress and I was trying to dynamic a structure. I want someone who can guide me to show images serial wise in the loop.
Here is the structure:
<section class="beers-img">
<div class="container">
<?php
$add_gallery_images =get_post_meta(get_the_ID(), 'add_gallery_images', true);
$add_gallery_images = array_values($add_gallery_images);
// print_r($add_gallery_images);
$countimages = count($add_gallery_images);
for($x = 0; $x < $countimages; $x++) {
?>
<div class="row <?php echo ($x % 2 == 0 ) ? '' : 'flex-row-reverse'; ?>">
<div class="col-lg-5">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
<div class="col-lg-7">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
</div>
<?php } ?>
</div>
</section>
But in the loop, same image is displaying in col-lg-5 and col-lg-7. And in the next row it shows the second image twice, and in the next row it shows the third image.
I want to show first image in col-lg-5 and second image in col-lg-7, third image in next row first col-lg-5 and so on.
Can anyone guide me on how will I do that?
I'll get quickly to the point: I'm creating a Wordpress theme for my blog, using _s starter theme. I'm using the bootstrap 4 grid system, in order to achieve a 2 column post (on home page/search/archive): the post thumbnail inside a div on the left, while the post content (title, excerpt etc.) on the right.
I want to set the post thumbnail as a background-image of the div, I already achieved that, on desktop/tablet no problem, but on mobile when the thumbnail is above the post content, it won't show up, unless I set a fixed height to the image, I'm ok with that, but the issue is that some posts do not have a post thumbnail, so you can imagine that the result is pretty brutal, with blank space on post without thumbnail;
Maybe this is stupid and easy, but the question is: is there a way to solve this? Maybe it's possible to set the fixed height on mobile but only on posts that has the thumbnail?
<div class="container-fluid">
<div class="row">
<div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
</div>
<div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
</div> <!-- post content -->
</div> <!-- row -->
</div> <!-- container fluid -->
If I understood you correctly, maybe you could try something like this
<div class="container-fluid">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<div class="col-md-6">
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
<?php else : ?>
<div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
<?php endif; ?>
</div>
</article>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>
</div>
I'm trying to use a slider in different blog pages in a Wordpress website, but it doesn't work. When I use it, it only shows plain text: [metaslider id=4281]
It seems that "blog entries" don't understand the Metaslider code, because I have tried in a simple page, and it works. Here's the code of a blog entry (single.php)
<?php get_header()?>
<div id="maincontent">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); //The Loop?>
<div <?php post_class()?>>
<?php if(has_tag()){the_tags( _e('Keywords','polaroids') . ': ', ', ');}?><br/>
<hr style="border: 0;border-bottom: 1px dashed #DDDDDD;"></br>
<h1><?php the_title()?></h1>
<div class="date"><?php /* the_date() */ ?></div>
<div class="post-content"><? echo $post->post_content; /*php the_content()*/ ?></div>
<div class="postfooter">
<?php wp_link_pages('before=Pages&after='); ?><br/>
</div>
<hr style="border: 0;border-bottom: 1px dashed #DDDDDD;">
<div class="breadcrumbs"><?php the_category(', '); ?></div>
<hr style="border: 0;border-bottom: 1px dashed #DDDDDD;">
</div>
I haven't tested this but I suspect that echoing the post_content might be returning the plain text. Not sure why the_content is commented out but try using that.
So instead of this:
<? echo $post->post_content; /*php the_content()*/ ?></div>
Try using this:
<?php the_content(); ?>
I have a views which rendered html like this
<div class="content">
<div class="row-1">Some Text here</div>
<div class="row-2">Some Text here</div>
<div class="row-3">Some Text here</div>
</div>
Now I want to wrap the rows using a wrapper div like so.
<div class="content">
<div class="wrapper-1">
<div class="row-1">Some Text here</div>
<div class="row-2">Some Text here</div>
<div class="row-3">Some Text here</div>
</div>
</div>
Use the style output template of the views/display. You will find it in "Theming information". To get it from your views/display do:
Advanced > Theme: information
The first template is "views-view-unformatted.tpl.php" but you can use any in the list.
The original code is:
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"'; } ?>>
<?php print $row; ?>
</div>
<?php endforeach; ?>
Add your wrapper around the foreach and you are done.
Not sure if it's the best way to do this, but you can try the following for Drupal 7::
function MODULENAME_preprocess_views_view(&$vars) {
if ($vars['view']->name == 'VIEWNAME') {
$vars['rows'] = "<div class='wrapper-class'>" . $vars['rows'] . "</div>";
}
}
This will wrap contents just below the view-content class.
I am getting a div that is appearing in the output from calling a RSS feed. It is ignoring my attempts to wrap it in a paragraph tag and pushes the data out to the div.
foreach ($feed->get_items(0 , 3) as $item):
$feedDescription = $item->get_content();
$image = returnImage($feedDescription);
$image = scrapeImage($image);
$image_url= $item->get_permalink();
$description = $item->get_description();
?>
<div class="item">
<h4><?php echo $item->get_title(); ?></h4>
<div class="image-box"><?php echo '<img src="' . $image . '" />'."\n";?></div>
<p><?php echo $description ?></p>
<p>Continue Reading</p>
</div>
<?php endforeach; ?>
Here is the html output:
<div class="item">
<h4>Lorem Ipsum</h4>
<div class="image-box"><img src="image.jpg">
</div>
<p></p>
<div>Lorem Ipsum description [...]</div>
<p></p>
<p>Continue Reading</p>
</div>
Why does the description call add a div tag and not get wrapped in the paragraph tag?
That is not a problem of SimplePie... well, not directly.
Try to test this html-block:
<div class="item">
<h2>Title</h2>
<p><div><span>Description</span></div></p>
<p><small>Posted on TODAY</small></p>
</div>
You will see that here the behaviour is the same.
The problem is, that the post you get from simplepie is encapsulated in a DIV. And inserting a DIV into a paragraph results in a seperation of both.
So you could try to delete the enclosing DIV in PHP with a regexp or with jQuery, for instance.