This topic is: not resolved

This topic contains 30 replies, has 2 voices, and was last updated by  Tareq Hasan 5 years, 5 months ago.

Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #10268

    Tareq Hasan
    Keymaster
    Post count: 2831

    I said to do this:
    [html]
    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div class="wpuf-form-add">
    <div id="properform"></div>
    </div>
    [/html]

    #10274

    hatchmedia
    Participant
    Post count: 116

    Ok, so I tried like you asked with varying results as follows:

    1. I tried the first idea of pointing to the forms in external HTML files.

    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div class="wpuf-form-add">
       <div id="properform"></div>
    </div>
    <script type="text/javascript">// <![CDATA[
    	jQuery(function() 
    	{
    		jQuery('#petselector').change(function()
    		{
    jQuery('#properform').empty();
    			form = jQuery(this).val();
    			if (form == 'dog' || form == 'cat' || form == 'farm' || form == 'other')
    {
    jQuery("#properform").load("http://www.adoptapet.ie/forms/"+form+".html");
    }
    		});
    	});
    // ]]>
    </script>

    This would show the loading gif, but as I uploaded, I received an alert simply saying ‘Undefined'. When I clicked ok, nothing happened except the message disappearing.

    2. I then tried the code by pulling the form from within a WordPress page. I have a template set up to pull only the_content(), called Only_Content. It also has wp_head and wp_footer on it.

    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div class="wpuf-form-add">
       <div id="properform"></div>
    </div>
    <script type="text/javascript">// <![CDATA[
    	jQuery(function() 
    	{
    		jQuery('#petselector').change(function()
    		{
    jQuery('#properform').empty();
    			form = jQuery(this).val();
    if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs");
    if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats");
    if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms");
    if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others");
    		});
    	});
    // ]]>
    </script>

    If I pull a form using the Only_Content template, I get the same undefined message and nothing happens. If I pull a form using the default template, the whole page appears (ie, header, nav bar, logo, form, sidebar, footer, etc), the form gives the undefined message but DOES upload.

    3. The final test was to add a unique ID to each of the forms and try pull those divs individually from the pages.

    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div class="wpuf-form-add">
       <div id="properform"></div>
    </div>
    <script type="text/javascript">// <![CDATA[
    	jQuery(function() 
    	{
    		jQuery('#petselector').change(function()
    		{
    jQuery('#properform').empty();
    			form = jQuery(this).val();
    if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs #dog_form");
    if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats #cat_form");
    if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms #farm_form");
    if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others #other_form");
    		});
    	});
    // ]]>
    </script>

    This pulled just the form in, but when I clicked on Select Image, the browse window would not open and a # symbol would be added to the end of the URL, ie http://www.adoptapet.ie/rescues/adminhatch/submit/#

    It just looks like the jquery I add to the submit page is conflicting somewhere against the plugin. The closest option at the moment seems to be option two as it does upload, it just causes the Undefined error message and brings in the whole page template!

    Anything else you can think of?

    By the way, I must say I really do appreciate your help and I really hope we can get to the bottom of this!!

    Damien

    #12632

    hatchmedia
    Participant
    Post count: 116

    Hi Tareq,

    I am still really struggling with this. Is there anything else that can be done to allow for multiple forms on one page?

    Cheers

    Damien

    #12644

    Tareq Hasan
    Keymaster
    Post count: 2831

    As I haven't tried this for real, can't surely say what is missing here. Sorry!

    Can you give me access to your site?

    #12692

    hatchmedia
    Participant
    Post count: 116
    This reply has been marked as private.
    #12704

    Tareq Hasan
    Keymaster
    Post count: 2831

    I've updated your form page and the form works, although the image upload is not working!

    #12705

    hatchmedia
    Participant
    Post count: 116

    Thanks for taking a look tareq.

    Is there a way to get the image upload working? This would be one of the most important fields, haha!

    Is there anything I could look at that might help?

    Thanks again
    Damien

    #12730

    Tareq Hasan
    Keymaster
    Post count: 2831

    The image uploader is already loaded, but as the buttons aren't yet and load via ajax, the event binding is not working. You've to bind the buttons with image uploader again.

    See how the new WPUF_Uploader() js is called at /class/render-form.php and try to mimic that.

    #12817

    hatchmedia
    Participant
    Post count: 116

    Thanks, however, I'm not sure how to do that myself. Its a bit outside my scope! 🙂

    I did come up with another idea however. Would removing the Featured Image field from the form and only using the Extra Image field work? I would then replace code on the side to pull the first image from the Images field, rather than using the Featured Image.

    Would this work and if so, what would be the best way to implement it?

    #12821

    hatchmedia
    Participant
    Post count: 116

    Ok, I might be getting somewhere. I have removed all the Featured Image fields and am now using this code in the submit form:

    <Select id="petselector">
       <option value="empty">Select a Pet</option>
       <option value="dog">Submit a Dog</option>
       <option value="cat">Submit a Cat</option>
       <option value="farm">Submit a Farm Animal</option>
       <option value="other">Submit an Other Type</option>
    </Select>
    <div id="dog" class="forms" style="display:none"><h2>Submit a Dog</h2> [wpuf_form id="1258"]</div>
    <div id="cat" class="forms" style="display:none"><h2>Submit a Cat</h2> [wpuf_form id="1267"]</div>
    <div id="farm" class="forms" style="display:none"><h2>Submit a Farm Animal</h2>[wpuf_form id="1274"]</div>
    <div id="other" class="forms" style="display:none"><h2>Submit another Type of pet</h2>[wpuf_form id="1275"]</div>
    
    <script type="text/javascript">
    jQuery(function() {
           jQuery('#petselector').change(function(){
                jQuery('.forms').hide();
                jQuery('#' + jQuery(this).val()).show();
            });
        });
    </script>

    This is changing between my forms as I need it and it is also submitting the posts which is a huge step forward.

    Now, the next thing is to just get the image to display in my results/posts. I have added the following to my single.php as a start:

    <div id="featured">
    <?php 
        $images_dogs = get_post_meta( $post->ID, 'images_dogs');
        $images_cats = get_post_meta( $post->ID, 'images_cats');
        $images_farms = get_post_meta( $post->ID, 'images_farms');
        $images_others = get_post_meta( $post->ID, 'images_others');
    
        // Image selection and display:
    
        //display first image
        if (count($images_dogs) > 0) { // make sure at least one image exists
            $img_d = $images_dogs[0]; // first image
            echo "<img src='$img_d' height='400' width='400' /> ";
        } elseif (count($images_cats) > 0) {
            $img_c = $images_cats[0]; // first image
            echo "<img src='$img_c' height='400' width='400' /> ";
        } elseif (count($images_farms) > 0) {
            $img_f = $images_farms[0]; // first image
            echo "<img src='$img_f' height='400' width='400' /> ";
        } elseif (count($images_others) > 0) {
            $img_o = $images_others[0]; // first image
            echo "<img src='$img_o' height='400' width='400' /> ";
        } else {
            placeholder; // to add a placeholder image
        } 
    
    ?></div>

    At the moment, this is simply pulling in the image id into the img src= section. How can I get the actual source of the image?

    Nearly there! 🙂

    #12828

    Tareq Hasan
    Keymaster
    Post count: 2831

    Those are the attachment id's. Use these functions:
    [php]
    $thumb = wp_get_attachment_image( $attachment_id, ‘thumbnail' ); // returns image with html tag
    $full_size = wp_get_attachment_url( $attachment_id ); // the full image url
    [/php]

    #12878

    hatchmedia
    Participant
    Post count: 116

    Hey Tareq,

    I just wanted to know what would be the best way to add that to the code below. I have:

    <div id="featured">
    <?php 
        $images_dogs = get_post_meta( $post->ID, 'images_dogs');
    	$images_cats = get_post_meta( $post->ID, 'images_cats');
    	$images_farms = get_post_meta( $post->ID, 'images_farms');
    	$images_others = get_post_meta( $post->ID, 'images_others');
    	$thumb = wp_get_attachment_image( $attachment_id, 'thumbnail' ); // returns image with html tag
    	$full_size = wp_get_attachment_url( $attachment_id ); // the full image url
    
        // Image selection and display:
    	
        //display first image
        if (count($images_dogs ) > 0) { // make sure at least one image exists
            $img_d = $images_dogs[0]; // first image
            echo "<img src='$img_d' height='400' width='400' /> ";
        } elseif (count($images_cats) > 0) {
            $img_c = $images_cats[0]; // first image
            echo "<img src='$img_c' height='400' width='400' /> ";
        } elseif (count($images_farms) > 0) {
            $img_f = $images_farms[0]; // first image
           echo "<img src='$img_f' height='400' width='400' /> ";
        } elseif (count($images_others) > 0) {
            $img_o = $images_others[0]; // first image
            echo "<img src='$img_o' height='400' width='400' /> ";
        } else {
            echo ‘placeholder'; // possibly display a placeholder image?
        } 
    
    ?></div>

    Where do I include the $thumb and $full_size in the Display First Image code?

    Cheers

    #12883

    Tareq Hasan
    Keymaster
    Post count: 2831

    [php]
    <?php
    $images_dogs = get_post_meta( $post->ID, ‘images_dogs', true);
    $images_cats = get_post_meta( $post->ID, ‘images_cats', true);
    $images_farms = get_post_meta( $post->ID, ‘images_farms', true);
    $images_others = get_post_meta( $post->ID, ‘images_others', true);

    //display first image
    if ($images_dogs) { // make sure at least one image exists
    $thumb = wp_get_attachment_image( $images_dogs, ‘thumbnail' );
    $full_size = wp_get_attachment_url( $images_dogs );

    printf( ‘<a href="%s">%s</a>', $full_size, $thumb );
    } elseif ($images_cats) {
    $thumb = wp_get_attachment_image( $images_cats, ‘thumbnail' );
    $full_size = wp_get_attachment_url( $images_cats );

    printf( ‘<a href="%s">%s</a>', $full_size, $thumb );
    } elseif ($images_farms) {
    $thumb = wp_get_attachment_image( $images_farms, ‘thumbnail' );
    $full_size = wp_get_attachment_url( $images_farms );

    printf( ‘<a href="%s">%s</a>', $full_size, $thumb );;
    } elseif ($images_others) {
    $thumb = wp_get_attachment_image( $images_others, ‘thumbnail' );
    $full_size = wp_get_attachment_url( $images_others );

    printf( ‘<a href="%s">%s</a>', $full_size, $thumb );
    } else {
    echo ‘placeholder'; // possibly display a placeholder image?
    }
    [/php]

    #12885

    hatchmedia
    Participant
    Post count: 116

    You know what? I think that has it!!

    I just need to fill this in anywhere else the featured image appears, but should be good then! I will mark this as resolved once I have swapped everything

    Thanks Tareq!!

    🙂

    #13033

    hatchmedia
    Participant
    Post count: 116

    Hey Tareq!

    By the looks of things, everything seems to be working now for me!! Using just the image uploaded instead of the featured image has done the trick for the multiple forms on one page.

    I have also got the images displaying on all the other pages (so in the users' account, single posts, results pages, etc). The only thing is that the pictures are not fitting as nicely as they had been when using the thumbnail from the featured image. They used to crop the image, now they are stretching them to fit. Any idea why this might be happening?

    Cheers

    Damien

    – by the looks of things, I had left out the thumbnail image_size

Viewing 15 posts - 16 through 30 (of 31 total)

The topic ‘User Post’ is closed to new replies.