picarica Posted June 10, 2020 Share Posted June 10, 2020 Hello so i have very specific kind of problem I can find all images on all subpages and put them in array the problem lays when i need to on click of a link show only images that has one or more clicked tags, is that even possible? Hide and show images on click with php I was thinking maybe add the tags to img somehow and then hide and show them with javascript but i dont know how to do that or is there a easier way? Link to comment Share on other sites More sharing options...
elabx Posted June 10, 2020 Share Posted June 10, 2020 Is this meant to work on the frontend templates or on the processwire admin? Link to comment Share on other sites More sharing options...
picarica Posted June 10, 2020 Author Share Posted June 10, 2020 4 hours ago, elabx said: Is this meant to work on the frontend templates or on the processwire admin? Frontend, user can filter out images based on their needs and taste Link to comment Share on other sites More sharing options...
elabx Posted June 10, 2020 Share Posted June 10, 2020 The image field have a builtin tag field, activate it on the field config. Well you could approach this by setting a form with a select input with the possible categories, then on the backend: <?php //form submits to domain.com/search/?tag=sometag $tag = $input->get->text('tag'); //All pages with image field and certain tag $found = $pages->find("images.tags~=$tag"); foreach($found as $p){ $imagesWithTag = $p->images->findTag($tag); //do your stuff } 2 Link to comment Share on other sites More sharing options...
pideluxe Posted June 11, 2020 Share Posted June 11, 2020 You could use a masonry-like component, f.e. Filter from UI-Kit (https://getuikit.com/docs/filter). Place the tags from the images in the filter-tags. For creating the filter elements, you could create an array of unique tags and then loop over the array for creating the selectors. 1 Link to comment Share on other sites More sharing options...
picarica Posted June 11, 2020 Author Share Posted June 11, 2020 22 hours ago, elabx said: The image field have a builtin tag field, activate it on the field config. Well you could approach this by setting a form with a select input with the possible categories, then on the backend: <?php //form submits to domain.com/search/?tag=sometag $tag = $input->get->text('tag'); //All pages with image field and certain tag $found = $pages->find("images.tags~=$tag"); foreach($found as $p){ $imagesWithTag = $p->images->findTag($tag); //do your stuff } hello this looks very promising so i tried it, before i inputed all images like this $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); foreach ($pa as $p) { foreach($p->images as $image) { $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening'=>'medium'); $thumb = $image->size(400, 300, $options); $large = $image->size(1200, 0, $options); echo "<div class='col-4'>"; echo "<span class='image fit'>"; echo "<a href='$large->url'>"; echo "<img src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } } and i inputted your code with my code $tag = $input->get->text('tag'); $found = $pages->find("images.tags~=$tag"); foreach($found as $image){ $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening' => 'medium'); #$thumb = $image->size(400, 300, $options); #$large = $image->size(1200, 0, $options); echo "<div class='col-4'>"; echo "<span class='image fit'>"; echo "<a href='$large->url'>"; echo "<img src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } and it doesnt seems to work, i commented out #thumb and #large because i was getting Quote Method Page::size does not exist or is not callable in this context but it is not working? my idea is that maybe the find function is not working properly did i forgot to mentioned that i have all images on different pages by that i mean i have Home (main page) - subpage - images - subpage - images so i need to search all subpages that has the specific tag Link to comment Share on other sites More sharing options...
elabx Posted June 11, 2020 Share Posted June 11, 2020 23 minutes ago, picarica said: and it doesnt seems to work, i commented out #thumb and #large because i was getting Are you sure the $input->get variable is set? Is this code executing on form submission? Otherwise, it won't work because the $input->get->tag variable won't be filled. Second on this loop: foreach($found as $image){ ... } $image is not an image object, it's a page object, $found is an array (more precisely, a PageArray) of pages. Check again this code: foreach($found as $p){ $imagesWithTag = $p->images->findTag($tag); foreach($imagesWithTag as $image){ //this is now possible $image->size(100,100); } } 1 Link to comment Share on other sites More sharing options...
picarica Posted June 12, 2020 Author Share Posted June 12, 2020 17 hours ago, elabx said: Are you sure the $input->get variable is set? Is this code executing on form submission? Otherwise, it won't work because the $input->get->tag variable won't be filled. Second on this loop: foreach($found as $image){ ... } $image is not an image object, it's a page object, $found is an array (more precisely, a PageArray) of pages. Check again this code: foreach($found as $p){ $imagesWithTag = $p->images->findTag($tag); foreach($imagesWithTag as $image){ //this is now possible $image->size(100,100); } } thank you so much for fixing my error it works flawlessy now. eveyrthing else to do is now make that if no tags are select show all images which i tried like this if ($input->urlSegment1 == 'tag'){ $tag = $input->get->text('tag'); $found = $pages->find("images.tags~=$tag"); foreach($found as $p){ $imagesWithTag = $p->images->findTag($tag); foreach($imagesWithTag as $image){ $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening' => 'medium'); $thumb = $image->size(400, 300, $options); $large = $image->size(1200, 0, $options); echo "<div class='col-4'>"; echo "<span class='image fit'>"; echo "<a href='$large->url'>"; echo "<img src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } } } else { $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); foreach ($pa as $p) { foreach($p->images as $image) { $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening'=>'medium'); $thumb = $image->size(400, 300, $options); $large = $image->size(1200, 0, $options); echo "<div class='col-4'>"; echo "<span class='image fit'>"; echo "<a href='$large->url'>"; echo "<img src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } } } but it didnt worked, now it show always shole gallery my second objective it to somehow select one or more tags and show only images having those 2 tags i already have images that has two or more tags, so i only need to implement it in php Thank you so much Link to comment Share on other sites More sharing options...
elabx Posted June 12, 2020 Share Posted June 12, 2020 On your first if statement you are checking for a URL segment, not a GET variable. Should be like this for GET variables: if($input->get->tag){ // find with tag } else{ //find all } To select one or more tags you basically need to submit a form with the tag selection using a select field with multiple attribute enabled. Or if you need something more fancy, check selectize: https://codepen.io/i_cant_rap/pen/qNdXyj Link to comment Share on other sites More sharing options...
picarica Posted June 13, 2020 Author Share Posted June 13, 2020 On 6/12/2020 at 4:16 PM, elabx said: On your first if statement you are checking for a URL segment, not a GET variable. Should be like this for GET variables: if($input->get->tag){ // find with tag } else{ //find all } To select one or more tags you basically need to submit a form with the tag selection using a select field with multiple attribute enabled. Or if you need something more fancy, check selectize: https://codepen.io/i_cant_rap/pen/qNdXyj hello again thanks for the idea, i ended up using selectize and it's pretty good but i got stuck on 2 main issues first issue is that when i select one or more tags like this and i get nice url like this it only respects first result, i have it coded like this, so far and not sure how to make it work $alltags = array(); // container $use_urlsegments = false; // find all pages that have images with tags $parray = $pages->find("template=basic-page|art_gallery, images.tags!=''"); // loop pages found and collect tags from images foreach($parray as $p) { // find all images that have no empty tags, yeah you can // also use find on Pagefiles array! $images = $p->images->find("tags!=''"); // loop them and add tags to array foreach($images as $im) { $tags = $im->tags; // convert "," and "|" to space and create array using explode if(strpos($tags, ',') !== false) $tags = str_replace(',', ' ', $tags); if(strpos($tags, '|') !== false) $tags = str_replace('|', ' ', $tags); $tags = explode(' ', $tags); // convert tag value to a page name using beautifyer, ü => ue, ö => oe // since special chars are not allowed in PW urls foreach($tags as $tag) { $alltags[$sanitizer->pageName($tag, Sanitizer::translate)] = $tag; } } } echo "<form>"; echo "<label for='select-tag'>Tags:</label>"; echo "<select id='select-tag demo-category' required multiple class='demo-default' placeholder='Select a person...' name='tag'>"; foreach(array_unique($alltags) as $key => $tag) { if($use_urlsegments) { echo "<li><a href='{$page->url}$key'>$tag</a></li>"; } else { /* echo "<li><a href='{$page->url}?tag=$tag'>$tag</a></li>"; */ echo "<option value='$tag'>$tag</option>"; } } echo "</select>"; echo "<div>"; echo "<button style='width:100%;margin-top:1em;'type='submit'>Submit</button>"; echo "</div>"; echo "</form>"; also this is setup i have on selectize $(function() { $('select').selectize({ plugins: ['remove_button'], delimiter: ',', persist: false, create: true, sortField: 'text', allowEmptyOption: true, sortField: { field: 'text', direction: 'asc' } }); }); so not sure how to filter out by one or more tags the second issue is that when i select tag in the form, it dissapears after refresh, i am not sure how to store is somehow i researched html5 local storage but couldnt find a way for it to help me, so i wanted to know if ican somehow, search all url, find all keyword between tags= and & and input them back into the form could that be somehow possible thank you so much for help Link to comment Share on other sites More sharing options...
elabx Posted June 14, 2020 Share Posted June 14, 2020 9 hours ago, picarica said: it only respects first result, i have it coded like this, so far and not sure how to make it work Set the form's select field's name to "tag[]" so the inputs are put in an array. Then $input->get->tag should return an array. I'm still not very sure in your code where you are doing the search for tags but you seem to be very close ? As for the selectize, "on load" values: https://github.com/selectize/selectize.js/issues/236#issuecomment-73763003 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now