Jump to content
totoff

Imagefield: How to attach a css-class to images?

Recommended Posts

Hi all,

I need to loop over several images with an ordinary foreach - nothing fancy. However, each image needs to have a unique css class name attached. Here is a simplified example:

<ul>
	<li><img class='mac' src='#'</li>
	<li><img class='ipad' src='#'</li>
	<li><img class='ipod' src='#'</li>
</ul>

and so on.

My array of images will be a collection from several pages. So the information about the required class needs to be "attached" to the image somehow. Sure I could use the description field for that, but that's kind of a hack I would like to avoid for the sake of unexperienced editors.

My PW skills got a bit rusty the last time. Maybe an easy way to achieve that as been already introduced into the core and I missed it. Apologies in advance if this is a silly question than ...

Ideas welcome! Thanks.

Share this post


Link to post
Share on other sites

Hi adrian,

thanks for pointing me to that module. I'll give it a try. Sounds promising.

Share this post


Link to post
Share on other sites

Hi all,

I need to loop over several images with an ordinary foreach - nothing fancy. However, each image needs to have a unique css class name attached.

The css class name needs to be unique? And you want to enter it in the backend by yourself somehow? I think this does not scale, because sooner or later you will use the same css class name twice. If it should be truly unique, I suggest a combination of $page->id and $image->name ($page which contains $image). May I ask why it has to be unique?

Share this post


Link to post
Share on other sites

hi titanium,

thanks for pointing this out. Unfortunately I didn't say precisely what is required: the css class does not need to be unique in the sense of an id. Instead a "dedicated" class in the sense of "this images requires this class and no other" is required. I think the module will do the job.

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 picarica
      so this is really weird issue i am so confused about this, so i have setup 'images' field where i put images and the include them in CKeditor, should work right? well it works on some sites, i use it nearly in every page but at one page, the images included in that CKeditor only show up, when i am logged into processwire, when i turn on incognito mode the images dissapear, but only on this specific page, everywhere else it works perfectly, has anyone came across this issue? i have nowhere in the site login checker, i have no idea what is going on
    • By picarica
      so i am trying to fetch dimensions of image using getimagesize() but it returns nothing, at least i think so, i want to feed it to data attribute, bit its emtpy, i tried feeding it the image directly or just image->url
      here is my source code

       
      foreach($page->repeat_body as $r_body) { /* other code here*/ if ($r_body->gallery_check == 1) { echo "<div class='my-gallery' id='grid-gallery' itemscope itemtype='http://schema.org/ImageGallery'>"; foreach($r_body->image as $image) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $thumb = $image->size(400, 400, $options); $large = $image->size(1280, 0, $options); list($width, $height) = getimagesize($image->url); echo " <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'> <a href='$large->url' itemprop='contentUrl' data-size='$widthx$height' data-index='0'> <img src='$thumb->url' height='$height' width='$width' itemprop='thumbnail' alt='Beach'> </a> </figure>"; } echo "</div>"; } /* other code here*/ } now, the images are outputted correctly, i can open then and browse them
    • By olafgleba
      Hi,
      maybe kind of related to https://processwire.com/talk/topic/13286-image-description-not-saving/ but with other environment bits.
      While adding a new page/edit a existing page containing a image field, the image itself gets stored into the database but strangely the entered description does not. More strangely this only happens on my staging server. Within my local dev environment all is fine. And beside of this particular problem, all parts of the PW instance works fine. On both environments (s. below).
      First suspicion was the varying PHP/mysl versions of the local <-> staging environment. But, there are many working projects with the identical setting (s. below).  And i never encounter this problem so far.
      No error/log/console output. It just fails to get stored.
      Local Environment: PHP  7.4.6, mysql 5.7.29, PW 3.0.148
      Staging Environment*: PHP 7.0.33, maria DB 10.1.46, PW 3.0.148
      Maybe someone has a hint what to try?  Thanks in advance.
      *) I cannot change the staging server php/mysql settings because its part of a shared hosting account.
    • By arnd
      Hi,
      I have a repeater with some images in it.
      As Superuser I can work with the Actions (rotate...). But my Users with lower Rights can't use this Actions.
      The same User can use the Actions on images outsite a Repeter-Field. So I think it's not a Problem of Rights-Management but from Images in Repeater Fields.
      ProcessWire 3.0.164.  Bug? Or can I manage this in the settings?
      Thanks in advance
    • By Robin S
      Lister Selector
      A Process module that uses Lister/ListerPro, but with a selector string input instead of the normal InputfieldSelector filters.
      Features
      For power users, typing a selector string is often faster and more intuitive than fiddling with InputfieldSelector. It also lets you copy/paste selector strings that you might be using somewhere else in your code.
      Allows the Lister rows to be sorted by multiple fields (not possible in Lister/ListerPro)
      Allows the use of OR-groups (not possible in Lister/ListerPro)
      If ListerPro is installed you can run ListerPro actions on the listed pages - the available actions are defined in the module config.
      Bookmarks can be configured in the module config and accessed via the flyout menu for the module page.
      Usage
      Type your selector string on the Selector tab. The selector is applied when the "Selector string" field is blurred, so hit Tab when you have finished typing your selector.
      Unlike Lister/ListerPro, you can't sort results by clicking the column headings. Control the sort within the selector string instead.
      Superusers can jump to the module config (e.g. to create a bookmark) by clicking the cog icon at the top right of the module interface.
      The module is mostly intended for use by superusers, because in most cases site editors won't understand the ProcessWire selector string syntax. If you want another role to be able to access Lister Selector then give the role the "lister-selector" permission. Only superusers can define bookmarks because in ProcessWire module config screens are only accessible to superusers.
      Screenshots
      Process page

      Module config (when ListerPro is installed)

      Advanced
      If for any reason you want to create dynamic bookmark links to Lister Selector for a given selector you can do that like this:
      /** @var $pls ProcessListerSelector */ $pls = $modules->get('ProcessListerSelector'); $selector = "template=foo, title%=bar"; $pls_link = $pls->getProcessPage()->url . '?bm=' . $pls->urlSafeBase64Encode($selector); echo "<a href='$pls_link'>My link</a>";  
      https://github.com/Toutouwai/ProcessListerSelector
      https://modules.processwire.com/modules/process-lister-selector/
×
×
  • Create New...