Wrap a link around image in slideshow using wordpress magic fields - php

I have a slideshow set up with Magic fields like the code below, but
now I need each image to have a seperate link. How can I set this up?
I just can't think how I can add this to the code below, I appreciate
any help anyone can offer me.
<div id="slider">
<?php
$images = getFieldOrder('slideshow_slide');
if(is_array($images)){
foreach($images as $image){
echo get_image('slideshow_slide',1,$image);
}
}
?>
</div>

Hooray MagicFields! <3
There are two ways to get an image in MagicFields.
Method 1 will return a full image tag:
echo get_image('slideshow_slide');
Method 2 just returns the url of the image:
echo get_image('slideshow_slide',1,1,0);
In order to generate a link to your full-size image, you'll need to construct an anchor tag using the second method. Maybe something like this:
$image_path = get_image('slideshow_slide',1,1,0);
echo 'Insert link text or thumbnail here';
You might need to modify the above to work with your foreach loop, but that's the basic idea.
Update:
Here's what you need to do. Create another duplicateable text field, called image_url. This field will hold the link for your image. Each image will need a corresponding url. This loop should do what you want:
if(is_array($images)){
foreach($images as $image){
$image_url = get('image_url',1,$image);
echo "<a href='" . $image_url ."'>" . get_image('slideshow_slide',1,$image) . "</a>";
}
}

Related

Load Images and description into overlay (HTML/CSS/PHP)

I have a grid of thumbnails that when clicked on I want to load an overlay on the page showing the full size image and the contents of a text file as a caption.
Something like
<image src="thumbs/1001.jpg"> would just load the image, but I want to load the image in a light box sort of view and also load the contents to "desc/1001.txt" into a caption (not necessarily a <caption>) below the image.
I don't want it to reload the page if that can be avoided. If it helps, the images, thumbnails, and description all match the pattern above, or I also have a CSV file in the format of 1000,"Description of the picture" if that is simpler.
If you use something like https://lokeshdhakar.com/projects/lightbox2/#getting-started this should be fairly easy.
Your PHP code would look something like this:
<?php
$photos = [1000,1001];
foreach ($photos as $photo) {
$description = file_get_contents('desc/' . $photo . '.jpg');
echo '' . $photo . '';
}
?>

Dynamically get some data and insert it into a div (wordpress related)

I have a challenge with a wordpress theme I'm developing, but I think what I'm after is really just a general php/JS solution, nothing Wordpress specific.
So I have the below code with pulls in the thumbnail and description for an array of images I have uploaded. What I'd like to do is when a user clicks on the link the description and caption associated with that image is displayed in a div elsewhere on the page.
My issue is that so far the only way I can think of to do that is to set a javascript variable within my php foreach statement, but the problem with that is that this overwrites the variable value each time (as I can't change the variable name) so by the end of it all I don't have a different JS variable for each image, I just have one with the details from the last image in the array.
I know AJAX might be one way forward, but I know pretty much nothing about it. If anyone can help point me in the right direction I'd really appreciate it.
Thanks
<?php
$gallery_images = get_custom_field('galleryImages:to_array');
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
?>
link
<?php
}
?>
<div id="targetDiv"></div>
I think you're going about this the wrong way, personally. Using AJAX to interact with a WordPress site seems like overkill for the simple ability of showing some peripheral information about an image.
What I would do is have WordPress spit out the image, along with the caption info when the page is initially downloaded, but hide the caption info and then use client-side JavaScript to show/hide it when it's needed.
<?php
$button_html = "";
$caption_html = "";
$gallery_images = get_custom_field('galleryImages:to_array');
$gallery_images_count = 0;
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
$button_html .= '<div id="caption-button-' . $gallery_images_count . '" class="show-caption-button">Show Caption</div>';
$caption_html .= '<div id="caption-' . $gallery_images_count . '" style="display:none;">' . $caption . '</div>';
$gallery_images_count++;
}
echo '<div id="buttonDiv">' . $button_html . '</div>';
echo '<div id="targetDiv">' . $caption_html . '</div>';
?>
Then the JavaScript/jQuery:
$('.show-caption-button').click(function(){
var caption_id = $(this).prop('id').substring(15);
$('#caption-'+caption_id).eq(0).toggle();
});
It's hard to test without setting up a WordPress myself, but essentially what we're doing is adding caption divs with numbered id's to a string variable in PHP as we're looping through our images. Then, at the end of the loop, we echo that out to the page.
In JavaScript/jQuery, we're grabbing the corresponding id of the caption button and using it to toggle the relevant caption further down in the page.

Why is a specific variable causing html to print out

I am trying to display some images in my wordpress site. I am trying to make the background div and image via style=""
So when I do this:
<?php
if(has_post_thumbnail($property->ID)){
$image_url = get_the_post_thumbnail($property->ID,array(300,220),array('class' => "post_thumbnail"));
}else{
$image = $image_url = '';
}
?>
<div class="property_photo" style="background-image:url('<?php echo $image_url;?>') no-repeat;">
</div>
The photo is not displaying anymore and it's printing ') no-repeat;"> where the image should display. When I use a variable without an "_" in the name, it doesn't print anything. So to avoid that I tried $image = $image_url = ''; to get around that.
Is this is a simple syntax problem or is there something in the php that is causes this? It doesn't seem like syntax because when I use other variable it does not do this.
Your get_the_post_thumbnail() function is returning HTML, not a URL. You need to either change the function to only return a URL (or use a different function which does that), or change your HTML to put the image inside the div instead of setting it as a background image.

php - get the source of an image

I need to get all the source values from all image inside a container. I'm having some difficulty with this.
Allow me to explain the process.
All the data comes from a database. Inside the backofficce the user enter all the text and the image inside a textarea. To separate the text with the image the user must enter a pagebreak.
Let's go to the code
while ($rowClients = mysql_fetch_array($rsClients)) {
$result = $rowClients['content'];
$resultExplode = explode('<!-- pagebreak -->', $result);
// with resultExplode[0] I get the code and with resultExplde[1] I get the image
// Now with I want to get only the src value from resultExplode[1]
I already tried with strip_tags
$imageSrc = strip_tags($resultadoExplode[1]);
but it doesn't print anything.
I found this post but without success. I stopped in the first print_r.
Can anyone help me??
Thanks
try foreach, if you can't print it out.. (if that's the problem)
foreach($resultExplode as $key => $value){
echo "[".$key."]".$value;
}
I found a solution:
continuing with the previous code I worked with the split function.
So I start to strip the tags. This way I get the img isolated from the rest.
$image = strip_tags($resultExplode[1],"<img>");
Because all the img has the same structure like this: <img width="111" height="28" alt="alternative text" src="/path/to/the/file.png" title="title of the image">
I split this string, using " as a delimiter
$imgSplit = split('"', $image);
$src = $imgSplit[3];
Voilá. It's working
What do you say about this procedeure??

Adding a new field to page using mySQL

I am a bit of a newby to mySQL. I have added a new column that stores image names for images stored in a file (eg.toweltest.jpg). I want to draw these to display images on a page. This is someone else's code I am adapting so its a bit patchy. Basically I want to draw the folder name and then add whatever image name is associated with that product. So far I have this:
<?php
$SNIPPET = true;
require './includes/php/header.php';
$product = Product::Get($_GET['product_id']);
$supplier = Supplier::Get($product->supplier_id);
$url = "/products/";
$image = 'toweltest.jpg';
?>
<h1><?php echo htmlspecialchars($product->code); ?><br><br><?php echo htmlspecialchars($product->name); ?></h1>
<h2><?php echo htmlspecialchars($product->description); ?></h2>
<img src='<?php echo $url.$image; ?>'>
This shows the image but obviously I want the image that is associated with each product. The part that says:
$image = 'toweltest.jpg';
needs to be dynamic but I don't know how to phrase it. Any help appreciated.
Thanks
Rich
Can't tell if we don't know the column name for the image, but it should be something like:
$image = $product->image;
This is actually a guess, since I can't see the rest of the code.

Categories