I've altered the default code that is generated when you upload an image through the posting page with the "add media" button in the post content.
This is the code I am using:
add_filter('image_send_to_editor', 'img_wrapper', 20, 8);
function img_wrapper($html, $id, $caption, $title, $align, $url, $size, $alt){
$class = "IA_image";
$editor_size = 300;
$img_meta = wp_get_attachment_metadata($id);
$width = $img_meta['width'];
$height = $img_meta['height'];
$url = wp_get_original_image_url($id);
$style = "width: {$editor_size}px; height: {$editor_size}px; background-image: url({$url}); background-position: center; background-size: cover;";
$html = "<div class=\"{$class}\" data-width=\"{$width}\" data-height=\"{$height}\" style=\"{$style}\"></div>";
// Add caption
if($caption){
$style = "font-style: italic;";
$html .= "<p class=\"caption\" style=\"{$style}\">{$caption}</p>";
}
$html = "<div class=\"{$class}-outer\">{$html}</div>";
return $html;
}
Instead of inserting an img tag I'm now using divs and setting the background image on them accordingly. I'm displaying these images on the wordpress single page.
However, by doing this, the image can not be edited like the usual images (an edit button appears when you click on it). This is the edit button I'm referring to:
Is there any way I can add this "edit" button to my altered images?
Related
I'm trying to use the latest post featured image as a background image for a div on my homepage. Can anyone help with the php?
wp_get_recent_posts() will return a single, most recently published post using the parameters below.
I recommend placing the style in a stylesheet.
/* Get Recent Post */
$recent_post = wp_get_recent_posts(array(
'numberposts' => 1,
'post_status' => 'publish'
));
/* If Featured Image Set */
if ( has_post_thumbnail($recent_post[0]['ID']) ){
/* Get Image */
$image = wp_get_attachment_image_src( get_post_thumbnail_id($recent_post[0]['ID']), 'full');
/* Output Div with Image Set Inline, Use padding Top for Responsive Ratio Size */
echo '
<div class="featured-image-div" style="background-image:url('.$image[0].');"></div>
<style>
.featured-image-div{
padding-top: calc( 450 / 800 * 100% );
background-size: contain;
background-repeat: no-repeat;
}
</stle>
';
}
I would like to know how to change image position using canvas in php
I'm trying to display the content inside the picture to bottom right
for($i=0;$i<$request->tables_count;$i++)
{
$milliseconds = round(microtime(true) * 1000);
$qrCodeName = 'storage/uploads/restaurants/' . $milliseconds . "-" . Carbon::now()->toDateString() . '.png';
$newTable=Table::create([
'qr_code' => $qrCodeName,
'num_table' => $i+1,
'status' => 1,
'restaurant_id' =>$restaurant->id,
]);
$numTableImage = Image::canvas(100, 350)->fill('rgba(0, 0, 0, 0.5)');
$numTableImage->text($newTable->num_table, 100, 200, function($font) {
$font->file(public_path('templates/backOffice/restaurant/fonts/OpenSans-Bold.ttf'));
$font->size(100);
$font->color('#fdf6e3');
$font->align('center');
});
$numTableImage->save('storage/uploads/restaurants/table'.$newTable->num_table.'.png');
$qrCode = str_random(10) . "-" . $newTable->id;
$data = $numTableImage->encode();
QrCode::format('png')->mergeString($data)->size(450)->generate($qrCode, $qrCodeName);
}
If I'm understanding what you are doing correctly... why not add the canvas element, inside a div, and then add a span after the canvas?
<style>
div {
position:relative;
}
span {
position: absolute;
bottom:0;
right:0;
}
</style>
<div>
<canvas></canvas>
<span>1</span>
</div>
This way, you can easily position the number image / whatever it is in the bottom right using CSS positioning.
The answer here: Position Relative vs Absolute? is useful for understanding CSS positioning.
Would this solution work for you? Or do you have constraints that mean it won't?
Or if they are separate elements created in the canvas, do the same, but set the element in the canvas as per the span.
I have this problem with a simple cms I'm working on:
I have a simple php function getting image elements from a specified directory, and printing them to the html
<?php if($row["imgs"] == TRUE){ ?>
<div class="imrow">
<?php
$dir = $row["folder"];
$img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
$tabing = 3;
$scale = sizeof($img);
for ($i = 0; $i < $tabing; $i++) {
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div><?php }//closing the first if of images ?>
(...)
<?php if($row["imgs"] == TRUE) { ?>
<div class="imrow">
<?php
for ($i = $tabing; $i < $scale; $i++) {
if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div>
<?php }//second if closing ?>
The style for images and rows:
.imrow {
display: block;
}
.imrow img {
z-index: 10;
float: left;
height: 100%;
cursor: pointer;
transition: transform .5s ease;
box-shadow: 1px 1px 12px rgb(200, 200, 200);
}
And are laid out using a simple jQuery function
$(".imrow").each(function () { // for every row
var row = $(this); //it gives it a name
var rowW = row.width(); //it seals it's width
var imgW = 0; //it sets a image width variable
var fixH = 600; //and get a fixed amount
row.children().each(function () {
$(this).css("height", fixH); //apply fixed height to element in order to get ratio
imgW += $(this).width(); //get the width of this and
$(this).css("height", "100%");
arr.push($(this).attr("src")); // restore
});
row.css("height", rowW / (imgW / fixH) - 2);
});
The problem here is the fact that some of the added Vertical images, turn out horizontal
Here's how it looks in a folder
And how it turns out in the website:
EDIT: This is a php only issue from what I see, because when I analyze the elements in chrome, the images are flipped by default inside, as you all can see here:
So my first bet goes on glob doing something wrong.
Has anyone experienced it, or knows a way to make glob get everything properly?
Bare in mind that this issue only happens to some of the images, and is not depended on the format of the displayed image.
Any help would be extremely useful
It appears the problem was metadata stored in the images that describe the correct orientation.
There is a image-orientation css property that is supposed to be used to display the image in the correct orientation, but it doesn't seem to be supported in all browsers.
The only other solution at the moment is to edit the image's metadata with a metadata editor or, as you have, to open the images in photoshop and save them.
Here is a snippet from the shortcodes.php file in one of the plugins I'm writing.
if($home_loop->have_posts()) {
switch($display) {
case "static":
while ($home_loop->have_posts()): $home_loop->the_post();
if(has_post_thumbnail() ) {
$content .= '<div class="parallax">';
$content .= get_the_post_thumbnail($post->ID, 'wrapper-wide', array('class' => "img-responsive"));
$content .= '</div>';
$content .= '<div class="container">';
$content .= get_the_content();
$content .= '</div>';
$content .= '<style>';
$content .= '.parallax{//css style here}';
$content .= '</style>;
} else {
//Something
}
endwhile;
break;
This works perfect. If I put a featured image thumbnail in my home post it will be displayed in my parallax div. The question I have is instead of placing the thumbnail inside of the div, I want to have it background-image: url(). I found this code below
<?php
$background = get_field( 'background_image' );
if($background):
?>
<style>
.main-wrapper {
background-image: url(<?php echo $background ?>);
}
</style>
<?php endif; ?>
How would I incorporate and run something like this inside of the $content? The reason I'm trying to get the image as a background-image:url() is so I can add specific css styling like background-position, size, repeat, attachment.
Why not just add the image as a background-image right inside your code? [wp_get_attachment_image_src][1] will return an array of the url, width and height of any attachment. Pass it the ID of the featured image, and gain the flexibility to use ANY size you want, not just the actual featured image size. Then place it as the background using inline CSS. It can be overwritten in your CSS sheet if needed.
($home_loop->have_posts()) {
switch($display) {
case "static":
while ($home_loop->have_posts()): $home_loop->the_post();
if(has_post_thumbnail() ) {
$post_thumnail_info = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'wrapper-wide' );
$content .= '<div class="parallax" style="background-image: url( \'' . $post_thumbnail_info[0] . '\' );">';
I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.