I created a template for a module and want to print to put an image as a background.
If I do,
{{content.field_background_image}}
I see the image path: /sites/default/files/2019-09/carrots-1082251_1280.jpg
But If I try it inside the HTML, the page breaks when I refresh it:
<div class="slide-content-wrapper" style="background-image: url('/{{ content.field_background_image }}')">
How can I put the content image as a background?
I had a very difficult time figuring this out initially as well. Here is what you can do:
Go to the 'Manage Display' for the content type your template is for.
Ensure that the Format on the image field is set to 'URL to image' and not 'Image'
Then write the following code in your template:
<div style="background-image: url({{ content.field_background_image['0']['#markup'] }})">
When you insert {{ content.field_background_image }} it has a whole bunch of properties and values on it, so you have to access the specific field where the url to the image is located.
Related
I'm maintaining a custom REST endpoint for a WordPress site to which they've just added a new custom post type. The REST response has a content object which simply contains all of the post's content:
$magData->content = apply_filters('the_content', get_post_field('post_content', $magID));
However, while regular image blocks and even custom blocks (created with ACF) are output in this content object with no issue, it looks like the core Post Featured Image Block isn't rendering at all:
As you can see, it simply renders a bunch of line breaks (\n\n\n\n) instead of the expected <figure> element. I would expect any Gutenberg Block elements to be rendered once the the_content filter is applied to it, but it doesn't look like that's working for this specific block.
For reference, here's what the block looks like in Gutenberg - it just uses the post's own Featured Image for its image content:
Looking at the post's post_content in the database, the Post Featured Image block is simply a self-closing comment block: <!-- wp:post-featured-image /--> - and in the actual page source, it gets rendered as:
<figure class="wp-block-post-featured-image"><img loading="lazy" width="1280" height="853" src="https://example.com/wp-content/uploads/2022/05/field.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" srcset="{some_image_sizes}" /></figure>
So I'm left scratching my head as to why a Post Featured Image Block would render just fine in the actual WP front end, but not when called using apply_filters('the_content', $content).
I am using this code to display image in my Gallery View but unfortunately i its shows blank infact it does not show any kind of error.
<img src="#Url.Content("~/Content/images/b.jpg")" alt="">
The Code which i am using in my project.
Create a folder in your project called "images", then put the picture you want to display on it and add an existing item to the folder on vs selecting your image.
On the view just use this:
<img src="~/images/yourimagename.jpg or png" alt"">
I am using this shortcode to show all products of a specific product category on custom a template.
[products limit="12" columns="3"]
Now, as I am developing a new theme so the output of this shortcode is breaking the design.
I want to know where or which file I should take or edit to change the layout I want?
Check this image:
Here you can see the rectangle box div's is coming from the content-product.php page but I want to add/change few div before that div's
Like where the <div class="row"> and <div class="woocommerce columns-3 "> is coming? I want to change it.
I'm working on a blog for a friend of mine who wants to put a meme picture at the bottom of the index page.
So the simplest way is to edit the template and reference it from there.
The problem is, it's not user friendly to keep editing and uploading a new template.
So I had this idea that I could create a static page and place it on that page and reference it from the template. But I see that when you upload an image to ghost.io it generates a name based on the date path. That's not going to work for a fixed URL in the template.
Another option might be to use the tags. As tags allows you to put a picture and has a URL. But I tried that it also has similar problems.
How can I make this work nicely?
Don't reference image URL in your theme. Reference page slug and load its content, which would be just an image.
Example with Ghost Handlebars API:
{{!-- If a static page "meme" exists - its content will be loaded here --}}
{{#get "posts" slug="meme" }}
{{#foreach posts}}
<div>
{{content}}
</div>
{{/foreach}}
{{/get}}
To make an animated slider, I overwrite a fields view template file in my own template named: views-view-fields--slider.html.twig
Inside that file I have access to a fields array to print out all the fields that are in my content-type slide.
The problem is that I need to get the path of the image file instead of the image itself, because I need the path for CSS background-image styling.
The following doesn't work:
<div class="jumbotron " ref="" style="background-image:url(?????);">
{{ file_url(fields.field_image.entity.fileuri) }}
</div>
I tried everything I good find on Google:
fields.field_image.entity.uri
fields.field_image.entity.uri.value
fields.field_image.entity.url
fields.field_image.entity.url.value
etc.
Has anyone an idea how it is done in Drupal 8 ?
Since you are in views-view-unformatted you should already have access individualy to each field of your content type Slide with {{ row.content }} and because of that you have to do:
{{ file_url(row.content.field_image.entity.fileuri) }}
Try {{ file_url(row._entity.field_image.entity.uri.value) }}.
It works for me.
<div style="background-image:url({{ file_url(row._entity.field_image.entity.uri.value) }});"></div>
I found this module: image_url_formatter, so in View interface, I can use this to formatter my image filed as path.
It works perfect, but if I turned the twig debug on, it wouldn't work, because it will output debug annotation. I don't know how to solved it yet.
I use fields.field_image.content to show the path, I don't konw whether it's rignt.
Solution without extra module:
In your Views:
1.Add your image filed to the Advanced/Relationship
2.Then in the filed section, change to File Group, you can see URI field，add it, and make sure you check "Display the file download URI"
3.Add your new field in the twig template: {{ field.uri.content }}
Done!