I'm new in this topic, so my apologies for this question :)
I need to create a page that must show all images uploaded in a post, one at time. When the user click next button, the it must load the next picture, replacing the first one.
< [ image1 ] >
Title
Description
other content
--> User clicks next
< [ image2 ] >
Title
Description
other content
However, in order to speed the image display load, the two following images need to be downloaded in hidden panels, so the images will be cached when user clicks next and load the next bundle of images.
If I use ajax to do this task, will the browser use the downloaded images or ajax will download them once again?
Is there a way to do this process more optimal?
Thank you very much!
You can download the next image's data to strings using ajax and convert it to a base64 string and embed it in the html (when the next button is clicked, using javascript) by changing the src atribute of your image to "data:image/png;base64,(base64stringhere)" replacing (base64stringhere) with the downloaded base64 string of an image
ref: http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/
ref: How can you encode a string to Base64 in JavaScript?
Note: most browsers cache images, so it will waste quite a bit of bandwidth if the users are viewing images they already have downloaded.
Related
I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!
I built a website in plain html/css with my own design. Now I need to put this website in TYPO3 CMS 9.5.4. Unfortunately it's my first time working with TYPO3 and I don't really know what I'm doing.
What I got so far:
Most of the website is already working fine. I included fluid_styled_content and my setup basically looks like this:
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
file = fileadmin/sitedesign/Resources/Private/Templates/Page.html
variables {
content < styles.content.get
}
}
The Page.html file is basically my whole html template and I put
{content->f:format.raw()}
where I want my content.
All content I create in the backend is displayed as I want except of images.
My question:
I can display images by creating a "Text & Images" content element and adding the images in the "Images" tab. In the "Media Adjustments" section I can now set the width and height of each element and below I can choose the number of columns.
However these do not change anything in the source code of my website i.e. in the content variable, so all images are displayed in full size.
What can I do to make the width/height appear in the source code (ideally as width/height attribute of that element)?
Hey Erik and welcome to TYPO3. Usually TYPO3 will take care of the correct images sizes when using the default Content Elements (e.g. Text & Images). But TYPO3 requires ImageMagick or GraphicsMagick installed on the server to modify the pictures.
You can check out if your system matches all requirements using the "Environment" module in the TYPO3 backend (modules on the left side of the backend). Then you will see a function called "Image processing" which will test the required image functions of your server.
I am working on a VBscript asp page that is supposed to render a user's photo graph from our database, based on an ID value that is passed to the page via the URL string, to be used in various email functions. This part works great, using the following code to render it:
Response.ContentType = "image/jpg"
Response.BinaryWrite(rsAttPic("ind_photo_ext"))
I was asked to provide a default image, because if the user does not have an image on file in the DB, they get a broken image icon. After some trial and error, I finally got something to work:
if (IsNull(rsAttPic("ind_photo_ext"))) then
Response.Write("<img src='placeholderm.png'/>")
else
Response.ContentType = "image/jpg"
Response.BinaryWrite(rsAttPic("ind_photo_ext"))
end if
This works when testing it through the presentation page on the website (showpic.asp) - both images display as expected, depending on the record being referenced in the URL. However, when that page, showpic.asp, is referenced by other sources (emails sent via campaign software, confirmation emails generated by our CRM software), only the user image shows up as expected. The generic image does not show in the emails, only a broken image link.
What is the difference between the two types of image presentation? I did notice in testing that the user image appears in the browser in the center, black bground all the way around it, while the default image appears in the top left corner of the browser window, white bground. Is that related?
In angular2 using aberezkin/ng2-image-upload
I have in my template
<image-upload
[max]="1"
[url]="uploadUrl"
[preview]="true"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
(onFileUploadFinish)="imageUploaded($event)"
(onRemove)="imageRemoved($event)"
(isPending)="disableSendButton($event)"
></image-upload>
This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload
It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?
Also is there a way to filter file type allowed?
So you want to let user select the image and able to change it befor Uploading
I made a simple example of preview and uploading image I think it will be helpful for you
Preview and uploade image angular2
I am using Joomla and Seblod. I would like to create a gallery of thumbnails only, tiled next to one another and when clicked it will open each image into a lightbox (fancybox) and display larger image and description.
Problem I'm having is that when I try to display only the image thumbnails, I get the label "Image" or whatever I enter into Seblod. I just want plain image thumbnails, no text or any description but when clicked it opens them in the lightbox. I'm sure this is child's play, but confusing for a a beginning Joomla user like myself.
Any help would be appreciated, thanks.
There is built-in Lightbox functionality in Seblod, but it takes a few steps to make it work. It is even better if you use a custom template, because then you can add regular PHP functions to process your photos.
In any case, to get started, look at the tutorial I wrote on this subject: http://www.seblod.com/support/documentation/seblod-2x/fields/typo/1710-create-a-simple-gallery-with-fieldx-field.html