Jump to content

Select Options for Custom Image fields


maxf5
 Share

Recommended Posts

Hi,

i am trying to add a select options - field to one of my images fields. Usually you create a new template "field-FIELDNAME" and add the custom fields for the images there.
I have a textarea field which is visible, but the options field isn't there. Can you help?

Ryan has select options in his example:
https://processwire.com/blog/posts/pw-3.0.142/

screen_shot_2019-10-11_at_11_52_52_am.1024x0-is.thumb.png.90d95f83d474f8ef49972de7d3df285e.png

 

 

Link to comment
Share on other sites

On the same page you've linked:

https://processwire.com/blog/posts/pw-3.0.142/#how-to-setup-and-use-custom-fields-in-file-image-fields

basically the "trick" is to use a template without a file named matching the name of your image/s field (eg. field-images where "images" is the name of your image field).
Ryan explains it way better in the post btw.

  • Like 1
Link to comment
Share on other sites

I know 😉 i have a template (without file) called "field-hero" (for my hero images-field).
In that template there is a textarea field and an options field (singlechoice, radio):

grafik.png.06d893569903eab8be0669eb351054d1.png

.. and only the textfield is displayed:

grafik.thumb.png.a964ae35b3525ca05d5196ed5e7595ac.png

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 nabo
      Hello
      it would be nice if it could be possible to force a unique (or relative) imagefield for CKEditor.
      Example
      Using a repeater matrix (or repeater) with CKEditor field, the primary sources for images are imagefields in the page-repeater fieldset. Obviously I can change the page source, but I need to start from the root and this is not comfortable. In this specific situation the better solution is to have an imagefield in the parent page and force CKEditor to automatically go there... or if you want to have a "media library" go there first.
      Don't know which could be the best "setting system" but in my opinion this is an annoying problem.
    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By snck
      Hi there,
      I am trying to convince a client to use image tags in a future version of the website. The plan is to have one image container per page and use tags to differentiate between different roles (header image, gallery, slider...). I thought it would be great to show also the image tags in the backend (thumbnail) overview without having to scroll through potentially long lists or clicking on every single image to see how it is output. I could not find a setting, a module or handy little hook that accomplishes this task, but maybe you have a solution?
      Cheers,
      Flo
    • By Pravin
      <!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right--> How to set the image quality as per desired..
      I tried using the above code but I get the original image size..
    • By dragan
      I only now discovered that it's possible to declare individual input-field widths. Excellent feature! However, image-fields are not supported.
      Well, the fields are resized, but it seems to be still "display: block" i.e. each image-input field is displayed one below the other. With image-heavy pages, it would be cool to say e.g. "image input field: width: 33%" and being able to show more images per row. This would make sorting much easier. Right now I have to resize the browser content (CTRL -) so I can see more images per screen real estate. Even then, I have to often move an image up or down several times to reorder them.
      I guess all it would take is changing / adding a CSS property somewhere? e.g. from "display: block" to "display: inline" or similar.
×
×
  • Create New...