Show image in repeater without placeholder

Ask the community
, ,
1

Hi There,
i am facing a problem i cannot solve; i have a repeater with 3 fields:

  • 2 text labels
  • 1 image

It is connected to a database of user comments where users can store:

  • their name
  • their comment
  • an image attached to the comment

The repeater of course contains a placeholder image which, after user’s submit, shows the image the user has just uploaded and that has been stored in the comments database.
The fact is: some users may want to attach an image, but some user may not… and at the moment, if the user does not load an image, the placeholder is shown.
What i am trying to achieve is that the image is visible in the repeater only IF the it is written in the database, thus being a submitted image and not the placeholder. If the user only adds a text comment, the image placeholder is not shown in the repeater.

Anyone has any idea?
Thank you in advance.

2

Disconnect the image from the dataset on the editor, and use this code:

$w.onReady(() => {
$w("#image1").hide();
$w("#dataset1").onReady(() => {
$w("#repeater1").onItemReady(($i, iData) => {
if(iData.image){
	$i("#image1").src = iData.image;
	$i("#image1").show();
}
})
})
})
3

Hi JD, thank you for answering. It does not work… in the repeater the image does not appear even though it is present in the database

782×397 34.9 KB

and it reappears when i click on the post to open the dynamic single page:

413×555 40.1 KB

THis is to show how the repeater element is organized, in case it may help:

790×410 58 KB

the blue image on the right is #image1 the placeholder, the dataset is called #userPosts

4

@ademontis Post your code

5

@jonatandor35
I use a multistate box where i use 1 state for the text only posts, and 1 state for the image+text posts:

Code for the Text only post:

export function button3_click(event) {

let numberOfLikes = 0
let toInsert = {
postCreatorId: $w('#dataset1').getCurrentItem()._id, //userprofile dataset
postCreatorImage: $w('#dataset1').getCurrentItem().profileImage,
postCreator: $w('#dataset1').getCurrentItem().fullName,  
post: $w('#dataset6').getCurrentItem().post,  //userposts write dataset
postTitle: $w('#dataset6').getCurrentItem().postTitle,
_createdDate: $w('#dataset6').getCurrentItem()._createdDate,  
numberOfLikes : numberOfLikes,
numberOfComments : 0,
numberOfViews : 0,
numberOfShares: 0
}

wixData.insert("userPosts", toInsert) //database to store the posts

.then( (results) => {
let item = results; 


$w("#userPosts").refresh();
$w("#textBox1").value = " "; //post field
$w("#input1").value= " "; //title field

}) ;
}

Code for the Image + Text post:

export async function button6_click(event) {
 
let numberOfLikes = 0
let toInsert = {
postCreatorId: $w('#dataset1').getCurrentItem()._id, //userprofile dataset
postCreatorImage: $w('#dataset1').getCurrentItem().profileImage,
postCreator: $w('#dataset1').getCurrentItem().fullName,  
post: $w('#dataset6').getCurrentItem().post,  //userposts write dataset
postTitle: $w('#dataset6').getCurrentItem().postTitle,
postImage: await uploadFile(),
_createdDate: $w('#dataset6').getCurrentItem()._createdDate,  
numberOfLikes : numberOfLikes,
numberOfComments : 0,
numberOfViews : 0,
numberOfShares: 0
}

wixData.insert("userPosts", toInsert)

.then( (results) => {
let item = results; 

$w("#userPosts").refresh();
$w("#textBox2").value = " ";
$w("#input2").value= " ";
$w("#thumbImage").src = "";
$w('#button5').hide();

}) ; 
}

function uploadFile(){
return $w('#uploadButton2').startUpload().then(r => r.url);
}

export function button5_click(event) { //refresh image placeholder with uploaded file
 if($w("#uploadButton2").value.length > 0) {
        $w("#uploadButton2").startUpload()
      .then( (uploadedFile) => {
            $w("#thumbImage").src = uploadedFile.url;
          })
      .catch( (uploadError) => {
            console.log("File upload error: " + uploadError.errorCode);
        console.log(uploadError.errorDescription);
      });
  } 
 else {
      } 
}

export function uploadButton2_change(event) {
 if($w('#uploadButton2').value.length > 0) {
   $w('#button5').show(); //enables image update button
 
  }
 else {
      $w('#button5').hide();
     }
}

I hope this helps.

6

@ademontis I don’t see any repeater in your code.

7

@jonatandor35 The repeater is populated on the page, i just have changed the dataset name in your code:

$w.onReady(() => {
$w("#image1").hide();
$w("#userPosts").onReady(() => {
$w("#repeater1").onItemReady(($i, iData) => {
if(iData.image){
    $i("#image1").src = iData.image;
    $i("#image1").show();
}
})
})
})

The result is that it hides all the images in all the repeater elements, even in posts that have an image,
Anyway you pointed me into the right direction…
I understtod that i had to exit the repeater structure, and i modified your code this way.

$w.onReady( () => {
        $w('#repeater1').onItemReady( ($item, item) => {
 if (!item.postImage) {
        $item('#image1').collapse();
    }
 })

Now it works.

8

@ademontis my code should work as well (and the problem with your code is that the visitor might see the placeholder for a second if it takes time to get the data).