I have built a plugin that includes the following ImageField in the model:
image = models.ImageField(upload_to=get_feature_media_url)
This plugin also has the following template (which has been stripped down to remove irrelevant tags:
<img src="{{ instance.feature_block.image.url }}">
This image renders fine 9/10. However, occasionally Django decides to spit out the following HTML:
<img src="<correct-image-path>" width="0" height="0"
style="display: none !important;visibility: hidden !important;
opacity: 0 !important; background-position: 0px 0px;">
It seems to me that DjangoCMS really doesn't want to show this image. It's a reusable plugin and gets used over and over all across the project. Most of the time it renders fine. But I have to delete the entry in the database and do it again for it to show.
I have discussed this with members of the team and we're stumped. I have no idea why the plugin refuses to show this image.
Any help is appreciated. Thanks.
Do you by any chance have an adblocker installed in your browser? Does this happen even if you disable your adblocker?
Related
I have dark mode enabled on Mac, but it looks awkward in django admin panel with ckeditor. Is it any option to disable it in Chrome or Django admin? I have already tried themes and browser extensions with no success.
It looks like you're using some 3rd party theme for Django admin. I suggest checking if the maintainer of this theme wants to support Django 3.2 any time soon.
As for the quick fix for that, you can introduce your own stylesheet that will reset variables responsible for the dark theme. You can find the variables here.
To achieve that, create a separate css file in your static file directory, copy over the #media declaration from the code fragment mentioned above and paste the normal color scheme inside it (also to be found in the same code fragment). After that, create a admin/base_site.html template, fill it with this content or the equivalent from the theme you're using and link your custom CSS in the extrastyle block (you may need to create that block by hand).
There's an app for that.
pip install django-light, details at https://github.com/frnhr/django-light.
Full disclosure: I'm the author. Well, more like "packager", not much original code there...
as #GwynBleidD wrote, I changed my admin/base_site.html like this, and it works:
{% extends "admin/base_site.html" %}
{% block extrastyle %}
<style>
#media (prefers-color-scheme: dark) {
:root {
--primary: #79aec8;
--primary-fg: #fff;
--body-fg: #333;
--body-bg: #fff;
--body-quiet-color: #666;
--body-loud-color: #000;
--breadcrumbs-fg: #c4dce8;
--breadcrumbs-bg: var(--primary);
--link-fg: #447e9b;
--link-hover-color: #036;
--link-selected-fg: #5b80b2;
--hairline-color: #e8e8e8;
--border-color: #ccc;
--error-fg: #ba2121;
--message-success-bg: #dfd;
--message-warning-bg: #ffc;
--message-error-bg: #ffefef;
--darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
--selected-bg: #e4e4e4; /* E.g. selected table cells */
--selected-row: #ffc;
--close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
--close-button-hover-bg: #747474;
}
}
</style>
{% endblock %}
You can disable dark mode in Django 4.1 and above by overriding admin/base.html in your template. https://github.com/django/django/pull/14929
{% extends "admin/base.html" %}
{% block dark-mode-vars %}{% endblock %}
I've built a website using a purchased template and Joomla. I have a corporate logo which shows up perfectly on desktop. It comes up way too big on mobile. This is the following code I have entered.
<p><img src="images/Logomakr_7azv9e.png" alt="" width="100%" height="100%" /></p>
How would I write an if statement so that logo/picture only shows up on desktops and not mobile? Or perhaps to make the logo appear, just smaller?
As others have noted, CSS is the best way to do this.
HTML
Add a class to your image so you can target it and remove the height and width values:
<p><img class="logo" src="images/Logomakr_7azv9e.png" alt="" /></p>
CSS
Set the default values for the size of the logo
.logo{
width:100%;
height:100%;
}
Use #media queries to hide the logo on mobile, adjust the viewport from 767px to whatever you prefer
#media (max-width: 767px) {
.logo{display:none;}
}
You do have other options though. You mention that the logo is too wide on mobile, so instead of removing it completely you could also make it smaller:
#media (max-width: 767px) {
.logo{
width:30%;
height:30%;
}
}
Good luck!
I've been try to add the background image of a div to a value from Sitecore (8.0) in C# MVC using the code
<div style="background-image: url({Model.MyImage.Src})>
Where MyImage is of type Image as returned by GlassView
This is returning html such as
<div style="background-image: url(/~/media/myFolders/myImage.ashx)">
This image isnt being displayed when the page is rendered- although the url resolves when entered into the browser's address bar so it must be an issue with the .ashx extension as a background image for a div.
I also tried using Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem) but this also returned me the ashx which couldn't be resolved!
Try background-image: url('#Model.Image.Src'). While your example doesn't show it, you most likely have spaces in your folder or file name, which requires single or double quotes.
Add single quotes around it.
url('{Model.MyImage.Src}')
Should make this
url('/~/media/myFolders/myImage.ashx')
for my case sitecore 8.2 stop working below code because of style attribute
I have replaced style attribute with img tag and start working
<span><img src="#item.GetImageUrl("MyImage")" alt="" class="icon" /></span>
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}