How do i get all images from all subpages using ''art'' template and then filter them by tags

[picarica]

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? 

[elabx]

Is this meant to work on the frontend templates or on the processwire admin?

 

[picarica]

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

[elabx]

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
}

 

[pideluxe]

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. 

[picarica]

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

[elabx]

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);
  }
}

 

[picarica]

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

[elabx]

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

[picarica]

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

[elabx]

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