Jump to content
snck

Image field: Show image tags in overview

Recommended Posts

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

Share this post


Link to post
Share on other sites

A new module that should suit your needs:

 

  • Like 2

Share this post


Link to post
Share on other sites
On 5/2/2020 at 5:47 AM, Robin S said:

A new module that should suit your needs:

 

Perfect timing. Thank you so much! 🙂

  • Like 1

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By maxf5
      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/

       
       
    • By OLSA
      Hello for all,
      I can't find solution how to manipulate with image tags field (as object) inside admin/edit using hooks.
      My problem that I need to use multilanguage predefined tags (I like to store pages ID from some another page tree).
      Also I know that there are other solutions (eg. repeatable field with image field and some page field for tags, or using page table), but in my case I like to use hook inside custom module for that job.
      I try with InputfieldImage::render, and InputfieldFile::render... but with that I can't get/"touch" values from image tags field.
      Only working solution what I have right now is using ProcessPageEdit::execute but with that can manipulate only with tags value - is there any other better elegant solution to manipulate with image tags field (as object, as example set class, add readonly attribute, append some html...)?
      $this->addHookBefore('ProcessPageEdit::execute', function(HookEvent $event) { $page = $event->object->getPage(); foreach ( $page->fields as $field ) { if ($field->type instanceof FieldtypeImage && $field->useTags) { $imageField = $page->get((string)$field->name); // there are multiple images foreach($imageField as $f){ $f->tags = '...'; // tags value only } } } }); Regards and thanks.
       
      EDIT:
      Now it's clear to me what can be done. With this ("simple" variant) is possible to add class to wrapper, manipulate with value, but for more than that need to override core InputfieldFile module (inside site/modules). Also there is always option to use javascript for some manipulation.
    • 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 jploch
      Hey guys,
      i want to put out a list with tags from an image field (thumbnail) of the page beeing viewed.
      The tags should link to pages, with the same name as the tags. The Tags are seperates by "|" (instead of a space).
      Here is my code (wich is not working):
      function footerProjekte(){ $alltags = $page->thumbnail->tags; echo "<ul>"; foreach($alltags as $tag) {     echo "<li><a href='{$tag}'>{$tag}</a></li>"; } echo "</ul>"; } any ideas?
      Thx!
    • 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...