Image Article Selector

richtestani · 2014-06-02 00:56:53

I have a working copy of a new plugin, I’d like to get some feed back. It’s another way to select images inside the write tab.
This particular plugin allows many images to be associated with an article, rather than a single image.
You’ll need to use the <images> tag to handle it of course.

The plugin is over at my gist page:
https://gist.github.com/richtestani/c062356b6a6411825db0

A few things to add would be ordering of images via drag & drop, and uploading here.
It’s a start for now, and works well for me right now.

I wonder if I should have created a modal overlay instead of an inline box though.
Suggestions?

Thanks
Rich

Below is the help file from the plugin

————————

What is Article Image Selector?

Article Image Selector allows you to choose images to attach to an article. Manage images for any article easily and efficiently from a single location.

How does it work?

Once installed, go to an article or new article. Scroll down to the Article Image field and click the ‘Add an Image’ button. This will expand a hidden box showing all of your uploaded images (done through the images tab). If you have many images, the page load time can take awhile and it is suggested to use thumbnails for your images, as Article Image Selector will look for those first. If the number of images take up more space the box generated, a scroll will allow you to move through all of your images within the box.

Click an image you’d like to associate with your article. The image will be removed from the box and moved above it where images associate with the article will appear.

Conversely, if you would like to remove an image, simply click any image associated with the article and it will no longer be associated with the article.

Remember to click Save!

Article Image Selector will maintain the individual image id’s for you, so you can visually manage your images.

How do I show them on my page?

Using TextPattern’s built-in tags, simply use <txp:images /> or <txp:article_image /> for a single image.

Last edited by richtestani (2014-06-02 14:59:31)

richtestani · 2014-06-02 01:45:04

Updating this plugin tonight – will have an update in the morning.

-Noticed in the default theme clicking ‘add an image’ would click through. Needs to prevent default on click.
-Needs to be styled for many, many images

richtestani · 2014-06-02 12:01:46

Modified the plugin to fix the above issues. Next I’ll write a proper help file and maybe those images aren’t so explanatory. I’ll work out new images that help explain better.

richtestani · 2014-06-02 14:56:26

Added a help file, I will update the original post with that content.

colak · 2014-06-02 16:06:39

Nice, It’ll save some time in writing all the numbers down. It works as expected in my install.

One comment. I’d like the iframe to have a ‘close’ button. An “x” or something. At the moment the window closes with the ‘Add a new image’ button but it is slightly counter intuitive.

richtestani · 2014-06-02 16:13:24

@colak
Thanks! True some close button will need to be added.
Do you think the box should float over the layout, or is intuitive enough in column 1?

Rich

colak · 2014-06-02 16:16:38

Hi Rich

I’d rather have it over the layout but this is just me. Do you know if it works wit mobile devices too?

richtestani · 2014-06-02 16:22:26

I have not tested this on mobile devices, currently it sits within the sites structure so generally it would adhere to the formation of the admin page.

However, the heights of images are specified to 120px which would not change. I would need to workout a bit more flexible solution to truly accommodate this but logistically it probably would work without issue. I will take a look at it on my iPhone shortly.

Thanks very much for your feedback!

Rich

richtestani · 2014-06-02 16:32:52

So it works just fine on my iPhone 4S running iOS 7.0.5, but the width grows wider than the screen, so it creates a larger width. I’ll work out some adjustments to keep the box more fluid.

The interactions otherwise work just fine and the same as desktop browser.
I don’t have any other mobile devices to test it out.

Rich

GugUser · 2014-06-02 19:59:26

In my installation it doesn’t work. The image window opens and closes so fast, that I can’t view the photos.

And by the way: What is the difference between your plugin and mck_article_image (it works fine)?

Bloke · 2014-06-02 19:59:54

I was following your monologue today but didn’t have any spare time to try it out until now. I like it. Simple and effective. I’d echo colak’s comment about a close button: scratched my head a bit to figure out how to get rid of the picker.

Regarding the text over the images, I find it kind of gets in the way a bit, especially with the limited width of the grid. Plus, the images on my test server are primarily light backgrounds so the white text seems a bit lost. Would it be possible to perhaps only show the text (or other meta info) on demand? I was going to suggest hover with a subtle transparent background to make it easier to read, but hover’s not very mobile friendly so maybe it’s not possible (I don’t have a mobile device either so can’t test that part of it).

All in all a great addition to the Textpattern pluginverse. Many thanks!

GugUser · 2014-06-03 12:14:01

In a second try, in an another installation, the plugin works. Both installations are Textpattern 4.5.5. I don’t know, why it didn’t work the first time. Sorry.

sacripant · 2014-06-03 12:56:47

The image sources are based to the root host :

/images/xx.jpg

So if you are installed Textpattern in a subfolder in your host, the plugin don’t find images.

richtestani · 2014-06-03 13:16:36

Thanks GugUser & bloke for your responses!

@GugUser It sounds like the javascript isn’t working, where the link is reloading the page instead preventing the link from following the the href. I’m not sure why this would happen unless you downloaded right after I posted the initial post. make sure version 0.3 is running, otherwise I will look into that.

I was inspired by a different article selector, one with a select list where you could select a single image from it. It was helpful, but files names often told me nothing about what I was choosing. I had a few similar plugins that offered a help in getting to your images but wasn’t overly helpful where I had to know a little more about my images or they should be named well enough. So I build this item. It hadn’t occurred someone would have built something so similar.

Being biased, as all developers probably are, I’ll say my version is a bit more concise, while mcm_article_image has a bit more features. But mcm plugin is pretty much the same the thing I was going for.

@bloke Agree about everything you mention. I need to style the images and text a little nicer. I also want to develop it further of mobile, include some ajax loading to soften the load times. I built this for a client who literally has hundreds of images, and the load takes its toll.

I will likely post a new update later today.
Thanks everyone
Rich

richtestani · 2014-06-03 13:30:28

@sarcipant It should lookup your images folder based on the preference.

$txpImage 		= '/' . $prefs[ 'img_dir' ] . '/';

Last edited by richtestani (2014-06-03 13:32:07)

Textpattern CMS

Textpattern CMS support forum

#1 2014-06-02 00:56:53