We're using Media Library (Drupal8) and want to use an image as background with it's related image style
style="background-image: url('{{ file_url(content.field_header_image[0]['#markup'] ) }}');
This is the code we're using right now for field_image. It works great, prints the image as background with its image style associated
We want the same for field that is a reference to a Media Entity.
We don't want to manually render the Image Style with Twig Tweak, because that is already defined in Drupal Content Type, we don't want to be repeating information and making it harder to change in the future
Related
I've set up Contentful as the headless CMS of my blog. Everything works, except rendering assets (in my case images specifically). My blog is built using Symfony and uses Twig for templating.
This is how (a part of the) content is currently rendered:
I'm using Contentful's default rich text renderer for Twig, as described here. Unfortunately, it doesn't say anything about assets. But given that there's an EmbeddedImage class available, I would expect support for images.
What step am I missing?
You need to define a custom renderer for the assets in the same way as described for a custom heading here.
The reason why assets don't work "out of the box" is that the renderer can't know what type of asset is being returned. For example, is it a .jpg, .mp4, .wav file etc. You may have a variety of different assets in your Rich Text and will need to render the different asset files accordingly to your HTML.
The full list of node types you can define custom renderers for is here.
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I've figured out how to get the image link:
{{ node.myfieldname.entity.uri.value }}
I've been poking around with kint for a bit now, but can't figure out if there is a srcset anywhere.
When loading the image normally through {{ content }} it does display a srcset, so it should have one. Just not sure if it is already available on the page.html.twig or where to find it.
The actual goal is to retreive the image srcset to use the image as a background. I'm trying to retreive multiple images to use as backgrounds for multiple div's that are defined in my page--front.html.twig
Getting access to all the node information at the page template level generally means large and painful selectors and extra rendering. It's generally easier to create a helper function and hook within your theme file to make the values easier to access.
Depending on the details of your use case the Background Image Formatter module may do what you need without much custom code.
If that approach doesn't work for you consider a template_preprocess_node() to find and extract the values you want from the field. You can move them into simple to use variables for the template.
Solved this by creating a custom block for my image, that only shows the image.
Then added the custom block to my page.html.twig
Not the prettiest solution, but easy and effective.
In the past I've used the Image Field Module to require a user to provide an image of specific dimensions and it's worked great. I like the new Media Library Picker Field and it's integration with the Image Editor module to allow for cropping and re-sizing.
What I'd like to do is use the Media Library Picker Field but require the user to crop and/or re-size the image to specific dimensions. Is there any way to configure it that way? So far, the best I've come up with is to provide some help text to the user suggesting that they re-size the image to desired dimensions.
Should I just stick with the Image Field if I must have the image meet specific dimensions or is there a better way with the Media Library Picker Field?
You can't enforce that the image is supplied with specific dimensions using the Orchard 1.7+ media processing features, however you can ensure that it is displayed with correct dimensions.
Orchard 1.7 introduces the concept of media profiles, which effectively allow you to create a bunch of image transformations, name them, and then use them arbitrarily throughout your site.
On a recent project I was given a load of customer profile pictures for a testimonial page on an Orchard site. They were supplied in a variety of different sizes, and I knew I needed at least 2 different sizes (one for the main testimonial page, and a smaller one for testimonial widgets shown on other pages).
In the Admin Dashboard, I went to Media -> Profiles and created a new Media Profile called Customer_Profile_Regular, then added a Resize filter to scale it down to 100x100px (the resize filter is quite flexible, and you can create your own filters easily by implementing the IImageFilterProvider interface).
I did the same for a second profile, Customer_Profile_Small, scaling down to 50x50.
Then, using Shape Tracing, I overrode the existing Media Library Picker field display shape, and replaced it with this:
#{
var imagesField = Model.ContentItem.Testimonial.CustomerProfile;
}
#if(imagesField.MediaParts.Any()) {
<div class="customer-profile-image">
#Display.MediaUrl(Profile: "Customer_Profile_Regular", Path: imagesField.MediaParts.First().MediaUrl)
</div>
}
For the testimonial widget, it was simply a case of creating a similar shape override, supplying the other profile name.
Now I can upload any image to my media library, and use it as a customer profile image on a testimonial. Orchard will automatically resize (or perform other operations on) the image based on the profile I tell it to use, the result of which is stored in the site's Media folder so that it is only regenerated when necessary.
Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").