I'm using bootstrap and Advanced Custom Fields plugin. I created a field of image, but image is not responsive. Can anybody help and have any suggestions how can I edit this code to make image responsive on small screens.
Link to my website: http://vizionstar.co.uk/global_listings/
And here is my code which I'm using to get the image from front-page.php:
if(get_field('testimonial_content')) {
echo '<div class="info-box-container">';
$image = get_field('Image');
$size = 'full';
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
echo '<h3>' . get_field('testimonial_title') . '</h3>';
echo '<h1>' . get_field('testimonial_title2') . '</h1>';
echo '<h1>' . get_field('testimonial_title3') . '</h1>';
the_field('testimonial_content');
echo '</div>';
}
The image is on testimonials section "WHAT THE INDUSTRY SAYS ABOUT US".
The easiest way is to add this to your style.css:
.info-box img {
max-width: 100%;
height: auto;
}
Try adding this line to your CSS file
img.attachment-full.size-full {
width: 100%;
height: 100%;
}
Related
A couple of months ago, I asked a similar question like this and the answer that where given worked for me. I now have another change I would like to add to my page. I would like that each post I create has its own unique div. My page currently looks like this:
the previous question helped me break the div each 3 post, so what I tried was within the if statement that creates a new dive each 3 div was to add another if which would break each 1 div so that each post has its own div and it still breaks to a new div section each 3, maybe I just complicated everything with my description, but I want to get something like:
Here is my code
CSS:
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
}
PHP:
else {
$break = 0;
$nRows = $connection->prepare("SELECT post_id, post_title,
post_author, post_file, post_time
FROM posts
ORDER BY post_id DESC");
$nRows->execute();
if($nRows->rowCount() > 0) {
while ($row = $nRows->fetch()) {
$post_title = str_replace('_', ' ', $row['post_title']);
$post_author = $ed->encrypt_decrypt('decrypt',$row['post_author']);
$post_file = $row['post_file'];
$post_date = $row['post_time'];
// Create a new div each 3 columns
if ($break % 3 === 0) {
echo '<br><div class="column"><br>';
}
$break++;
?>
<!-- Blog Content BEGIN Display-->
<div class="box"><?php
// Display the content
$file_parts = pathinfo($post_file);
if(isset($file_parts['extension'])) {
switch ($file_parts['extension']) {
case "jpg":
if(!empty($post_file)) { ?>
<img src="post/postFiles/<?php echo $post_file;?>"><?php
}
break;
case "mp4":?>
<div class="thumbnail">
<video preload="auto" loop muted>
<source src="post/postFiles/<?php echo $post_file;?>">
</video>
</div>
<!-- Preview video on hover -->
<script>
$(document).ready(function () {
$(".thumbnail").hover(function () {
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
el.currentTime = 0;
});
});
</script><?php
break;
case "": // Handle file extension for files ending in '.'
case NULL: // Handle no file extension
break;
}
}
// Title URL Variable
$urlFetchPostId = '<h2><a href="post/postFetch/fetchByTitle/fetchByPT.php?post_id=';
$urlFetchPostTitle = '&post_title=';
$urlFetchPostAuthor = '&post_author=';
echo $urlFetchPostId . $row['post_id'] . $urlFetchPostAuthor. $row['post_author']. $urlFetchPostTitle . $row['post_title'] . '"' . 'class="link-post-title" style="font-family: Arial">' . " ". $post_title . '</a></h2>';
// Author/User URL Variable
$urlFetchPostUser = '<a href="post/postFetch/fetchByAuthor/fetchByPA.php?post_author=';
echo $urlFetchPostUser . $row['post_author'] . '"' . 'class="link-post-author" style="font-family: Arial">' . " ". strtoupper($post_author) . '</a>';
// Posted Date
echo '<br><p style="font-family: Arial">Posted on ' . $post_date . '</p>';
?>
</div><?php
if ($break % 3 === 0) {
echo '<br></div><br>';
}?>
<!-- Blog Content END Display --><?php
}
} else { ?>
<p style="color: darkgoldenrod" class="mssgAlign"><u>NO RECORDS</u></p><?php
}
$nRows = null;
}
Any help, tip or improvement suggestion is welcomed
You want to use margins. Margins specify a buffer around the outside of your container. As opposed to padding, which specifies buffer inside the container. Add this to your css
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
margin-left: 20px;
margin-right: 20px;
}
I am using the php code below to echo an image from mysql database, please help me show how can I set the width and height of the image?
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
This has nothing to do with SQL, it's a matter of CSS.
The CSS rules you need are width and height, and you can specify them either in the tag itself
echo '<img style="width: x; height: y" src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
or in a style tag in your header section
echo '<style type="text/css">
#venue{
width: x;
height: y;
}
</style>'
...
echo '<img id="venue" src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
or even in a separate file
yourStyle.css
#venue{
width: x;
height: y;
}
yourPHPfile.php
echo '<link rel="stylesheet" type="text/css" href="yourStyle.css" />';
...
echo '<img id="venue" src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
You can read more about how CSS works and the different places it can be placed here (and in many other places, you can just search "CSS where").
There are multiple ways to do this, on simple solution is to echo the image with proper styling, something like this
echo '<img style="width: 500px; height: 200px" src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
Another solution is to add a class or an ID to your image and then create a CSS rule to style it
echo '<img id="foo" src="data:image/jpeg;base64,' . base64_encode($row['venueimage']) . '"/>';
And in your CSS
#foo{
width: 500px;
height: 200px;
}
This is main problem of my system I can display images and their names but it cant't be a horizontal.. Need help please. Cause when I run my codes the images will be vertically but I want to be in a horizontal
Here;s the code:
echo'<?php $src=array("candidates/images/".$rows["image"]); for($i=0;$i<2;$i++){ ?>';
echo '<div clas ="image">';
echo '<img src="candidates/images/'.$rows['image'].'" width="10" height="20px" />'.', '.'<br>'.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
// echo '<br>';
}
$sdsd=$dsada
?>
<img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
// echo(100*round($rows['votes']/($sdsd),2)); /
/*?>%<br>*/
/*<?php
}
*/echo '</div>';
}
}
Here's the CSS:
.image {
position: relative;
width: 150px;
display: inline-bloxk;
}
Remove the <br> ?
echo ''.', '.''.$rows['lastname'].', '.$rows['firstname'].''.' = '.$rows['votes'];
In my code I use this MySQL query:
$qry="SELECT ServiceIcon FROM Services INNER JOIN UserServices ON UserServices.ServiceID=Services.ServiceID WHERE UserServices.UserID=$_SESSION[SESS_MEMBER_ID]";
$result=mysql_query($qry);
header("Content-type: image/png");
echo mysql_result($result,0);
I want these images to be displayed in a grid of 3 icons wide. Currently they're displayed on top of each other however. So I should echo an like this:
echo '<ul>';
foreach ($images as $image) {
echo '<li><img src="' . $image['src'] . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';
What I don't understand is how I should incorporate into my code. Or maybe my code is not even the right way to do it. Please help me out.
EDIT: So this is the complete file in question:
<?php
session_start();
include "connection.php";
// just so we know it is broken
error_reporting(E_ALL);
// some basic sanity checks
$qry="SELECT ServiceIcon FROM Services INNER JOIN UserServices ON UserServices.ServiceID=Services.ServiceID WHERE UserServices.UserID=$_SESSION[SESS_MEMBER_ID]";
$result=mysql_query($qry);
header("Content-type: image/png");
?>
<html>
<head>
<style>
ul.horizontal-display {
margin: 0;
padding: 0;
}
ul.horizontal-display li {
list-style: none;
display: inline-block;
}
</style>
</head>
<body>
<?php
echo '<ul class="horizontal-display">';
foreach ($images as $image) {
echo '<li><img src="' . $result . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';?>
</body>
</html>
Hello you need to add CSS. Something like this:
echo '<ul class="horizontal-display">';
foreach ($images as $image) {
echo '<li><img src="' . $image['src'] . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';
And in the CSS rules
ul.horizontal-display {
margin: 0;
padding: 0;
}
ul.horizontal-display li {
list-style: none;
display: inline-block;
}
I am having issues with this regex, which is finding the source of each image in a Wordpress post. At the moment, for example, the first image source outputs as https://www.telecomsworldplc.co.uk/h and not https://www.telecomsworldplc.co.uk/advice/wp-content/uploads/2013/10/globalBusiness.jpg...
Any ideas why it is doing this? The code is here...
$recent_posts = wp_get_recent_posts(array(
'numberposts' => 4
));
$j = 0;
$wpArray = array();
$wpImageArray = array();
foreach($recent_posts as $wpposts){
preg_match( "<img.*?src=[\"'](.+?)[\"'].*?>", $wpposts['post_content'], $matches2 ) ;
$wpimg = $matches2[1];
$wpImageArray = $wpimg;
$wpArray[] = $wpposts['post_title'];
}
$k = 0;
while ($k < 4){
echo "<div class='masonryImage blogImage' style='width: 300px; height:200px; background: url(" . $bloggerImgArray[$k] . ") no-repeat center; background-size:cover;'><div class='category-hover'>Filed under: News</div> <div class='caption-rollover'><a href='https://www.telecomsworldplc.co.uk/blog.twplc/no-business-can-afford-to-miss-customer-calls'>" . $bloggerArray[$k] . "</a></div></div>";
echo "<div class='masonryImage blogImage' style='width: 300px; height:200px; background: url(" . $wpImageArray[$k] . ") no-repeat center; background-size:cover;'><div class='category-hover'>Filed under: Advice</div> <div class='caption-rollover'><a href='https://www.telecomsworldplc.co.uk/blog.twplc/no-business-can-afford-to-miss-customer-calls'>" . $wpArray[$k] . "</a></div></div>";
echo "<div class='masonryImage tweets' style='width:300px; height:175px;'><div class='tweet-content'>" . $tweets[$k] . "</div></div>";
$k++;
}
The page in question is https://www.telecomsworldplc.co.uk/testMasonryDevStatic.php
Just for reference, I have already tried var_dump()on the post in general, and the images are outputting fine
Found it!
$wpImageArray didn't have brackets on it... So the line that fixed it was
$wpImageArray[] = $wpimg;
It's morning, forgive me!