File Upload without size specification and file format & add a class automatically

editing
#1

First at all. Thanks to Sitecake-Team. I bought your CMS and i like the PDF-File-Drag&Drop.

A: I want to show the uploaded files without .pdf (391.4KB) after drag&drop them to my html-page.
B: Furthermore it would be nice to auto-create a class class="embed-link" to the uploaded pdf-files in the generated html-code <a href="filename.pdf" class="embed-link"> as explained in A.

The reason why i would love to have this is:
I want to drag&drop .pdf-files. These files are, by klicking them, pre-shown in an iframe at the same html-page but only if they have the class-tag class="embed-link included. It works fine when i include the class manually but i want to create the class automatically to the html-code after drag&drop.

#2

In B: i need a predefined CSS Style to define a class in an <a> tag.
Your Example 1 from …docs/user-styles.html works fine to create a class in an <p> tag.
Here .sidebar p.red { background-color: red; } generates in html-code this <p class="red">.
I need .sidebar a.embed-link { color: black; } to generate in html-code this <a href="files/filename.pdf" class="embed-link" without target="_blank".
Thanks all for reading and helping.

#3

Let me help what I can…

A: Sitecake auto generates textual link for uploaded files. It’s structured like: filename.extension (size KB). Once it’s generated you can manually rename it as you please. You can even grab generated link from the toolbar address bar and link any other image / text on the page.

B: This might be useful to have Sitecake specific class assigned to file links. Like we have for the map, gallery, raw HTML … Right now we don’t have it. But … You can create user style for this.

Create a general user style for uploaded files. Put this line in your CSS

.sc-content p a.embed-link {};

Then once in edit mode assign this embed-link style from the toolbar for each pdf link.

#4

target="_blank" can be turned off with the blue square in the toolbar’s address bar.

image
image1015Ă—295 17.2 KB

#5

Hi Nik.
@ B: I have no toolbar symbol or option as you said to assign the user style for each pdf link. Only “B” and “i” are shown, no “Default Style” or “embed-link” (screenshot below).

Here are my codes.
css-code is .sc-content p a.embed-link { } as you said.
html-code before publishing is <div class="sc-content sidebar"> </div>.
After drag&drop the file.pdf the toolbar looks like this.

no-userstyle-toolbar
no-userstyle-toolbar969Ă—90 17.1 KB

After publishing, the generated html-code looks like <p><a href="http://localhost/sitecakecms/files/file-sc5dd6ad17073a3.pdf" class="">file.pdf (391.4KB)</a></p>
The generated class is empty. Should be filled like class="embed-link" right?
Thank you very much.

#6

Ok. I read in another post from 2017 that specific class assigned to file links is not possible.
Here is a screenshot what i wanted to realise with Sitecake.
Left-div with drag&drop pdf-files and right-div with preview (javascript) by clicking.
Now i try to edit the main-code by myself :disappointed_relieved:. Or s.o. have an idea to me? :slightly_smiling_face:

image
image915Ă—531 32.9 KB

#7

Yeah. I found a solution!
The PDF-Drag&Drop generates a target="_blank" in the html-code.
I use java-script like var a = document.querySelectorAll("a[target=_blank]") for the preview-iframe on the right site.
Now i use the target="_blank" like an class class="embed-link" and it works for me. :blush:

#8

Creative thinking! :slight_smile:

#9

If you were looking to style “drag and dropped” files (as per your scenario A), perhaps consider adding a rule to your master stylesheet which will specifically style links that contain a PDF file as a destination (look up CSS Attribute Selectors for further reading). This way, any PDF file that you drag and drop to your Sitecake website will be automatically formatted to your preference.

A very basic illustration of the concept:

a[href$=".pdf"] { display: block; padding: 10px 10px 10px 150px; background-image: url("path/to/pdf-icon.png"); background-position: left center; background-repeat: no-repeat; }

Of course, this use case can be extended to style other types of link such as Word Documents, external links, etc.

1 Like