Jump to content

Image custom fields as selectors


Rossie
 Share

Recommended Posts

Hi Everyone,

I wish to display a gallery of images from multiple pages on the site.  These images have custom fields created through page reference called 'furniture_list_type'.  Each image now has a radio button which has been selected.

In  the example code below all images appear from the "gallery20", however the selector  "gallery20.furniture_list_type=3390" does not have any effect.  "3390" is the id of the page reference "chair" selected through the page reference.  I wish only images selected as chair to show.

Hope someone can help with this.

 

Thanks,

 

Calum

 

$imagePages = $pages->find("template=makers-child, gallery20.furniture_list_type=3390") ;  
            
    

foreach($imagePages as $p) {

    echo "<ul>";

    foreach($p->gallery20 as $image) {

        echo "<li><img src='{$image->url}'>{$image->furniture_list_type}</li>";

    }

    echo "</ul>";

    
}
Link to comment
Share on other sites

Welcome to the PW forums @Rossie!

This part...

8 hours ago, Rossie said:

$imagePages = $pages->find("template=makers-child, gallery20.furniture_list_type=3390") ;

...finds all the pages that contain at least one image in the gallery20 field that has furniture_list_type=3390 in the image's custom fields.

But those pages can also contain images that don't have furniture_list_type=3390 in their custom fields. So if you only want to output certain images from the gallery20 field you need to use a WireArray find() selector to get those images.

Your code would look something like this:

// Find the pages that have at least one image in the gallery20 field with furniture_list_type=3390
$imagePages = $pages->find("template=makers-child, gallery20.furniture_list_type=3390") ;

// For each of those pages...
foreach($imagePages as $p) {
	// Find the images in the gallery20 field with furniture_list_type=3390
	$chair_images = $p->gallery20->find("furniture_list_type=3390");
	echo "<ul>";
	// Loop over the chair images
	foreach($chair_images as $image) {
		echo "<li><img src='{$image->url}'>{$image->furniture_list_type}</li>";
	}
	echo "</ul>";
}

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By eelkenet
      After enabling WebP support you may notice it can take a long time for ProcessWire to create WebP copies of all images and their variations.
      For instance, on a site I work on (with over 10k images), it was taking about 1 second per image, ie. more than 3 hours in total.. 🥱
      If you are comfortable around the command-line, you can use the cwebp program and this bash script to speed things up drastically.
      I have built upon this script and got things to work in combination with xargs and find, making it rather powerful for PW's purposes.
      1. Save this script as 'convert-webp.sh' (or download the Gist from Github), and follow instructions
      ######################################################################################################### # # Fast Recursive Images to WebP converter # Customized for ProcessWire CMS/CMF <https://www.processwire.com> # # Author: Eelke Feenstra <dev@eelke.net> # Version: 001 # Based upon: https://github.com/onadrog/bash-webp-converter # # Quick & dirty script to add webp versions to all PNG / JPG / JPEG files inside your PW assets folder # # 1. Set this script to executable: # $ chmod +x convert-webp.sh # # 2. Check if cwebp is installed: # $ cwebp -version # If it is not, install: # $ brew install webp # Or follow instructions https://developers.google.com/speed/webp/download # and change $executable to cwebp's full path # # 3. Run the script directly on a folder: # $ ./convert-webp.sh /path/to/your/folder # ######################################################################################################### # Configuration executable="cwebp" # update this to reflect your installation! quality=90 # change to desired WebP quality ######################################################################################################### converted=0 skipped=0 echo "Entering $1" for file in $1/* do name="${file%.*}" echo "FILE: $file" echo "NAME: $name" # Skip the folder itself.. if [ "$name" = "./." ]; then echo "SKIP: $name" continue; fi if [[ $(file --mime-type -b $name.webp) == image/webp ]]; then echo "FOUND: $name.webp, skipping.." skipped=$((skipped+1)) elif [[ $(file --mime-type -b $file) == image/*g ]]; then echo "NOT FOUND: $name.webp" newfile(){ echo "$file" | sed -r 's/(\.[a-z0-9]*$)/.webp/' } $executable -q $quality "$file" -short -o "$(newfile)" converted=$((converted+1)) fi done echo "Converted $converted, Skipped $skipped" 2. Run to create webp versions of all jpg/jpeg/png images in a given folder (for example the site's homepage)
      $ ./convert-webp.sh /path/to/processwire/site/assets/files/1 3. And in order to create WebP copies of ALL images inside the /site/assets/files folder, you can run this script. It searches for all directories inside the files directory, and passes these to the convert-webp.sh script using xargs.
      $ find /path/to/processwire/site/assets/files -maxdepth 2 -type d | xargs -I '{}' ./convert-webp.sh '{}'  
      Tested both on MacOS 12 and Debian
       
    • By quickjeff
      Hi Everyone, 
      As many of you know, iPhone photos save in .heic unless the user changes the settings in their phone. 
      We have built a web app on top of processwire in which a user can save images from their phone. 
      The issue we are having is that there seems to be an error when uploading and saving. 
      The .heic files won't save and processwire throws an error. The environment is LAMP (Bitnami and all libraries have been installed to support this.) 
      Checking to see if someone has also encountered this here and how they solved it.
      Thanks. 
    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

       
      https://github.com/Toutouwai/InputfieldSelectImages
      https://processwire.com/modules/inputfield-select-images/
    • By kalimati
      I have a template for courses for a website on training.  Within the template I use a multiselect page reference field to define attributes associated with the course. While rendering the page I want search for a combination of attributes -in the multiselect page reference field - presence and absence of some of them -- and perform an operation accordingly. How do I search for a combination of values in the multiselect page reference field? Thanks.
      Here is the pseudo code:
      if ($page->pageReferenceField->has("title=one|two") && $page->pageReferenceField->doesnothave("title=three")) { echo ...; }  
    • By sebr
      Hi
      On Processwire 3.0.179
      Create a fieldtype image named "img_test" with option "Use custom fields" On the template "field-img_text" add a title field On a repeater matrix, add a new type with the field "img_test" Add the repeater matrix on basic-page Create a new page and add an image in the repeater matrix, in the field img_test and fill in the title field from the image field Save and reload : the title field from img_test in the repeater matrix is empty In older Processwire versions, the first time I saved this custom fields were not saved, but on the second one, yes.
      Any idea about it ? A bug or a bad setting ?
×
×
  • Create New...