responsive-images | Responsive images solution without reflow | Blog library
kandi X-RAY | responsive-images Summary
kandi X-RAY | responsive-images Summary
This is an responsive images solution based on the responsive embed technique. Read the article here:
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of responsive-images
responsive-images Key Features
responsive-images Examples and Code Snippets
Community Discussions
Trending Discussions on responsive-images
QUESTION
There are many PHP solutions and WP plugins, they all come with additional options that I don't want/need, i.e. how the converted files are served, where they are stored, etc.
I need none of all that and am after pure simple code using GD. I don't want to use a plugin, thank you.
When should the encode happen ? At any time you know it is a good point in the hook routine, could be this https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ but if you know better or have another solution then use that and possibly let me know why you choose another hook. I would i.e. also be happy with firing a cron job once new images are uploaded if that is better. Also I don't need to have metadata of the converted images in the WP db, fine with having the original
.jpeg
files and their metadata in the Media Library, the.webp
files are just there to be used inside thepicture
element.Where should the converted files be stored?
wp-content/uploads/
default folder structure,.webp
files should be next to.jpeg
files all in there.GD image engine should be used for the conversion. https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ Lately I find imagick just crashes or takes ages to do anything. In WP 5.2 things still worked just fine with imagick but there must have been changes introduced that make using imagick in later versions of WP useless. I find GD to me quite stable and fast, it does not matter it creates lossy WebP versions. The methods for the GD image engine from WP do not seem to include conversion/encoding https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods so I am also happy with any methods using in the GD module https://www.php.net/manual/en/book.image.php concerning encoding to WebP.
To get rid of all the extra unneeded image sizes and options WP introduced over time I have these functions/filters in
functions.php
.
ANSWER
Answered 2021-Apr-25 at 09:52To know what data you work with inside a filter or action and to see what variable names hold what values a helper function like below can be used.
QUESTION
I'm having a few issues with the Pagespeed API. I'm using CURL to handle the JSON like so:
...ANSWER
Answered 2021-Mar-25 at 16:07Slightly contrived example...but it shows how to address an object with hyphens in the name.
QUESTION
If Implemented successful the srcset
attribute for img
tags regarding this question about responsive images in apostrophe. I followed the suggestion to include only img
elements and not mutliple img and div's with background-image styles. I used the object-position
style to position elements with values from focalPointToBackgroundPosition
that works pretty good for focal points.
Unfortunately I was not able to pass the cropping values to the image url's in srcset
attribute. I mean the numbers and the end of an image name when the image is shown by the default src
attribute with apos.attachments.url
helper.
/uploads/attachments/imagename.93.10.1745.873.full.jpg
As far as I understood the code in apostrophe-images/lib/api.js
it should be possible because you made this function already available with cropRelationship
so I think there is something wrong in my code.
ANSWER
Answered 2020-Jun-02 at 09:29I figured the solution. So if you want to use cropping for images with srcset you need to add relationship
to srcset
attribute like this:
QUESTION
I have some question regarding apostrophes apostrophe-images-widgets
and its srcset
functionality. It's explained in you Documentation under Responsive Images. I've implemented this solution but i think I misunderstood something becuase the delivered image is still one-half
size as background of the parent div focal-point-test
.
I mean this:
So the actual img with srcset
attribute:
ANSWER
Answered 2020-May-28 at 19:29The apostrophe-images-widgets
module uses that double image technique specifically for when it contains multiple images and is acting as a slide show. That technique helps to maintain image appearance when the images are different sizes. That is why the apos-slideshow .apos-slideshow-item img
CSS selector is hidden. The intention was that only the background-image
would be visible.
As an aside, and as a member of the Apostrophe core team, I can tell you that this is an outdated strategy that we don't use anymore ourselves very often, if at all. But it's hard to remove or significantly change things like this once hundreds of sites are using it.
If you are making your own images widget (which would be a good idea), I would not use both the background-image
wrapper and a normal img
tag. Decide on which works best for your use case. There are still good reasons to use both (maybe other variations on a slider), but that depends on the project.
If your goal is to use the focal point tool, a normal img
tag with a normal src
attribute won't be enough. One way is to use a background-image
attribute on an element that you have set the size for some other way (e.g., width
and height
styles) with the background-position
using the focal point values. Another way is to use object-fit
instead, with the focal point values in an object-position
style.
QUESTION
I've improved several image widgets by extending 'apostrophe-images-widgets' directly. That may not be the best practice, but I used this since the beginning I've started to code with apostrophe-cms and It worked good. My slide widget for example only uses this lines in index.js:
...ANSWER
Answered 2020-May-28 at 14:11You are dealing with two different types of options there, but they are both declared in the same place. focalPoint
is a built-in option, enabling the focal point UI (which then lets you get focal point information back later) and sizesAttr
is an example from the documentation of a custom option that you might create for your specific needs.
In both cases, they are passed into the area's widget options in the page or piece show page template. So this might be in default.html
for a "default" page or show.html
for a piece type's show page like so:
QUESTION
I would like to be able to maintain vertical rhythm on a page that contains images of unknown heights. I found this but am using vanilla-js rather than jquery so a jquery plugin is out of the question. The other answer requires that the baseline be set in javascript. I already have it set in my SCSS files! I'm a very lazy programmer and don't want to type it twice. Wait, I didn't say that. I meant I'm concerned about the maintainability of duplicating hard-coded values all over the place.
here is another solution that I have to reject because I don't like all that extra markup over style concerns. It reminds me of the days when you had to nest
It occurred to me to use generated content to pass JSON to the javascript. I thought I was a genius but then found this example using the exact same method.
Is there a better way of doing this?
All I really want is a way to specify that the height of an element needs to be a multiple of some given value. Is there really no way to do this with just CSS? The answers I've seen say there isn't. I feel like calc
could almost do the job but am not smrt enough to figure it out. Is there a better way of getting the value to the javascript?
Thanks in advance.
...ANSWER
Answered 2019-Mar-31 at 06:00It occurred to me that it is better to use CSS variables and then read those values from javascript as documented here.
This has the advantages of
- using the cascade to allow multiple regions of the page to each have their own vertical rhythm.
- not requiring parsing the content of the
::after
psuedo-element as JSON. The browsers are apparently inconsistent regarding how the escape embedding quotes in thecontent
attribute.
One downside is that custom attributes are not as widely supported as pseudo elements. This way will break on more browsers. Because it's only cosmetic, I find that acceptable.
QUESTION
Here is the code that I have. I want to set a different destination for each different sized file, just to keep my file tree a little bit more organized. Obviously, what I have doesn't work, do I need to first put them all in the same folder, then somehow move them into their proper files? If that is the case, could you walk me through how to go about doing that?
...ANSWER
Answered 2017-Jan-04 at 17:23... do I need to first put them all in the same folder, then somehow move them into their proper files
There are a couple of ways you can configure your responsive_images
task to direct the resultant files to different destinations...
Using the custom-dest property you could configure your responsive_images
task as follows:
QUESTION
Say I have the following image:
...ANSWER
Answered 2018-Dec-11 at 12:47Unfortunately it seems there isn't a way to have an image with srcset
default to its natural size, taking DPR into account. The sizes
attribute, which defaults to 100vw
if not set on an image with srcset
, redefines the image's intrinsic width, and there doesn't seem to be a way to reset it without providing an explicit width yourself.
In my specific situation I discovered that we were already storing the user's DPR in a cookie, so server-side I've started setting the width
attribute on images to the max width of the image divided by the user's DPR. This prevents the image from being displayed larger than the original size, and ensures that the image is sized appropriately for devices with high pixel densities.
Of course, you'll probably want to combine this with max-width: 100%;
in your CSS to prevent the image from displaying larger than its container.
Example solution:
QUESTION
I want to provide responsive images, for that I use srcset attribute.
...ANSWER
Answered 2017-Oct-03 at 16:34The current state of srcset is such that I am not entirely sure what you are looking for is a requirement.
This article by Jason Grigsby entitled State of Responsive Images in 2017 helps explain that while some of this ambiguity is by design to promote competition between browsers, some of this could probably be clarified better:
...the different behavior causes confusion. The most common question I hear is from people testing srcset in Safari and not seeing new images download as the viewport size changes.
There is nothing that says that the browser needs to download new images as the viewport changes. In fact, it probably doesn’t make sense to download a new image if the browser already has a larger version of it and can downsize it. So while this may be a feature and not a bug, we could do a better job setting expectations for developers.
In the meantime I would be wary of quoting full support for srcset just yet. In my recent experience it has been anything but.
QUESTION
i'm creating responsive images with grunt but i don't want changing its name
my code :
...ANSWER
Answered 2018-Apr-08 at 13:38In your options
object of your responsive_images
task add the following two options:
name
rename
Set the values of both properties (i.e. options) to false
. For example:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install responsive-images
On a UNIX-like operating system, using your system’s package manager is easiest. However, the packaged Ruby version may not be the newest one. There is also an installer for Windows. Managers help you to switch between multiple Ruby versions on your system. Installers can be used to install a specific or multiple Ruby versions. Please refer ruby-lang.org for more information.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page