Image uploading (Single and Multiple)

svecis · 2018-11-04 18:46:55

This is how it should kind of work. Plugin would be okay too.

Settings page should be available.
If you add one image, than it should be added to this place, where your cursor has dropped the image.

If you add more images, than according to your settings either this or that should be happening:

1.) The images get added down under another with original size. The worst of adding mechanism that should be definitly not default. But option should be available, because it’s the most basic image uploading and some people might like this.

2.) The first image will full width 100% of a article and max height will be setted in the settings. Defauls should be 400px. The next images will be available in rows (3 rows is defaul), which you can set in settings.
Max width will be depending on the number of images set on the settings. For example, if you set 3 pictures in settings, then the image of second image will be 33,33% (max-width/3), the third and fourth image the same and then in the next row the same. This should be the default setting. All kind of social media companies are using this method. Test on your FB account.

3.) The third method and the second best approach to this is that max width will be “max width 100% / number of pictures in a row”. So even the first picture gets to be small. This is a got method, but the second approach is by far the best.

Bloke · 2018-11-04 19:43:31

svecis wrote #314957:

If you add one image, than it should be added to this place, where your cursor has dropped the image.

Using what tag? I don’t know how familiar you are with Textpattern’s tag system but that’s how dynamic content is inserted.

We could add an HTML <img> tag. Or upload the image to the CMS (when you hit Publish? Immediately? If so, what if you change your mind? How do you change the image or delete it?) and use a Textpattern <image> tag in the body. Or add it as the article image(s) so they can be included in your template.

The problem is, this alienates everyone who has set up their templates to use article images. Dropping images in situ is not what most people use Txp for. Not saying it isn’t a valid use – it is – but the benefit of separating content types so they can be incorporated in any way – inline or as an accompaniment – is one of the core strengths vs modging everything into one field.

Now, if you drop an image alongside an article, yes there should be a way to insert it at the caret if you wish. Some way to choose the default behaviour makes sort of sense, but surely dropping it where you want it – alongside or inline – and Txp treating it accordingly is better UX than a setting?

We need to be cognisant of all the many ways people might use content types in their articles. Sure, settings can govern some use cases but there are endless ways to incorporate images and posts.

The images get added down under another with original size… The first image will full width 100%… Default should be 400px… The next images will be available in rows… max width 100% / number of pictures in a row…

And ignore your template? The page layout is how you decide how your content is laid out. If you want to arrange images in galleries or slideshows or 3-to-a-row or 20-in-a-grid or one hero image and 30 small ones, that’s between your template HTML markup and the CSS you write. That’s presentation, not content.

The default layout for posts in each Section of your site is defined in a template, not settings or default behaviour. Txp is not Twitter. It’s not Facebook. It’s not Tumblr. If you want it to act like that, set up a template to lay your content out that way, then upload your content to slot into the placeholders you defined. After that, we can debate how to attach images to posts in the most efficient manner (which is something we do not do now, but would like to achieve better in future).

svecis · 2018-11-04 19:54:24

https://summernote.org/

please look how they have achived this. Could you not make this editor your default one?

svecis · 2018-11-04 19:55:32

And I’m sure people who have templates won’t use the wyswyg editor instead be using html editor.

colak · 2018-11-04 20:09:54

Hi svecis,

and welcome to txp.

You are thinking too much of what your current needs are. So, do most of us I guess.

If you are thinking however about building an images based site, a gallery if you wish, you have to think that in cases like this, the meta information of the images is the most important thing! This means that multiple image uploads would not be the best way to approach it, even if this is currently supported by txp. In such sites, the title and alt tags as well as the caption become extremely important. This means that care should be given to fill each one of the fields individually.

You are looking for quick ways to produce content, we all do, but if we also want that content to be accessible and discoverable, there are no shortcuts for that, unless of course someone can thing of one which would generically work for most people’s gallery site needs.

Bloke · 2018-11-05 17:06:26

As an addendum to this, I totally get where you’re coming from regarding images. It’s a simple disconnect between the linear posting paradigm of a blogroll-type feed with that of how our CMS is structured and content is (currently) managed.

Any way we can blur the distinction going forward in the Body / Excerpt / etc while retaining the ability to put stuff where you like in dedicated fields via the templates is A Good Thing if we handle it well and reliably.

I made a few little steps towards this in smd_imagery but that was only from already-uploaded images. It wouldn’t be too much of a leap to imagine a world where one could:

drag an image onto the article image field to have it “attached” (for use in a template), or
drag an image into another field (e.g. body) to have it “inline”

Either way it needs uploading and we have our shiny file uploader to play with now. The method of “insert” in the body could thus be a <txp:image /> tag inserted at the cursor caret or dragged insert point. I can envisage the dragged images appearing as tiny thumbs in a grid under the field to which they’re attached. You could drag/drop the thumbs to rearrange order and the simpler <txp:image /> tag inside the body tag (with no ID/Name) could consult that list of images first.

Under the hood, it’d just squeeze the images into the article_image field as a comma-separated list of IDs and keep it in step as you drag/drop the order. Then the number of <txp:image> or <txp:images limit="5" /> or whatever tags in your body text can call off against the list. We still retain all the power of containers and limit/offset and classes yahde yahde if you want it and are comfortable with tags, and as we’re using the article_image field behind the scenes, it’s backwards compatible with existing template usage. Or even, in conjunction with it, perhaps.

The only sticking points are:

category and other metadata. Category isn’t strictly necessary but some way to fill in alt text should be possible from the Write panel, even if you just tap the thumbnail to show a larger view in a modal window with a few optional fields nearby.
thumbnail generation. Really need to get a handle on this with srcset in mind, since it seems here to stay.

Moving on from this, it wouldn’t be a great leap to introduce an article_file field (or link table) and permit other file types to be dragged into the various fields and managed the same with, with a <txp:file> tag calling off against the list of uploaded content attached to the article.

I’ve not thought it through but if we can hash something together as we think about our image grid implementation and how to blur the line between content types, that’d be awesome.

jakob · 2018-11-05 22:05:25

Bloke wrote #314981:

As an addendum to this, I totally get where you’re coming from regarding images.

Me too, especially easier drag-and-drop image uploading handling.
But as others have said, you went on to outline a very specific realisation and the beauty of Textpattern is that you can make these layouts yourselves with the tools it provides. It’s not a page-builder CMS like webflow or many of the other online services with pre-built template libraries.

1. drag an image onto the article image field to have it “attached” (for use in a template), or
2. drag an image into another field (e.g. body) to have it “inline”

bot_upload_images worked much like that but lacks the second bit. The ability to perhaps group images in the article-image field, perhaps name that group, so that gallery group can be inserted in the text as a shortcode snippet would be excellent. If that insertable shortcode (or txp:image form type) was user-definable people could construct their own image galleries, sliders, photosets, etc. Kinda like your smd_imagery.

FWIW: Siteleaf has a drag-and-drop unload and pick system linked back to an image insert button. While it’s not quite the same as your suggestion, their system is in many ways not all that dissimilar from ours. You can see it in practice around minute 3:22 in this video: https://vimeo.com/264631007.

I’ve not thought it through but if we can hash something together as we think about our image grid implementation and how to blur the line between content types, that’d be awesome.

Agree. I think those are two of the main things in the existing Textpattern architecture that would widen its scope considerably without straying too much from the existing core concepts you mentioned in the ‘manifesto’ thread:

Easier, more intuitive image-handling with more extensive image thumbnail-handling (Phil’s done a mock-up for the pane, Oleg’s done a bare-bones uploader and your smd_thumbnails).
Content-type variations (you’ve done some field type extensions in another branch that would be a good basis for making own schemes and panel types). A lot of the list panes tools (like search, column sort etc.) are now modularised and can vary to match different contexts. And almost all the helper functions (if_first, if_last, if_different etc.) are there, they’re just tied to the specific article, image, file and link contexts.

There are a few other things like going beyond just categories that would overcome what feel like structural limitations from times past but those two are in my view most fundamental.

etc · 2018-11-05 23:01:07

jakob wrote #314992:

bot_upload_images worked much like that but lacks the second bit.

I have updated abc_article_image to check both bits. Upload, reorder, add/remove, insert into textareas etc.

If that insertable shortcode (or txp:image form type) was user-definable people could construct their own image galleries, sliders, photosets, etc. Kinda like your smd_imagery.

That’s quite easy to add too.

svecis · 2018-11-07 20:57:12

Okay, now I have come back. Had some work to rework, so I have now time to write.

Also tested the newest abc_article_image plugin version and it will have a seperate room for drag and drop. This is a right step in my opinion, but not really, what I was thinking. And the siteleaf example same way is not really what I want.

I don’t want a seperate place drag and dropping, instead want to have the ability to drop it between the lines of the text and it will be interpreted like I said in the first way.

Perhaps @etc can make it work with some work?

etc · 2018-11-07 22:04:48

svecis wrote #315060:

Perhaps @etc can make it work with some work?

Perhaps, but how you see it? Images are large nowadays (especially multiple), their upload can take time. If you continue to type meanwhile, the intended drop position can move. So we should freeze the text while uploading, and it’s not a nice experience. And even if I did it, that would not be wysiwig interface but txp image tags. And then you would not be happy again, so why worry? :-)

etc · 2018-11-08 10:33:09

Okay, that was funny to do. Now dragging files on article body uploads them as images and inserts txp tags at the last cursor position. You still need to save the article.

I have only tested it in FF, feedback welcome.

svecis · 2018-11-08 19:01:10

etc wrote #315077:

Okay, that was funny to do. Now dragging files on article body uploads them as images and inserts txp tags at the last cursor position. You still need to save the article.

I have only tested it in FF, feedback welcome.

Yeah, this is a working example and it’s great. Thanks @etc. This is really what I was hoping for.
Now you could perhaps add settings for how multiple images can be shown in a row, but I’m totally satisfied with how it works for now. It’s resposive too. The max width is always body width, so this works too.

And if you ask me, than your plugin should be not only a plugin, it should be core for the next version. this is really something, which is fundemental in my eyes for blog posting cms be it lightweight or not.

@etc you have done a great work, I cannot thank you enough…

Textpattern CMS

Textpattern CMS support forum

#1 2018-11-04 18:46:55