Can anyone help me create a lightbox with wordpress magic fields.
I need one 'Image (Upload Media)' in magic fields to create 2 images in different sizes.
e.g a thumbnail 100 x 100 px
and a lightbox image 600 x 400px
wrapped in the code:
<img src=“http://localhost:8888/thumbnail-image.jpg” alt="" />
I am a bit stuck on how this could be achieved.
Try this solution.
PHP backend (http://wiki.magicfields.org/doku.php?id=front-end_functions):
echo '<img src="'.get_image('fieldName',1,1,1,NULL,"w=100&h=100&zc=c&q=90").'" alt="" />';
JS frontend (http://api.jquery.com/category/selectors/).
I suppose you use jQuery library for lightbox, so read about jQuery selectors.
Your situation: Attribute Equals Selector [name="value"]
Your js code must be:
$("a [rel='lightbox']").lightBox(params here)
Related
Optimization in terms of page speed and page size.
First method is showing the image as a background of a div instead of in an img tag:
<div style="background:url("image-url.jpeg") no-repeat;background-size:cover;max-width:350px;max-height:350px;display:block;width:100%;height:100%;"></div>
Second is the normal img tag way:
<img src="image-url.jpeg" width=350 height=350 alt="" />
Or anyone has a better way to display image.
Thank you.
*Disregarding SEO benefits
An answer here : https://buildawesomewebsites.com/html-img-vs-css-background-image/
Imo, I'll go with the img tag, but I'll improve your code : If you want to improve perfs, you could use 'srcset' attributes with your img tag : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and load smaller images for smaller devices.
In addition, you can use lazy load with img tag easily
Hy.
After uploading an image to Wordpress it shows some weird link instead of "link-to-project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg"
I noticed it shows some info from the database. For example the ID and the date, the size etc. But idk why wordpress is doing this.
When I inspect the source I get this weird link:
<a class="logo" href="http://localhost/project/"><img src="22, 22, IMG_20171129_125745, IMG_20171129_125745.jpg, 667317, http://localhost/project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg, http://localhost/project/img_20171129_125745/, , 1, , , img_20171129_125745, inherit, 0, 2019-04-07 10:54:26, 2019-04-07 10:54:26, 0, image/jpeg, image, jpeg, http://localhost/project/wp-includes/images/media/default.png, 1700, 1000, Array" alt="logo"></a>
Here is the PHP code
<a class = "logo" href="<?php echo get_home_url(); ?>/"><img src="<?php the_field('website_logo','options'); ?>" alt="logo" /></a>
Note I'm using advanced custom fields here.
Just to add to your answer for people having issues in the future, the problem was the ACF Image field you was calling was set to image object and you was expecting it to return just the url. There are 2 ways to fix this:
Option 1: Edit the image field to only return the Image URL
Pros
Easy and simple to do, fastest solution
Good for inline background css
Cons
Unable to control the image size that is returned
Unable to display the image alt tag which can impact SEO
Option 2: Use the correct ACF Image code to display what you're looking for
The better way to display the image will be to use the Image object field as it allows a much better approach as you have access to all image attributes not just the URL. In order to display these see below:
$image = get_field('website_logo','options');
<a class="logo" href="<?php echo get_home_url(); ?>/">
<img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt'];?>" />
</a>
More information on using the image object when using ACF Image fields can be found by clicking here.
Pros
Equally as easy and simple to do
Allows you to make use of the alt, sizes, title, caption etc. of the image
Allows you to use the same image with easy further down in the code by not needing to type out the field function again
Cons
Not the ideal solution when inlining background image css, use image url for this reason instead
*Fixed
I just had to use Image url as Return Value here, I accidentally used array for the return value.
Thanks.
How can I resize an image on mouse hover using PHP with $_GET? I know that this can easily be done with css or js but I want to know how to do it with php. I don't want to upload a file either. So let's say I have html code with an <img> tag and an image, how can I use PHP or $_GET to resize that image on hover?
EDIT:
What i mean is to put the image between <a> tags and then when clicked it refreshes the page but adds the the name of the image to the url so then I could use $get to access and echo a style to resize it.
Resize question on Stack Overflow
PHP is server side and you would have to refresh your page to display a resized image on hover(although I'm not sure if you can implement action on hover without js) and if you don't want to refresh you need to use AJAX(and that requires Javascript)
Going off of your edit, are you looking for something like this?
<?php
if(isset($_GET['image'])){
echo "<img src={$_GET['image']} style='height: 100px; width: 100px;' />";
}
?>
<img src="image_name.jpg" />
I'm working on an image-heavy wordpress project. I use the following code to set the image width and height for the medium and large image sizes, and set both to hard crop mode. These values are the same as the current values for Settings>Media: (code based on this documentation)
update_option('medium_size_w', 335);
update_option('medium_size_h', 400);
update_option('medium_crop', 1);
update_option('large_size_w', 690);
update_option('large_size_h', 400);
update_option('large_crop', 1);
When I upload and insert an image using the in-post insert media button with the medium size option, everything works as expected. However, when I upload and insert a large image, I get the following markup:
<a href="http://saltdesignpdx.com/wp-content/uploads/2013/04/TCK7765.jpg">
<img src="http://saltdesignpdx.com/wp-content/uploads/2013/04/TCK7765-690x400.jpg"
alt="_TCK7765" width="540" height="313" class="alignnone size-large wp-image-53" />
</a>
Note the width="540" height="313" part of that markup. It should be width="690" height="400".
Does anyone know what's going on here, or some steps I could take to diagnose it?
Edit: I just tried switching the theme to twenty-eleven, uploading a new image, and inserting it into a post. This was the result:
<a href="http://saltdesignpdx.com/wp-content/uploads/2013/04/IMG_0729.jpg">
<img src="http://saltdesignpdx.com/wp-content/uploads/2013/04/IMG_0729-690x400.jpg"
alt="IMG_0729" width="584" height="338" class="alignnone size-large wp-image-57" />
</a>
Weird. Changing the theme changed the dimensions specified in the img tag, but they still don't match the actual size of the image.
The problem was content_width. Thanks, Fred, for the suggestion to search for 540 also.
After setting content_width to match my actual maximum content width, the size attributes wordpress provides in the <img> tag are now correct.
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!