I am trying to create a sidebar for which I can specify the image in the back-end of my wordpress cms using custom fields, now I have gotten it to work, with just one little bug, if the user enters a invalid URL, the image link will display as broken and will not display, is there a way that I can hide the broken image icon perhaps?
I have a background image set for the parent DIV element so that if there is no image to display, the parent's background will.
here is the PHP code:
//here I get the 'side_image' custom field, which will contain the URL to the side image
if (have_posts()) :
while (have_posts()) : the_post();
$side = get_post_meta($post->ID, 'side_image', true);
endwhile;
endif;
HTML:
<!--here is the HTML markup-->
<div id="inner_content_right">
<img src="<?php echo $side; ?>" />
</div>
CSS:
#inner_content_right {
background: url(images/Layout_3_other_06_backup.jpg) no-repeat;
width: 259px;
height: 691px;
float: right;
position: relative;
bottom: 28px;
}
Thanx in advance!
You could try something like
<!--here is the HTML markup-->
<div id="inner_content_right">
<img src="<?php if (#getimagesize($side)) echo $side; ?>" />
</div>
Thanx guys, I got it to work with this code!
//check if the string is a valid URL
function checkURL($url)
{
return preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $url);
}
//returns a image with a valid URL or nothing at all
function validateImage($one){
if(!checkURL($one))
{
$errMsg .= "Please enter valid URL including http://";
//return $errMsg;
} else {
$headers = get_headers($one, 1);
$return = $headers[0];
if($return!='HTTP/1.1 404 Not Found'){
$string = "<img src='$one' />";
return $string;
}
}
}
Thanx for all your help!
Related
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I work on the user profile & user gallery, i want to show user uploads images and i have problem about it.
I have the following code
if($uploads) { $s = explode(",", $uploads); // Explode the images string value
$r=1; $f=count($s); foreach($s as $a) { $newdata=$Mat>Get_Upload_Image_Id($a);
if($newdata) { $final_image=$base_url."uploads/".$newdata['image_path'];
echo '<a aria-haspopup="true" target="_blank" href="#">
<div class="Image iLoaded iWithTransition tThumbImage" id="'.$msg_id.'" src="'.$final_image.'" style="background-image: url('.$final_image.');">
</div>
<div class="photoShadow"></div>
</a>';
}
$r=$r+1; } echo '<span class="snd" style="display:none;" rel="'.$uploads.'">
</span>';
}
- This code show me the separately images, i have this code on my HomePage it is ok to separate posts, but on the profile this is not good i wan't the change this, but i'm stuck with this.
I want the show images like this no separately in a row:
put this class in your css and try or if exist the same class with style than update it.
CSS Class
.iLoaded
{
display: inline-block;
vertical-align: middle;
padding: 3px 5px;
}
I want to show a png file in background of a div. I have this CSS style for put it in the correct place. I'v tested directly in my HTML and the style works properly. I't doesn't work wen I use php variable.
<?php
if ($RScoluna1['nova'] == 1){
$style = "background-image:url(layout/nova.png); background-repeat:no-repeat; background-position: 220px 0;";
} else {
$style = "";
}
?>
<div class="<?php echo $row_RScoluna1['class_cor']; ?>" style="<?php echo $style; ?>">
If you copy pasted
background-image:url(layout/nova.png)
from a css file, then you should fix the path accordingly to the position of the script.
In example:
background-image:url("../css/layout/nova.png");
I hope it helps.
So I have this modified Wordpress Loop. The Wordpress Modified/Super Loop is tasked to assigned a unique HTML structure for each post.
Anyway, I successfully used it. Not until I added the codes that calls the featured image and make it a background-image (css style property).
What the error I'm encountering right now is that it pulls the same Featured image for all post. Example, for post number two to six, it display the same featured image that belongs to Post #2.
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count >= 2 && $count <= 6) : ?>
//code to pull the featured images' urls
<?php
global $post;
if (has_post_thumbnail()) { //if a thumbnail has been set
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
$featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)
$posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
$posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array
?>
<style type="text/css">
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $posttypetwoURL1 ?>);
background-repeat:no-repeat;
width:484px;
height:350px;
display:inline-block;
}
#media screen and (max-width:1231px) {
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $posttypetwoURL2 ?>);
background-repeat:no-repeat;
width:484px;
height:350px;
}
}
#media screen and (max-width:800px) {
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $imgURL3 ?>);
background-repeat:no-repeat;
width:150px;
height:250px;
}
}
</style>
<?php
}//end if
?>
<a class="pt2s-img" href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" >
</a>
//code to pull the featured images' urls
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
I suspect that this codes is messing the loop:
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
$featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)
$posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
$posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array
But i am unsure. I think that those codes should be put somewhere so it will not mess with the loop and display the correct images.
Any advice on correctly doing it?
has_post_thumbnail() accepts post ID as its argument, use has_post_thumbnail($post->ID) instead. Because you are using modified loop, you need to implicitly pass post ID as function argument.
Though I can't be sure right now, my guess would be that by getting the id with the global $post;, you get the ID of the first post.
Since you're in the loop, you could solve this by using the following function:
get_the_ID();
(see the WordPress Function reference)
That would give you the following way of getting the image ID:
$imgID = get_post_thumbnail_id(get_the_ID()); //get the id of the featured image
I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.
I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.
If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.
<script type="text/javascript">
function toggleMeMirror(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
</script>
HTML / PHP
Loop 1 - The Content
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div id="post-<?php the_ID(); ?>" style="display:none;">
<center><?php the_title(); ?><br /><br />
<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
<?php wprp(true);?>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
Loop 2 - The actual toggles / tabs
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div style="float: left; padding: 4px;">
<center>
<div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >
<div style="overflow: hidden; width: 150px; height: 100px;">
<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
<center>
<?php echo get_post_meta(get_the_ID(), 'video_provider', true);
echo ' Mirror';?>
</center>
</div>
<img src="<?php echo $thumbnail_src; ?>" width="150px"/>
</div>
</div>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
This is also tagged jquery so I'll just recommend that you include the jquery library and include:
$('.someclass').hide();
as the first line in the toggleMeMirror function.
Then, make sure that each of your looped content divs exist in the class "someclass".
like:
foreach($this as $that) {
print "<div class='someclass'>$that</div>";
}
then
function toggleMeMirror(a){
// hide all
$('.someclass').hide();
// show one
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
You can try something like this DEMO
HTML Code
<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
jQuery
$("#one").click(function() {
$("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});
$("#two").click(function() {
$("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
});
$("#three").click(function() {
$("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});