microsoft office free download for windows 10 64-bit with product key.Claim Your Free 999 Pesos Bonus Today

(@gerwinmorren)

Dear all of you,

Last days i am trying to get an function build into my WordPress website, but i ain’t an PHP developer and i can’t figure out how to get this job done. Thats why i ask for help, what i want to do is the next thing:

– get ‘alt’ text from an image when clicking on it.
– open new page, and automatically fill in the alt attribute in the field.
– fill in contact data and submit form.

Now i got an slider on each product page, but you can’t click on it, to get up the conversion i would love to get an function with an click function, so when a customer would click on the image, it send the customer to an page called /contact-page-product (something that way). But instead of having the customer fill in the product type there selfs i would like to get that automatically fill in.

All product images got the product type etc. in the alt attributes, so i only need to extract the alt attribute and ” copy and past ” it automatically into the next page field.

website product page: https://simbeton.nl/betonplaten/agrarische-betonplaten/
website theme custom build, using form plugin for forms: Contact Form 7

code of the template:

<?php
/**
 * Template Name: Product Template Gerwin
 *
 * Description: A page template that provides a key component of WordPress as a CMS
 * by meeting the need for a carefully crafted introductory page. The front page template
 * in Twenty Twelve consists of a page content area for adding text, images, video --
 * anything you'd like -- followed by front-page-only widgets in one or two columns.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); 
?>    
<style type="text/css">
.table_overflow{ overflow:auto; width:100%;}
.bg_con{ background:#EEEEEE; border:#CCC solid; border-width:1px 0; float:left; width:100%; padding:20px 0; margin:20px 0;}
.w_bg_con{ background:#fff; float:left; width:100%; padding:20px 0; margin:20px 0;}
.g_bg_con{ background:#eee; float:left; width:100%; padding:20px 0; margin:20px 0;}
.b_bot{border-bottom:#CCC solid 1px;}
.gallery img{padding:10px !important; width:100% !important; height:auto; box-sizing:border-box;}
.gallery a{ float:left; width:25%; margin-bottom:30px;}
.contact-btn{ padding:15px 20px; text-decoration:none; color:#FFF; font-size:20px; font-weight:bold; background:#1CA458; float:left; width:100%; box-sizing:border-box; border-radius:8px; text-align:center;}
@media (max-width: 400px){
	.slick-image-slide, .slide-wrap{height:200px !important;}
	.c-imgae{max-width:300px !important;}
}
</style>

<div class="breadcrumb">
	<div class="center">
		<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>
	</div>
</div>

<!--<div class="call_btn">
  <a href="tel:+310547352190"><img src="<?php echo get_template_directory_uri(); ?>/images/call-us-button.png" alt="Call us at +31 (0)547 352 190" /></a>
</div>-->
	<div id="primary" class="site-content">
		<div id="content" role="main">
			<?php 
			global $post;
			while ( have_posts() ) : the_post(); 
				$post_id = $post->ID;
			?>	
				<header class="entry-header">
					<h1 class="entry-title"><?php echo the_title(); ?></h1>
				</header>
			
				<div class="entry-content">
					<?php echo the_content(); ?>
				</div>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
	</div><!-- #primary -->
<?php //get_sidebar( '3' );?>

<div id="secondary" class="widget-area" role="complementary">
<div class="second front-widgets">
<aside id="text-2" class="widget widget_text">
	<h4 class="widget-title">Offerte aanvragen?</h4>
	<div class="textwidget"><p>Bel of mail ons voor een vrijblijvende offerte.</p>
<p>Tel: +31 (0)547 352 190<br>
Fax:+31 (0)548 522 226<br>
<a href="mailto:[email protected]">[email protected]</a></p>
</div>
	</aside>
</div>

<a class="contact-btn" href="https://simbeton.nl/contact/">Contact opnemen</a>
</div>

</div>
</div>
<div class="bg_con">	
<div class="site" style="background:none;">

<?php
// get attahment ids for Carousal img slider
$carousal_attchment_ids = get_field( "carousal_slider_images", $post_id );
$att_id_arr = explode(',', $carousal_attchment_ids);

?>

<div class="wpsisac-slick-carousal-1 wpsisac-slick-carousal design-6 variablewidthv">	
        <?php
        for($i=0; $i<count($att_id_arr); $i++)
        {
			$img_url = wp_get_attachment_url( $att_id_arr[$i] );
		
            ?>
			<div class="slick-image-slide">  
				<img width="275" height="180" src="<?=$img_url?>" class="attachment-medium size-medium wp-post-image c-imgae" alt="<?php get_image_tag( $id, $alt, $title, $align, $size ); ?>
" />
			</div>
            <?
        }
        ?>
</div>
<script type="text/javascript">
		jQuery(document).ready(function(){
		jQuery('.wpsisac-slick-carousal-1').slick({
			dots: true,
			infinite: true,
			arrows: true,
			speed: 300,
			autoplay: true,
			autoplaySpeed: 3000,
			slidesToShow: 4,
			slidesToScroll: 1,
			centerMode: false,
			variableWidth :true,
			responsive: [
    {
      breakpoint: 769,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: false
      }
    },
    {
      breakpoint: 641,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
		 dots: false
      }
    },
    {
      breakpoint: 310,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
		 dots: false
      }
    }
  ]
		});
	});
	</script>
<script type="text/javascript">
		jQuery(document).ready(function(){
		jQuery('.wpsisac-slick-carousal-2').slick({
			dots: false,
			infinite: true,
			arrows: true,
			speed: 300,
			autoplay: true,
			autoplaySpeed: 3000,
			slidesToShow: 4,
			slidesToScroll: 1,
			centerMode: false,
			variableWidth :true,
			responsive: [
    {
      breakpoint: 769,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: false
      }
    },
    {
      breakpoint: 641,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
		 dots: false
      }
    },
    {
      breakpoint: 310,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
		 dots: false
      }
    }
  ]
		});
	});
	</script>

<?php //echo do_shortcode('[slick-carousel-slider variablewidth="true"]'); ?>
</div>
</div>
	<div class="site entry-content">
		<?php echo get_field( "text_content_below_carousal_slider", $post_id ); ?>
	</div>
<div class="bg_con">
<div class="site"  style="background:none;">
<div class="entry-content"><h2>Afmetingen</h2></div>
<div style="height:400px; overflow:auto;">
	<?php echo get_field( "table_data", $post_id ); ?>
</div>	
</div>
</div>
<div class="site"  style="background:#FFF;">
<h3>Afbeeldingen</h3><br/>
<div class="gerwin-slider">
<div class="wpsisac-slick-carousal-2 wpsisac-slick-carousal design-6 variablewidthv gallery gallery-columns-1 gallery-size-large">	
<?php			
		$gallery_attchment_ids = get_field( "image_gallery", $post_id );
		$galimg_id_arr = explode(',', $gallery_attchment_ids);			
		
			for($i=0; $i<count($galimg_id_arr); $i++)
			{
				$big_img_url = wp_get_attachment_url( $galimg_id_arr[$i] );
				$gal_img_url = wp_get_attachment_image_src( $galimg_id_arr[$i], array(180, 100) );
				//print_r( $gal_img_url);
			
		?>
            <!-- children = slides -->
			
			<div class="slick-image-slide"> 
			<dt class="gallery-icon landscape">
				<a href="<?=$big_img_url?>" class="lightbox-enabled"><img src="<?=$gal_img_url[0]?>" class="attachment-thumbnail size-thumbnail fancybox" id="fancybox"alt="<?=$post->post_title?>" width="180" height="100"></a>
			</dt>
			</div>
			
		<?
		}
		?>
</div>
</div>
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div>
</div>
<script>
			$(function() {
				var demo1 = $("#demo1").slippry({
					 transition: 'fade',
					// useCSS: true,
					 speed: 1000,
					// pause: 3000,
					 auto: true,
					 preload: 'visible',
					// autoHover: false
				});

				
			});a
		</script>
<div class="g_bg_con  entry-content">
<div class="site"  style="background:none;">	
<?php echo get_field( "referenties", $post_id ); ?>
</div>
</div>
<div class="w_bg_con  entry-content"  style="border-bottom:#eee solid 0px;">
<div class="site"  style="background:none;">
<?php echo get_field( "contact_form_text", $post_id ); ?>
<?php 
$cf_code = get_field( "cform_code", $post_id );
echo do_shortcode($cf_code);?>
</div>
</div>
<?php get_footer(); ?>

Viewing 6 replies - 1 through 6 (of 6 total)

Pieter Bos
(@senlin)

8 years ago

With most form solutions you can use dynamic data. Then the whole process as you described is not necessary.

I once created a job board with Formidable Forms Pro, where the unique Job-Code is a combination of post-ID and another field that the client adds and this Job Code is automatically added to the form.

You can see it in action here (click on the Apply button).
Joey
(@leglesslizard)

8 years ago
Hi,

There are a few ways you could approach this:
– pure javascript solution
– inserting a form for each image and having that post the data to a specific page
– add a link around each image passing in the query of the image alt text

I think the simplest will be the 3rd option. Add an anchor tag around each image as follows:
<a href="path_to_contact-page-product?img_alt=<?php get_image_tag( $id, $alt, $title, $align, $size ); ?>"><img></a>

Then on the contact-page-product you will have access to the alt text via the $_GET array ($_GET[‘img_alt’]) and can place that into the field as required (I assume as a hidden input).

I hope that makes sense,
Joey
- This reply was modified 8 years ago by Joey.
Thread Starter gerwinmorren
(@gerwinmorren)

8 years ago
@leglesslizard,

Thanks for helping me, when i now click on the image it does send me to the contact form page, but it doesnt get the alt text.

The code is use for this image slider is:
```
<div class="wpsisac-slick-carousal-1 wpsisac-slick-carousal design-6 variablewidthv">	
        <?php
        for($i=0; $i<count($att_id_arr); $i++)
        {
			$img_url = wp_get_attachment_url( $att_id_arr[$i] );
		
            ?>
			<div class="slick-image-slide">  
				<a href="/offerte-aanvraag-product?img_alt=<?php get_image_tag( $id, $alt, $title, $align, $size ); ?>"><img width="275" height="180" src="<?=$img_url?>" class="attachment-medium size-medium wp-post-image c-imgae" alt="<?php echo get_post_meta($att_id_arr[$i], '_wp_attachment_image_alt', true);?>"/></a>
			</div>
            <?
        }
        ?>
</div>
```
when i click on the image it does send me to the page, but it doesn’t get the image alt text. The link looks like this when i click on it:

https://simbeton.nl/offerte-aanvraag-product/?img_alt=

Also i dont know how to insert the PHP code
$_GET array ($_GET[‘img_alt’])
into the W7 form contact page, i read something about creating a shortcode for this PHP code and insert it that way, but i am also not sure how.

Thanks for helping, and sorry for my bad englisch.

Greetings,
Gerwin
Moderator bcworkz
(@bcworkz)

8 years ago

There’s no value after img_alt=, so the link will not work. You need to assign proper values to the parameters passed to get_image_tag().

Shortcodes are not processed in CF7, you need to hook a filter and run content through do_shortcode(). What you think is PHP, the $_GET array ($_GET[‘img_alt’]), is not all PHP, only $_GET['img_alt'] is what you want. Also pay attention to quote styles when copy/pasting. Only straight style works in code, the “curly quotes” used by this forum will cause syntax errors.

Your shortcode will need to output the entire input field because shortcodes in HTML tags or CF7 fields are ignored. You then need to do the entire thing again, only differently with the email template, this time the data comes from $_POST[‘field-name-here’].

Information on making shortcodes is in the Shortcode API. Information on hooking filters is part of the Plugin Handbook.

Thread Starter gerwinmorren
(@gerwinmorren)

8 years ago

Still no solution, i am a really beginner with php and javascript. I think i am doing some things wrong. Thanks for helping all of your

Moderator bcworkz
(@bcworkz)

7 years, 12 months ago

You first need the alt content to occur after the link /offerte-aanvraag-product/?img_alt=

It turns out get_image_tag() doesn’t do what Joey thought it did, it will not work for your needs. Instead, replace that with echo esc_url( get_post_meta( $att_id_arr[$i], '_wp_attachment_image_alt', true )); Keep the <?php ?> tags.

Once your links include the alt attribute text correctly, we need to figure out how to add it to a CF7 field. I had thought there would be a filter where shortcodes could be processed, but that’s not the case, so shortcodes are out. It appears to be a simple thing, you just need to coordinate the tag name with the “img_alt” URL parameter. See the CF7 Docs.